Zugängliche SVGs im Hochkontrastmodus

Das Erstellen von barrierefreien SVGs erfordert zusätzliche Schritte in Ihrem Workflow, ist es aber absolut wert. Durch die Verwendung sauberer, semantischer Markup-Elemente und die Nutzung einiger weniger bekannter CSS-Funktionen können Sie leicht wartbare Lösungen erstellen, die Rücksicht auf eingeschränktes Sehvermögen nehmen, eine Beeinträchtigung, die einen nicht unerheblichen Teil der Bevölkerung betrifft.

Anstatt komplizierten und fragilen, zustandsverwaltenden Javascript-Code zu schreiben und zu pflegen, nutzen Sie vorhandene Browser-Funktionen wie Media Queries, um die Benutzererfahrung für die unterschiedlichsten Browser-Kontexte, einschließlich des Hochkontrastmodus, ganz einfach anzupassen.

SVG lässt sich gut mit Media Queries kombinieren. Media Queries sind eine CSS-Funktion, mit der Sie festlegen können, wie etwas unter bestimmten Bedingungen aussehen soll, z. B. bei einer minimalen Browser-Fenstergröße. Nehmen wir als Beispiel diese süße SVG-Rakete

Mit der Klasse .rocket können wir das SVG anweisen, sich zu drehen und von Rot auf Blau zu wechseln, wenn das Browserfenster breiter als 600 Pixel ist, ähnlich wie bei der Gestaltung jedes anderen HTML-Tags. Ziemlich schick, oder?

Media Queries sind nicht auf die Fenstergröße beschränkt. Mit einer relativ obskuren Funktion von CSS können Sie den Windows-Hochkontrastmodus ansprechen. Dies ist eine Betriebssystemeinstellung, die Eigenschaften wie Farbe und Schriftgröße überschreibt, um den Computer für Menschen mit Sehbehinderungen leichter bedienbar zu machen. Wenn Sie Windows verwenden, probieren Sie es selbst aus!

Der Code zum Ansprechen des Hochkontrastmodus sieht so aus

/* Targets displays using any of Windows’ High Contrast Mode themes: */
@media screen and (-ms-high-contrast: active) { }

/* Targets displays using the Windows’ "High Contrast Black" theme: */
@media screen and (-ms-high-contrast: white-on-black) { }

/* Targets displays using the Windows’ "High Contrast White" theme: */
@media screen and (-ms-high-contrast: black-on-white) { }

Es gibt eine Art Kaskade mit diesen Media Queries: active überschreibt sowohl black-on-white als auch white-on-black, wenn es zuletzt deklariert wird. Beachten Sie, dass dies herstellerspezifische Präfixe sind, sodass -ms signalisiert, dass es nur unter Microsoft Windows funktioniert (und selbst dann nur mit Internet Explorer Versionen 10 und höher sowie Microsoft Edge).

Interessanterweise unterstützt Chrome unter Windows die Media Queries für den Hochkontrastmodus nicht von Haus aus. Es fordert Sie jedoch auf, eine Erweiterung für hohen Kontrast zu installieren, nach einem dunklen Thema zu suchen und diesen Support-Artikel zu verlinken. Es berücksichtigt jedoch nicht die Media Query für den Hochkontrastmodus, nachdem entweder die Erweiterung oder das Thema installiert wurde.

Es ist auch erwähnenswert, dass Windows Benutzern die Erstellung benutzerdefinierter Hochkontrast-Themes ermöglicht. Das bedeutet, dass Inhalte, die vom Hochkontrastmodus betroffen sind, in einen Wert geändert werden können, der zum Zeitpunkt der Erstellung Ihres CSS nicht vorhersehbar ist.

Um Farben zu vermeiden, die im Hochkontrastmodus einen zu geringen Kontrast aufweisen, werden die vom Moduswechsel betroffenen Inhaltstypen auf spezifische CSS 2 System Color-Schlüsselwörter abgebildet.

• Text wird auf windowText abgebildet.
• Die Linkfarbe wird auf <a>-Tags angewendet.
• Ausgewählter Text wird auf highlightText und highlight abgebildet.
• Schaltflächentext wird auf buttonFace abgebildet.
• Hintergrund wird auf window abgebildet.

Wenn wir die oben gelernten Erkenntnisse kombinieren, ist es absolut möglich, SVG-Bilder zu erstellen, die dynamisch auf diese speziellen Modi reagieren, ohne auf komplizierte Javascript-Logik zurückgreifen zu müssen.

Sie fragen sich vielleicht: "Warum sollte ich das tun?" Nun, aus mehreren Gründen.

Wenn Sie es nicht sehen können, können Sie es nicht benutzen.

Die meisten Icons werden heutzutage als SVGs erstellt, da sie flexibel, hochauflösend und klein sind. Wir verlassen uns in den meisten modernen Benutzeroberflächen auf diese Icons, um Funktionalität zu kommunizieren. Dies kann von Unterhaltung, wo eine unklare Absicht nur ärgerlich ist, bis hin zu ernsten Anwendungen wie medizinischen Geräten, Fahrzeugen oder Steuerelementen für Infrastrukturen reichen, wo die Einsätze viel höher sind.

Leider neigen viele Designer und Entwickler dazu, ihre Icons nicht richtig zu beschriften, was ihre Nutzung unter suboptimalen Bedingungen erschwert. Im modernen Webdesign gibt es zudem einen unglücklichen Trend zur Verwendung von Farbschemata mit geringem Kontrast.

Diese Farbschemata werden in der gesamten Anwendung verwendet, um ein Gefühl der Einheit zu vermitteln, einschließlich der Gestaltung von Icons. Wenn diese Farben unter Bedingungen, die nicht perfekt sind, nicht funktionieren, beeinträchtigen sie jeden Bildschirm.

Sie sind wahrscheinlich betroffen.

Sehbehinderungen, einschließlich der eingeschränkten Sehfähigkeit, sind häufiger als man vielleicht denkt – schätzungsweise 246 Millionen Menschen haben laut Berichten eine eingeschränkte Sehfähigkeit. Vergessen wir auch nicht Umweltfaktoren wie Nachtblindheit und plötzliche Exposition gegenüber direktem Sonnenlicht, die jemanden vorübergehend einschränken können (insbesondere bei der Bedienung eines Geräts mit Hintergrundbeleuchtung). Bedenken Sie, dass selbst wenn Ihr Sehvermögen jetzt nicht beeinträchtigt ist, es in Zukunft beeinträchtigt sein kann.

Das Web ist nicht immer farbenfroh.

Hoher Kontrast bedeutet nicht zwangsläufig, dass immer eine Sehbehinderung vorliegt. Hochkontrastanzeigen sind nicht immer mit Sehbehinderungen verknüpft. Viele Geräte, die auf das Web zugreifen, verwenden Displays mit wenig oder gar keiner Farbe, und das sind nicht immer "einfachere" Geräte.

Die oben erwähnte Media Query "black-on-white" ist ein perfektes Beispiel dafür, was ein E-Reader wie ein Kindle anzeigen würde. Denken Sie daran: Der beste Browser ist der, den Sie dabei haben!

Windows ist immer noch überall.

Wenn Sie diesen Artikel lesen, sind Sie wahrscheinlich Designer, Entwickler oder eine technisch versierte Person, was bedeutet, dass Sie ihn höchstwahrscheinlich auf einem Apple- oder Android-Gerät lesen.

Dies ist eine Erinnerung daran, dass Windows immer noch ein unglaublich beliebtes Betriebssystem ist und auf mehr als der Hälfte aller Desktop-Betriebssysteme läuft. Von den verbreiteten Versionen dominieren diejenigen, die Media Queries für den Hochkontrastmodus unterstützen, und machten zum Zeitpunkt der Veröffentlichung dieses Artikels etwa 70 Prozent des Marktanteils aus. Selbst wenn es ein Prozentsatz eines Prozentsatzes einer Bevölkerung ist, ist dies immer noch keine unbedeutende Zahl.

Bald wird es mehr als nur Windows sein.

Obwohl der Hochkontrastmodus von Windows nicht weit verbreitet ist, ist die bevorstehende Light Level Media Feature für jeden großen Browser geplant. Dies ermöglicht Entwicklern effektiv die gleichen Bedingungen anzusprechen, die auch der Hochkontrastmodus bietet. Andere Geräte, insbesondere solche, die ein barrierefreies Betriebssystem wie iOS ausführen, werden dies wahrscheinlich schnell übernehmen.

Bewährt.

Da dies in CSS beschrieben wird, funktionieren die Kontrast-Anpassungsfunktionen auch dann, wenn Javascript nicht funktioniert. Denken Sie daran: Jede Website beginnt ohne Javascript-Funktionalität, bis der Browser sie heruntergeladen hat!

Die Verwendung von Media Queries bedeutet auch, dass die präsentationalen Eigenschaften für Inhalte im CSS verbleiben, wo sie hingehören. Dies wahrt die Trennung der Zuständigkeiten; eine Einzellösung für alle Styling-bezogenen Entwicklungsanstrengungen. Dies wird besonders einfach zu warten, wenn Sie Komponenten-Partials mit einem CSS-Präprozessor wie Sass oder Less verwenden.

Es ist das Richtige.

Weit über oberflächliche Diskussionen hinausgehend, ist die Berücksichtigung von eingeschränktem Sehvermögen Teil des "echten" responsiven Designs. Es geht nicht nur darum, dass das Design auf einem Handy funktioniert, sondern darum, dass der Inhalt Ihrer Website auf der größtmöglichen Bandbreite von Geräten und Situationen funktioniert.

Zusätzlich zu all den großartigen Vorteilen gibt es auch viele konkrete Gewinne, die Sie erzielen können, wenn Sie sich für Barrierefreiheit einsetzen. Ganz zu schweigen von dem guten Gefühl, wenn Sie wissen, dass Sie Menschen helfen!

„Klingt großartig! Ich bin voll und ganz überzeugt“, sagen Sie jetzt. „Ich schätze meine Website und kümmere mich sehr um die Leute, die sie sehen. Muss ich jetzt meine gesamte Website neu gestalten, damit sie im Hochkontrastmodus gut aussieht?“

Die Antwort ist ein sehr entschiedenes: „Nein.“

Einige sehr clevere Ingenieure haben dafür gesorgt, dass der Hochkontrastmodus dies hervorragend für Sie übernimmt. Solange Sie bewährte, semantische HTML-Elemente verwenden, die mit CSS gestaltet sind, ist praktisch garantiert, dass Ihre Inhalte automatisch in etwas umgewandelt werden, das hochkontrastfreundlich ist.

Wichtiger ist, dass die Darstellung im Hochkontrastmodus *vorhersehbar* bleibt, was für die Menschen, die sie für ihre tägliche Navigation nutzen, unglaublich wichtig ist. Diese Vorhersehbarkeit zu stören, gleicht dem Umdrehen aller Buchstaben auf einer Webseite – eine willkürliche und überraschende Anpassung, die das Lesen aus keinem praktischen Grund erschwert. Der Hochkontrastmodus mag Ihnen seltsam erscheinen, aber für Tausende von Menschen ist er völlig normal.

Bilder, einschließlich SVGs, sind eine der Inhaltstypen, die im Hochkontrastmodus nicht automatisch gut übertragen werden – das ist einer der vielen Gründe, warum die Zugänglichmachung Ihrer Bilder so wichtig ist.

Arbeiten Sie *mit* den Gegebenheiten der Technologie und verwenden Sie Media Queries für den Hochkontrastmodus, um die Einschränkungen der Bildhandhabung durch den Hochkontrastmodus zu umgehen. Schreiben Sie kleine, präzise Anpassungen, um sicherzustellen, dass kritische Inhalte für Bedingungen angezeigt werden, bei denen die Sehbehinderung nicht so stark ist, dass ein Screenreader erforderlich wäre.

Im folgenden Beispiel wurde unser Raketen-Icon in einen Start-Button umgewandelt.

Keine große Leistung und eine, die an eine sehr wichtige Funktion gebunden zu sein scheint. Nehmen wir an, aus irgendeinem unglücklichen Grund verwendet der Styleguide Ihrer Website ein Farbschema mit geringem Kontrast und das Design verwendet keine beschrifteten Buttons. Für diesen Beitrag nehmen wir auch an, dass Sie keine Verhandlungsmacht haben, um eines der beiden Probleme in diesem Szenario anzufechten – eine leider allzu häufige Situation.

Ohne die Media Query für den Hochkontrastmodus für Ihren Start-Button ist dieser visuell nicht zugänglich. Die Icon-Farbe des Buttons hat ein Kontrastverhältnis von 2,2, wenn sie im Hochkontrastmodus auf schwarzem Hintergrund angezeigt wird. Dies verstößt gegen die WCAG 2.0 Kriterien für akzeptablen Kontrast.

Obwohl die weiße Sichel am unteren Rand ein ausreichend hohes Kontrastverhältnis aufweist, um visuell erkennbar zu sein, gibt es nicht genügend unterstützende Informationen, um zu kommunizieren, dass sie Teil eines Buttons ist.

Mit kleinsten Anpassungen kann der Button unabhängig davon, welches Hochkontrastmodus-Theme verwendet wird, visuell erkennbar gemacht werden.

Wenn Sie mit einem Icon-System arbeiten und Ihre Icons einfach genug sind, dass sie auf eine Farbe reduziert werden können, ohne ihre Bedeutung zu verlieren, sollten Sie in Erwägung ziehen, alle Ihre Hochkontrast-Anpassungen an dieselbe unveränderliche Klasse zu koppeln, die auch alle anderen Icon-Stile steuert.

@media screen and (-ms-high-contrast: active) {
  .button-icon {
    fill: ButtonText;
  }
}

Komplexere Icons und Illustrationen mit mehreren Farben sollten von Fall zu Fall behandelt werden, da pauschale Styling-Anweisungen sie in unerkennbare Kleckse verwandeln oder Interaktivität kommunizieren könnten, wo keine ist.

Eine weitere interessante Idee für die Verarbeitung von Bildern im Hochkontrastmodus ist die Verwendung von CSS-Filtern, um das Vorhandene zu verbessern. Obwohl es keine perfekte Abdeckung gibt, könnten Eigenschaften wie saturation(), brightness() und contrast() den Inhalt progressiv verbessern, ohne das Originalbild zu zerstören.

@media screen and (-ms-high-contrast: active) {
  main .post-image {
    filter: brightness(1) contrast(1) saturate(1.5);
  }
}

„Nun, was ist mit all den kleinen Bildern auf meiner Seite? Sie wissen schon, die Texturen, Verzierungen und Illustrationen, die ich verwende, um sie zu schmücken?“

Dekorative Bilder sind nur das – dekorativ. Eliminieren Sie diese Art von Ablenkungen, indem Sie ornamentale Elemente semantisch negieren, indem Sie Techniken wie die background-image-Eigenschaft von CSS und die ARIA-Deklaration aria-hidden="true" verwenden. Dies stellt sicher, dass der Parser des Hochkontrastmodus bei nichts nicht Wesentlichem hängen bleibt.

„Okay, ich bin noch bei Ihnen. Was ist mit Helligkeits-Media-Queries? Werden das Dinge sein, die ich bald berücksichtigen muss?“

Die einfache Antwort ist: Machen Sie die Dinge nicht komplizierter als nötig. Je weniger Ausnahmen Sie handhaben müssen, desto einfacher ist die Wartung. Indem Sie sicherstellen, dass Ihr Design unter normalen Betrachtungsbedingungen ein ausreichendes Kontrastverhältnis für alle seine Bestandteile aufweist und Textbeschriftungen dort bereitstellen, wo sie benötigt werden, entfernen Sie den gesamten zusätzlichen Aufwand, der mit dem Jonglieren mehrerer Versionen verbunden ist. Außerdem erhalten Sie kostenlos die WCAG-Konformität. Schön!