{"id":3142,"date":"2022-11-15T10:09:22","date_gmt":"2022-11-15T10:09:22","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/4-common-web-accessibility-issues-to-know\/"},"modified":"2026-03-09T13:10:53","modified_gmt":"2026-03-09T13:10:53","slug":"problem-des-kontrastverhaltnisses","status":"publish","type":"post","link":"https:\/\/thecodest.co\/de\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 H\u00e4ufig auftretende Probleme bei der Barrierefreiheit im Web, die Sie kennen sollten"},"content":{"rendered":"

Problem des Kontrastverh\u00e4ltnisses<\/h2>\n\n\n\n

Das h\u00e4ufigste Problem mit der Zug\u00e4nglichkeit, das ich im Laufe der Jahre gesehen habe, ist die Kontrast- und Farbzug\u00e4nglichkeitsproblem<\/b>Ein schlechtes Kontrastverh\u00e4ltnis macht es schwer, den Inhalt Ihrer Seite zu erkennen, und das ist sehr sch\u00e4dlich f\u00fcr Ihre Nutzer, einschlie\u00dflich derjenigen mit Sehbehinderungen. <\/p>\n\n\n\n

Der Kontrast ist ein Ma\u00df f\u00fcr den Unterschied in der wahrgenommenen \"Luminanz\" oder Helligkeit zwischen zwei Farben, z. B. der Unterschied zwischen der Hintergrundfarbe und der Vordergrundfarbe Ihres Seiteninhalts. Werfen wir einen Blick auf diese Navigationsleiste.<\/p>\n\n\n\n

\"Navigationsleiste<em>mit<em>gr\u00fcnen<\/em>Titeln\"<\/figure>\n\n\n\n

Nehmen wir an, Ihr Kunde mag diese gr\u00fcnliche Farbe wirklich und findet sie toll, aber es gibt ein Problem mit dem Kontrast. Wir haben eine #FFFFFF<\/code> Hintergrund mit einer #83A94C<\/code> Textfarbe, was zu einem Kontrastverh\u00e4ltnis von 2,71:1 f\u00fchrt, das weit unter dem Mindestkontrast liegt. 4.5:1<\/strong> ben\u00f6tigt. Um dieses Problem zu erkennen, haben wir mehrere L\u00f6sungen: <\/p>\n\n\n\n

    \n
  1. Verwenden Sie eine Online-Kontrastpr\u00fcfung wie die Webaim-Kontrastpr\u00fcfger\u00e4t<\/a>Das Programm berechnet das Kontrastverh\u00e4ltnis und gibt eine Pass<\/strong> oder Fail<\/strong> Note.<\/li>\n\n\n\n
  2. Verwenden Sie eine der vielen Browser-Erweiterungen zur Kontrastpr\u00fcfung, z. B: WCAG Farbkontrast-Pr\u00fcfger\u00e4t<\/a>.<\/li>\n\n\n\n
  3. Probieren Sie die integrierte Kontrastpr\u00fcfung des Browsers aus. Um ihn in Google Chrome zu verwenden, \u00f6ffnen Sie die Entwicklungswerkzeuge, untersuchen Sie das betreffende Element (z. B. den Home-Link unserer Navigationsleiste), gehen Sie zur CSS-Farbeigenschaft und klicken Sie auf das Farbrechteck, um den Farbw\u00e4hler zu \u00f6ffnen; unten wird Ihnen ein Wert f\u00fcr das Kontrastverh\u00e4ltnis angezeigt, den Sie f\u00fcr weitere Details erweitern k\u00f6nnen. Der Prozess ist genau das gleiche f\u00fcr Firefox, nur ein kleiner Unterschied im Verh\u00e4ltnis wird in der unteren linken Ecke des Farbw\u00e4hlers angezeigt.<\/li>\n<\/ol>\n\n\n\n
    \"schwarzer<em>Hintergrund<\/em>mit<em>blauem<\/em>Code\"<\/figure>\n\n\n\n

    Weitere Informationen zum Thema Kontrast finden Sie hier Kontrast und Farbe Zug\u00e4nglichkeit Artikel<\/a>.<\/p>\n\n\n\n

    Link Text Problem<\/h2>\n\n\n\n

    Links sind ein wichtiger Teil der Web<\/a> Heutzutage ist es sehr wichtig, sie zug\u00e4nglich zu machen. Ein Link muss einen Sinn ergeben und den Nutzer \u00fcber den Kontext informieren. Ein uninformativer Link mit Texten wie \"Lesen Sie mehr\", \"Klicken Sie hier\" oder \"Pr\u00fcfen Sie die Details\" ist daher nicht sehr hilfreich, statt \"Pr\u00fcfen Sie die Details\" f\u00fcr Produkt<\/a> Details, z. B. die Verwendung des Produktnamens wie \"The Mandalorian Helmet\" ist besser und informativer. W\u00f6rter wie hier klicken<\/code> oder mehr \u00fcber<\/code> kann weggelassen werden, da ein Link standardm\u00e4\u00dfig anklickbar ist und etwas wie \"mehr \u00fcber die heutigen Nachrichten\" zu \"heutige Nachrichten\" verk\u00fcrzt werden kann. Es gibt keine besondere Regel oder Begrenzung f\u00fcr die L\u00e4nge von Links, die Der Link muss lesbar sein<\/b> und lang genug, um eine gute Beschreibung ihres Zwecks zu geben.<\/p>\n\n\n\n

    Bilder als Links sind ein weit verbreitetes Muster, so dass hier dieselben Regeln gelten, \u00fcber die wir oben gesprochen haben. Das alt-Attribut des Bildes spielt die Rolle des Linktextes und wird von Screenreadern angezeigt. Es gibt mehrere Szenarien f\u00fcr die Behandlung von Bildern als Links, wenn das Bild der einzige Inhalt des Links ist, muss es ein alt-Attribut haben, wenn der Link etwas Text und ein Bild enth\u00e4lt, k\u00f6nnen wir das alt-Attribut weglassen, hier sind einige Beispiele:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Benachrichtigungen">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Hier finden Sie einige Links, die sich mit der Zug\u00e4nglichkeit von Links befassen:Linktext und Erscheinungsbild<\/a>, Funktionale Bilder<\/a>.<\/p>\n\n\n\n
    Formulareingabe mit fehlender Beschriftung<\/h2>\n\n\n\n
    \"Eingabe<em>Etiketten<\/em>mit<em>blauer<\/em>Schaltfl\u00e4che\"<\/figure>\n\n\n\n
    Wir alle haben diese Formulareingaben schon einmal gesehen, ohne Beschriftung und nur mit einem Platzhalter, der den Zweck der Eingabe beschreibt. Ein erster Hinweis ist, dass wir, sobald der Benutzer alle Eingaben ausf\u00fcllt und die Platzhalter nicht mehr zu sehen sind, keinen visuellen Kontext \u00fcber den Zweck der Eingaben haben, aber lassen Sie us<\/a> hier auf die Zug\u00e4nglichkeit konzentrieren. <\/p>\n\n\n\n
    Assoziieren einer Etikett<\/code> zu einer Eingabe hat zwei gro\u00dfe Vorteile: Ein Bildschirmleseger\u00e4t liest die Beschriftung vor, wenn der Benutzer auf die Formulareingabe fokussiert ist, und wenn eine Beschriftung angeklickt oder ber\u00fchrt\/getippt wird, \u00fcbergibt der Browser den Fokus an die zugeh\u00f6rige Eingabe. Eine einfache L\u00f6sung f\u00fcr diese Art von Situation ist das Hinzuf\u00fcgen von Beschriftungen wie folgt:<\/p>\n\n\n\n
        Vornamen\n\n    \n  \n\n    Nachname\n\n    \n  \n\n    E-Mail\n\n    \n  \n\n    Einreichen\n  \n\n```<\/code><\/pre>\n\n\n\n
    Das war's, alle Eingaben haben ihre zugeh\u00f6rigen Beschriftungen, so dass sie f\u00fcr jeden zug\u00e4nglich sind. Wir k\u00f6nnen sogar die Platzhalter entfernen, um zu vermeiden, dass der Zweck der Eingaben dupliziert wird, aber wir alle wissen, dass reale Szenarien nicht so einfach zu handhaben sind: Sie haben gerade einen Entwurf erhalten, der diese Formulareingaben ohne Beschriftungen enth\u00e4lt, und der Kunde m\u00f6chte diesen Teil nicht \u00e4ndern. Die erste L\u00f6sung, die einem in den Sinn kommt, ist die Anwendung eines Anzeige: keine;<\/code> oder Sichtbarkeit: versteckt;<\/code> zu unseren Beschriftungen hinzuf\u00fcgen, werden sie ausgeblendet, aber sie sind immer noch da, oder? Diese Eigenschaften verbergen Elemente nicht nur auf dem Bildschirm, sondern auch f\u00fcr Benutzer von Bildschirmleseger\u00e4ten, so dass dies unser Problem nicht l\u00f6sen wird.<\/p>\n\n\n\n
    Wir k\u00f6nnen die Clip-Muster<\/strong> um dieses Problem zu l\u00f6sen. Auf diese Weise werden wir den Inhalt visuell ausblenden, aber dennoch den Inhalt f\u00fcr Bildschirmleser bereitstellen. Wir werden das folgende CSS erstellen nur sr-only<\/code> Klasse und wenden sie auf alle unsere Etiketten an:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0);\n   clip-path: inset(50%);\n   height: 1px;\n   overflow: versteckt;\n   Position: absolut;\n   Leerzeichen: nowrap;\n   Breite: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    Dadurch werden unsere Beschriftungen ausgeblendet, f\u00fcr Bildschirmleser verf\u00fcgbar gemacht und an unser Design angepasst. Die :not(:focus):not(:active)<\/code> Pseudoklasse verhindert fokussierbare Elemente wie a<\/code>, Taste<\/code>, Eingabe<\/code> nicht verborgen werden, wenn sie fokussiert werden.<\/p>\n\n\n\n
    Kein Fokus-Indikator<\/h2>\n\n\n\n
    Vor einiger Zeit habe ich dies in meinem globalen CSS-Stylesheet getan:<\/p>\n\n\n\n
    * {\noutline: none; \/* Schrecklicher Fehler *\/\n}<\/code><\/pre>\n\n\n\n
    Um 2020 bemerkte ich schwarze R\u00e4nder auf Google Chrome Form Eingaben, wenn fokussiert oder auf die Schaltfl\u00e4chen, wenn in Tabs - das war wirklich seltsam, wie ich nicht verstehen, es zu der Zeit, nach einigen Recherchen habe ich herausgefunden, dass es wegen der Outline-CSS-Eigenschaft so Entfernen gel\u00f6st, dass \"Problem\" f\u00fcr mich.<\/p>\n\n\n\n
    Zu diesem Zeitpunkt hatte ich keine Ahnung, was der richtige Weg war, um es zu tun.  Nachdem ich einige Nachforschungen \u00fcber das Warum und Wie dieser neuen Standardeinstellung angestellt hatte, fand ich heraus, dass der Umriss ein Element-Fokus-Indikator ist und dass, wenn er entfernt wird, ein offensichtliches Fokus-Styling bereitgestellt werden muss; im Grunde wird das, was ich tat, als schlechte Praxis betrachtet. Man kann Fokusindikatoren nach eigenem Ermessen anpassen, aber sie komplett von der Website zu entfernen, ist ein gro\u00dfes Problem f\u00fcr die Barrierefreiheit. Die Anpassung eines Element-Fokus-Stylings ist zum Beispiel ziemlich einfach:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    Zug\u00e4nglichkeits-Tools<\/h2>\n\n\n\n
    Die \u00dcberpr\u00fcfung all der Themen, \u00fcber die wir gesprochen haben, kann eine Menge Arbeit sein, vor allem wenn man wei\u00df, dass es noch viel mehr \u00fcber Barrierefreiheit zu berichten gibt. Um uns bei der Barrierefreiheit zu helfen, haben wir 2 gro\u00dfartige Browser-Erweiterungen.<\/p>\n\n\n\n
    WAVE-Bewertungstool<\/a> ist eine Reihe von Bewertungswerkzeugen, die uns helfen, unsere Webinhalte besser zug\u00e4nglich zu machen. Sie ist sowohl in Google Chrome als auch in Firefox verf\u00fcgbar. <\/p>\n\n\n\n
    Probieren wir es auf einer kleinen Webseite aus, die eine Navigationsleiste und eine Eingabe ohne Beschriftung enth\u00e4lt, und sehen wir, was dabei herauskommt. Nach der Installation der Erweiterung brauchen wir nur auf das Symbol der Erweiterung zu klicken, um sie zu verwenden.<\/p>\n\n\n\n
    \"wei\u00dfes<em>Fenster<\/em>mit<em>grauen<\/em>Abschnitten\"<\/figure>\n\n\n\n
    Die Registerkarte \"Zusammenfassung\" zeigt 1 Fehler (Formularelement mit fehlender Beschriftung), 2 Kontrastfehler und 1 Warnung (fehlende \u00dcberschriftenstruktur), wie Sie sehen k\u00f6nnen, ist das Ergebnis sehr klar und detailliert. Auf der Registerkarte Details wird eine Liste aller Fehler, Warnungen und Merkmale angezeigt. Wir k\u00f6nnen auch direkt auf der Seite interagieren, indem wir auf die roten Rechtecke klicken, um die Fehlerbeschreibung und den Fehlertyp zu \u00fcberpr\u00fcfen.<\/p>\n\n\n\n
    Axt DevTools<\/a> ist ein leistungsstarkes und pr\u00e4zises Toolkit f\u00fcr die Barrierefreiheit. Es ist sowohl in Google Chrome als auch in Firefox verf\u00fcgbar. Nach der Installation der Erweiterung m\u00fcssen wir die Browser-Entwicklungstools \u00f6ffnen und auf die Registerkarte axe DevTools gehen und auf Alle meine Seiten scannen klicken.<\/p>\n\n\n\n
    \"DevTools<em>Fenster<\/em>mit<em>schwarzen<\/em>grauen_Abschnitten\"<\/figure>\n\n\n\n
    Wie Sie sehen k\u00f6nnen, hat Axe DevTools die gleichen Probleme mit dem WAVE Evaluation Tool gemeldet, n\u00e4mlich Kontrastprobleme, Formularelemente, denen eine Beschriftung fehlt, und fehlende \u00dcberschriftenelemente, und hat uns sogar einige Best Practices an die Hand gegeben.<\/p>\n\n\n\n
    Eine weitere M\u00f6glichkeit, die Zug\u00e4nglichkeit zu testen, ist die Verwendung eines Bildschirmleseger\u00e4ts und das Testen Ihrer Website mit diesem Ger\u00e4t; es gibt viele Bildschirmleseger\u00e4te, um nur einige zu nennen:<\/p>\n\n\n\n