PageSpeed Insights - Schaltflächen haben keinen für Screenreader zugänglichen Namen

    Hallo zusammen,


    beim Durchlauf der Seite mit PageSpeed Insights wird folgendes bemängelt:


    Code
    Schaltflächen haben keinen für Screenreader zugänglichen Namen
Wenn eine Schaltfläche keinen zugänglichen Namen hat, wird sie von Screenreadern als "Schaltfläche" angesagt, was sie für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar macht. Weitere Informationen.
Fehlerhafte Elemente
div.sp-module-content > form.mod-finder > div.mod-finder__search > button.btn
<button class="btn btn-primary" type="submit">


    Kann / sollte / muss man das irgendwie korrigieren?

    Wenn ja, wie? Ich habe dazu keine Lösung finden können...
    Template ist Helix Ultimate, falls es daran liegen sollte.

    VG Wolfgang

    FMB GmbH - Zuführtechnik und mehr!


    - Industrieautomatisierung aus Braunschweig -

    Das sind meist, nicht immer, Buttons, die nur ein Icon enthalten. Bei dir die Lupe.


    Diese sollten im Normalfall eine zusätzliche Info haben, was der Button macht. Menschen mit Sehbeeinträchtigungen hören diese Info in ihrem sog. ScreenReader. Ein Hilfsmittel, das Webseiten "vorliest".


    Bei dir das Suchemodul oben links, die Lupe. Da Joomla 4 das eigentlich richtig macht, handelt es sich vermutlich um einen Override(?) deines Templates. Es gibt diverse andere Varianten, das richtig zu machen.


    Verschärfend kommt noch hinzu, das das Label des Feldes nichts enthält, was der Screenreader ausgeben könnte


    Stichworte A11y bzw. barrierefreiheit.


    EDIT: Es gibt zwar einen solchen Hinweis für Screenreader "Type 2 or more characters for results.", aber der ist nicht dem Button zugeordnet.

    Puuuhh.... Dann bin ich mit meinem Latein am Ende :(

    Bewusst habe ich nur "Bezeichnung Suchfeld" im Modul Suchindex ausgeblendet, da es mir die oberste Zeile zerschießt. Aber selbst wenn ich das aktiviere ändert das nichts an dem Mangel der Barrierefreiheit.


    Template Override... bin ich mir nicht bewusst einen angelegt zu haben.

    Aber es werden mir 3 angezeigt:


    Code
    /html/com_contact/contact/default_address.php
/html/com_contact/contact/default_form.php
/html/layouts/joomla/content/info_block.php

    Als Update-Quelle steht bei allen dreien jeweils Joomla-Update.


    Wäre das denn in denen überhaupt zu finden?

    FMB GmbH - Zuführtechnik und mehr!


    - Industrieautomatisierung aus Braunschweig -

    Ich Dussel...
    Mir ist eingefallen dass ich mal irgendwann den Text "Suchen" neben dem Lupen Button mit einem Override von JSEARCH_FILTER_SUBMIT gelöscht hatte...
    Hat also doch einen Grund dass es dort stehen bleiben sollte.

    Thema erstmal gelöst :)

    FMB GmbH - Zuführtechnik und mehr!


    - Industrieautomatisierung aus Braunschweig -

    Zitat von Re:Later

    Man kann ihn natürlich auch visuell verstecken, so, dass Screenreader in lesen können.


    Eine Variante wäre ihn in einen

    Code
    <span class="visually-hidden">Suchen</span>

    zu verfrachten.

    Guten Morgen,


    ich bin anscheinend noch nicht ganz wach, wo muss ich das denn eintragen?

    Im Modul Suchindex irgendwo, oder in der custom.css?

    FMB GmbH - Zuführtechnik und mehr!


    - Industrieautomatisierung aus Braunschweig -

    Dein Template kennt die CSS-Klasse "visually-hidden" schon. In CSS musst also nichts nachrüsten. Sonst wäre das <label> des Feldes nicht "unsichtbar". Das nutzt diese CSS-Klasse.


    Dann sehe ich, dass du irgendwie das "Suchen" jetzt im Button wieder drinnen hast.

    Code
    <button class="btn btn-primary" type="submit">
 <span class="icon-search icon-white" aria-hidden="true"></span>
 Suchen
</button>

    Jetzt müsstest also in einem Override des Moduls um die Stelle, wo das "Suchen" ausgegeben wird, drumrumbasteln.


    Das Joomla-Original ist das

    Code
        $output .= '<button class="btn btn-primary" type="submit"><span class="icon-search icon-white" aria-hidden="true"></span> ' . Text::_('JSEARCH_FILTER_SUBMIT') . '</button>';

    und in einem Override wäre es dann bei mir:

    Code
    $output .= '<button class="btn btn-primary" type="submit"><span class="icon-search icon-white" aria-hidden="true"></span><span class="visually-hidden">' . Text::_('JSEARCH_FILTER_SUBMIT') . '</span></button>';