Barrierefreiheit (Accessibility) Score

    Hallo liebe Community,

    aktuell beschäftige ich mich intensiv mit dem Bau von Websites und habe mir als Ziel gesetzt, im Google Lighthouse Report in allen Bereichen zwischen 95 und 100% zu erreichen. Dabei stoße ich allerdings auf ein Problem im Bereich der Barrierefreiheit (Accessibility): Es wird mir angezeigt, dass "Links do not have a discernible name". Dies scheint die Icons zu betreffen, die für die Weiterleitung zu E-Mail-Diensten genutzt werden. Hat jemand von euch eine Idee, wie ich dieses Problem beheben kann? Oder wäre es besser, die Links bzw. Icons einfach zu entfernen? Falls jemand einen Blick darauf werfen möchte, hier ist der Link zur Website.

    Vielen Dank im Voraus für eure Hilfe!

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von frogface


    Es wird mir angezeigt, dass "Links do not have a discernible name".

    wenn du https://pagespeed.web.dev/analysis/ verwendest bekommst du weiterführende Links angezeigt

    https://dequeuniversity.com/rules/axe/4.7/link-name

    Zitat von frogface


    Dies scheint die Icons zu betreffen, die für die Weiterleitung zu E-Mail-Diensten genutzt werden.

    Das Attribut aria-hidden wird verwendet, um Inhalte für Screenreader und andere assistive Technologien auszublenden. Wenn du aria-hidden="true" zu einem Element hinzufügst, wird dieses Element und alle seine Kinder aus dem Zugänglichkeitsbaum entfernt. Dies ist besonders nützlich für rein dekorative Inhalte wie Icons, die keine interaktive Funktion haben und daher nicht von Screenreadern vorgelesen werden müssen

    Code
    <i class="fa fa-twitter" aria-hidden="true"></i>

    Das aria-label wird verwendet, um einem Link eine zugängliche Bezeichnung zu geben, insbesondere wenn der Linktext selbst nicht ausreichend beschreibt, wohin der Link führt oder was er tut. Es ist besonders nützlich, wenn der Linktext kurz oder mehrdeutig ist, wie “Mehr lesen” oder “Hier klicken”. Mit aria-label kannst du eine ausführlichere Beschreibung bereitstellen, die von Screenreadern gelesen wird, um Nutzern mit Sehbehinderungen zu helfen, den Zweck des Links zu verstehen.

    Code
    <a href="seite.html" aria-label="Mehr über Thema X erfahren">Mehr lesen</a>

    Mit offenen Augen träumen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden