Teil 4: Zugänglichkeit und Barrierefreiheit

Digitale Produkte für alle: Barrierefreies Webdesign
Keine Kommentare

Digitale Produkte sollen auch von Nutzern mit Handicaps zu bedienen sein. Für viele Menschen existiert eine große Menge unüberwindbarer Barrieren, die sie in ihrer Nutzung bestimmter Anwendungen behindern bzw. beeinträchtigen. Damit Entwicklung und Design diese Hindernisse abbauen können, müssen wir uns damit auseinandersetzen.

Je weiter digitale Produkte und insbesondere Software in unseren Alltag eindringen, desto mehr müssen wir darauf achten, dass die Produkte auch von allen Anwendern benutzbar sind. Dass Straßenbahnen einen barrierefreien Zugang für alle möglichen Passanten aufweisen sollten, ist unumstritten. Niemand soll von der Mobilität ausgeschlossen werden. In der digitalen Welt gilt das leider noch nicht. Doch je mehr es zur unabdingbaren Voraussetzung wird, dass digitale Produkte von allen potenziellen Nutzern bedient werden können, desto größer ist die Notwendigkeit der Umsetzung von Barrierefreiheit in diesem Bereich. Uns als Entwicklern und Designern kommt dabei eine besondere Verantwortung zu. In diesem Teil unserer Serie „Passgenau für den Nutzer“ geht es um die Barrierefreiheit von Apps, Webseiten und Co. für Nutzer mit Handicaps (Kasten: „Barrierefreiheit“).

Artikelserie

Barrieren ergeben sich nicht nur durch körperliche Einschränkung des Nutzers, zum Beispiel Sehbehinderungen. Sie können auch andere Ursachen haben und zum Beispiel durch die eingesetzte Hard- und Software begründet sein. Hat das Smartphone einen zu kleinen Bildschirm, können Informationen von den Betroffenen unter Umständen gar nicht oder nur schwer gelesen werden. Weitere Hindernisse sind zum Beispiel eine unzureichende Optimierung für bestimmte Browser, ein zu geringer Kontrast zwischen Text- und Hintergrundfarbe oder eine nicht anpassbare Schriftgröße. Gründe für die Einschränkungen können auch in der Person begründet sein, zum Beispiel durch eingeschränkte Sprachkenntnisse. Wir können daher feststellen: Barrieren haben technische und inhaltliche Facetten. Oft ist es sogar eine Kombination von Hindernissen.

Daraus leiten wir ein Ziel ab: Anwendungen sollten so gestaltet sein, dass sie für alle denkbaren Personen und Nutzergruppen möglichst leicht zugänglich sind.

Barrierefreiheit

Wie kann man den Begriff der „Barrierefreiheit“ definieren? Breite Türen, Rampen statt Treppen und absenkbare Busse. Das sind Praxisbeispiele aus unserem alltäglichen Leben. Unter Barrierefreiheit versteht man jedoch viel mehr als räumlich-bauliche Gestaltung allein: „Barrierefreiheit bezeichnet im deutschen Sprachgebrauch eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie von Menschen mit Beeinträchtigungen ohne zusätzliche Einschränkungen genutzt und wahrgenommen werden können.“ (BSVW – Blinden- und Sehbehindertenverein Westfalen e.V.)

Es geht um Inklusion und um Accessibility, das Schaffen von Zugängen. Barrierefreiheit bedeutet, dass nicht nur Stufen, sondern auch ein Aufzug oder eine Rampe ins Rathaus führen, dass Formulare nicht nur in komplizierter Amtssprache vorhanden sind, sondern auch in sogenannter Leichter Sprache, und dass auch gehörlose Menschen einem Vortrag folgen können – zum Beispiel mit Hilfe eines Gebärdensprachdolmetschers. Digitale Barrierefreiheit gehört ebenso dazu. Sie bedeutet, dass Internetseiten so gestaltet sein müssen, dass möglichst jeder sie nutzen kann, zum Beispiel durch das Hinterlegen von Bildbeschreibungen für blinde Menschen und die Möglichkeit, Videos in barrierefreien Formaten abzuspielen. Barrierefreie Software am Arbeitsplatz ist ebenfalls ein wichtiges Thema, denn nur so kann man möglichst vielen Personen den Zugang zu einem Arbeitsplatz und dessen langfristigen Erhalt ermöglichen.

Bevor wir zu konkreten Empfehlungen zur Vermeidung von Barrieren übergehen, sehen wir uns die Gründe für die Einschränkungen etwas näher an.

Körperliche Einschränkungen

Es gibt eine Menge körperlicher Einschränkungen, die das Benutzen digitaler Produkte verhindern bzw. stark einschränken können. In diesem Abschnitt gehen wir kurz auf die verschiedenen Ausprägungen möglicher Handicaps ein, wie sie sich aus einem Leitfaden zur Gestaltung barrierefreier Webseiten ergeben:

  • Blinde Anwender: Für diesen Anwenderkreis müssen alle Informationen alternativ auch als Text vorhanden sein, denn sie können keine Grafiken und Bilder wahrnehmen. Sie arbeiten mit Vorlesegeräten. Die Screenreader leiten die Struktur und Inhalte der Seite aus dem Quelltext ab, d. h. sie können dabei nicht visuell und intuitiv vorgehen.
  • Sehbehinderte Anwender: Optimale Farbkontraste und passende Schriftgrößen sind für diese Nutzer enorm wichtig.
  • Gehörlose Menschen: Hier geht es um Audio- und Videodateien, die durch Text in Form einer kurzen Zusammenfassung oder durch ein vollständiges Transskript zu ergänzen sind.
  • Lernbehinderte: Es handelt sich um Menschen, deren Fähigkeiten, neue Informationen aufzunehmen, sie zu interpretieren und im Gedächtnis zu behalten, eingeschränkt sind.
  • Motorisch behinderte Menschen: Menschen mit Muskel und Nervenerkrankungen, die den Cursor bzw. Mauszeiger i. d. R. mit der Tastatur steuern, da die mausgesteuerte Interaktionstechnik für sie oft eine unüberwindliche Hürde darstellt.
  • Epileptiker: Animationen in einem bestimmten Frequenzbereich (ca. 20 Hz) können bei an Epilepsie erkrankten bzw. zu Epilepsie neigenden Personen Anfälle auslösen. Daher ist es empfehlenswert, Flashanimationen und animierte GIFs generell zu vermeiden.
  • Senioren: Senioren werden oft durch festgelegte Schriftgrößen und einem ungünstigen Kontrast zwischen Schrift und Hintergrundfarbe eingeschränkt.

Die Vielfalt der möglichen Einschränkungen führt also dazu, dass man seine Applikation bzw. Webseite so gestalten muss, dass sie auch dann noch nutzbar ist, wenn mehrere Einschränkungen zusammentreffen. Die technischen Möglichkeiten dafür haben sich jedoch auch verbessert.

Gesetzliche Regelungen

Leider sind immer noch viele digitale Angebote nicht für jeden zugänglich. Gesetzliche Regelungen, Vorschriften und Richtlinien geben einen Rahmen für die Gestaltung digitaler Produkte vor. Als Grundlage dienen die Web Content Accessibility Guidelines 2.1 (WCAG 2.1). Darauf ist auch die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) aufgebaut. Es handelt sich nicht um testbare Aussagen, sondern um so genannte Recommendations (Empfehlungen), die nicht technikspezifische Statements als Anleitung enthalten. Die WCAG sind pyramidenartig aufgebaut und umfassen vier Ebenen (Abb. 1). Die ersten drei Ebenen sind normativ und stellen eine Art Fundament dar. Die vierte Ebene umfasst ergänzende Dokumente, die regelmäßig aktualisiert werden. Wir gehen kurz auf die einzelnen Punkte ein und beginnen mit den vier Grundprinzipien. Diese sind:

Abb. 1: Die Web Content Accessibility Guidelines (WCAG) umfassen vier Ebenen

Abb. 1: Die Web Content Accessibility Guidelines (WCAG) umfassen vier Ebenen

  • Wahrnehmbar: Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.
  • Bedienbar: Alle Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.
  • Verständlich: Informationen zu und die Bedienung der Benutzerschnittstelle müssen verständlich sein.
  • Robust: Inhalte müssen robust genug sein, damit sie zuverlässig von einer möglichst großen Anzahl von Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.

BASTA! 2020

Entity Framework Core 5.0: Das ist neu

mit Dr. Holger Schwichtenberg (www.IT-Visions.de/5Minds IT-Solutions)

Memory Ownership in C# und Rust

mit Rainer Stropek (timecockpit.com)

Softwarearchitektur nach COVID-19

mit Oliver Sturm (DevExpress)

Delphi Code Camp

Delphi Language Up-To-Date

mit Bernd Ua (Probucon)

TMS WEB Core training

mit Bruno Fierens (tmssoftware.com bvba)

Diese Grundprinzipien dienen als Basis für zwölf Richtlinien. Die Richtlinien sind nicht testbar. Sie geben nur den Rahmen und eine übergreifende Zielrichtung vor. Durch die Einhaltung der Richtlinien soll sichergestellt werden, dass die Inhalte für möglichst viele Nutzer zugänglich und entsprechend den Fähigkeiten behinderter Nutzer anpassbar sind. Kommen wir zu den einzelnen Richtlinien:

  • Textalternativen: Gemeint ist, dass für alle Nicht-Text-Inhalte alternativ auch Text vorhanden sein soll.
  • Zeitbasierte Medien: Für zeitbasierte Medien wie zum Beispiel Audio- und Videoinhalte sollen zeitlich unbeschränkte Alternativen zur Verfügung gestellt werden.
  • Anpassbar: Die Inhalte sollen so erstellt werden, dass sie auf verschiedene Arten dargestellt werden können, zum Beispiel auch mit einem einfachen Layout.
  • Unterscheidbar: Die Inhalte sollen leicht zu sehen und zu hören sein, zum Beispiel durch die Trennung von Vorder- und Hintergrund.
  • Per Tastatur zugänglich: Alle Funktionalitäten sollen auch per Tastatur bedienbar sein.
  • Ausreichend Zeit: Es soll dem Benutzer ausreichend Zeit zur Verfügung gestellt werden, zum Beispiel bei einer automatischen Weiterleitung.
  • Navigierbar: Der Benutzer soll bei der Navigation unterstütz werden.
  • Lesbar: Die Inhalte sollen lesbar und verständlich dargestellt werden.
  • Vorhersehbar: Die Webseite soll vorhersehbar aussehen und funktionieren.
  • Hilfestellung bei Eingabe: Dem Benutzer soll geholfen werden, Fehler zu vermeiden und diese zu korrigieren, zum Beispiel durch eine sinnvolle Prüfung der Eingaben.
  • Kompatibel: Die Kompatibilität einer Webseite soll maximiert werden – zum Beispiel, indem man sie auf den unterschiedlichsten Browsern und Geräten testet.

Aus diesen Richtlinien werden 61 Erfolgskriterien abgeleitet. Die Kriterien bieten konkrete Handlungsanweisungen und sind eine Grundlage für das Testen der Barrierefreiheit. Die 61 Erfolgskriterien sind drei Konformitätsstufen von A bis AAA wie folgt zugeordnet: 25 Erfolgskriterien zählen zur niedrigsten Stufe A, d. h., sie besitzen nur eine geringe Konformität. 13 Erfolgskriterien werden der Konformitätsstufe AA zugeordnet und 23 Erfolgskriterien der höchsten Konformitätsstufe AAA.

Die WCAG 2.1 ist mit einigen Ergänzungen für die unter das Behindertengleichstellungsgesetz (BGG) fallenden Bundesbehörden in der BITV 2.0 verbindlich gemacht worden. Die aktuelle Version BITV 2.0 ist am 25. Mai 2019 in Kraft getreten. Sie setzt Vorgaben der EU-Richtlinie 2016/2102 über die Barrierefreiheit von Websites und mobilen Anwendungen öffentlicher Stellen um. Ziel ist es, Webseiten und andere grafische Oberflächen so zu gestalten, dass auch Menschen mit Behinderungen sie nutzen können. Hauptsächlich werden in der BITV 2.0 der Anwendungsbereich und die technischen Standards für Dienststellen und sonstige Einrichtungen der Bundesverwaltung beschrieben. Um Barrierefreiheit zu erreichen, müssen folgende Punkte sichergestellt werden: Die Oberflächen der Anwendungen müssen

  • wahrnehmbar,
  • bedienbar,
  • verständlich und
  • robust sein.

Als erfüllt werden die Anforderungen angesehen, wenn die folgenden europäische Normen erfüllt sind: EN 301 549 und DIN EN ISO 14289-1.

Ein Weg zu einer barrierefreien IT

Es ist durchaus eine komplexe Aufgabe, Anwendungen bzw. Onlinecontent barrierefrei zu gestalten. Alle möglichen Nutzer müssen bedacht und vielfältige Bedürfnisse berücksichtigt werden. Kriterien sind Alter, Geschlecht, Herkunft sowie mögliche Beeinträchtigungen. Das ist nicht nur eine Aufgabe für Webentwickler und -designer, sondern auch für Personen, die Texte und sonstigen Content erstellen. Folgende Punkte sind auf dem Weg zu einer barrierefreien Gestaltung umzusetzen:

  • Heading-Strukturen: Eine gute Seitenstruktur ist der erste und wichtigste Schritt zur Barrierefreiheit. Eine logische Struktur der Überschriften ermöglicht es, Inhalte so zu strukturieren, dass die gewünschten Informationen schnell gefunden werden können. Ebenso steigt dadurch die Effizienz von Screen-Readern, denn diese sind nicht in der Lage, eigenständig zwischen Schriftgrößen und -stilen zu unterscheiden. Logisch aufgebaute Heading-Strukturen sind daher unerlässlich, um Textbausteine voneinander zu trennen. Webseiten sollten jeweils nur eine einzige Überschrift auf der Ebene <H1/> aufweisen. Grundsätzlich geht die Hierarchie von <H1/> bis <H6/>. Die Überschriften sollten in Reihenfolge platziert werden, ein <H3/>-Element darf daher nicht vor einem <H2/>-Element benutzt werden.
  • Wahrnehmbarkeit und Kontrast: Informationen müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können. Mann soll es den Benutzern möglichst leicht machen, Inhalte zu sehen und zwischen Vorder- und Hintergrund zu unterscheiden. Das World Wide Web Consortium (W3C) als Gremium zur Standardisierung der Techniken im WWW empfiehlt ein Kontrastverhältnis zwischen Text und Hintergrund von mindestens 4,5:1. Bei fetten und großen Schriften ist ein Verhältnis von 3:1 zulässig. Keine Kontrastanforderungen gibt es für Text oder Bilder, die zu den inaktiven Bestandteilen der Benutzerschnittstelle gehören oder eine rein dekorative Funktion haben. Für Logos oder Markennamen gelten ebenfalls keine Anforderungen an den Mindestkontrast. Kontraste sollte nicht nur unter optimalen Bedingungen sondern auch im Nutzungskontext berücksichtigt werden, zum Beispiel die Lesbarkeit bei unterschiedlichen Bildschirmgrößen oder bei starker Sonneneinstrahlung auf einem Smartphone.
  • Lesbarkeit: Der Text soll eine gute Lesbarkeit aufweisen. Die Leserichtung richtet sich nach der visuellen Ordnung und ist entweder horizontal oder vertikal. Die Textgöße im Body-Abschnitt sollte nicht weniger als 16 Pixel betragen und der Zeilenabstand sollte 25 Prozent der Schriftgröße nicht unterschreiten. Damit die Schriftgröße sich automatisch an die Auflösung anpassen kann, ist es empfehlenswert, im Stylesheet eine andere Maßeinheit als Pixel (px) zu verwenden, wie beispielsweise M (em) oder Punkt (pt). Mit anderen Worten: Größenangaben sind nach Möglichkeit mit relativen Angaben zu versehen. Ebenfalls sollte man stets die Zeilenlänge im Auge behalten, denn zu langen Textzeilen lassen sich schlecht lesen. Best Practice sind 80 Buchstaben pro Zeile. Wichtig ist auch, dass sich Hyperlinks vom übrigen Text unterscheiden, ohne dass man sie erst per Maus oder Tastatur annavigiert, denn Tastaturbenutzer sollten einen fokussierbaren Hyperlink auch visuell identifizieren können. In der Regel werden weiterführende Links mit dem Hinweis „Hier Klicken“ versehen. Für Screen-Reader-Nutzer ist diese Auszeichnung ein echtes Problem. Die Geräte fassen oft alle Links auf einer eigenen Seite in einer separaten Shortcut-Liste zusammen. Dort würde es dann gehäuft die nicht aussagekräftige Linkbezeichnung „Hier Klicken“ geben. Verlinkungen sollen daher auch ohne Kontext einen Sinn ergeben, d. h. der Linktext sollte bereits beschreiben, worum es geht. Besser ist daher zum Beispiel „Hier klicken, um mehr über das Thema xyz zu erfahren“. Auch der gewählte Schreibstil kann einen negativen Effekt auf die Barrierefreiheit haben. Der Schreibstil sollte generell an ein größtmögliches Publikum angepasst werden. Empfehlenswert sind Bulletpoints, die Aussagen prägnant auf den Punkt bringen. Der Content soll einfach geschrieben und in logische Sektionen gegliedert werden. Lange Sätze bzw. Textblöcke, die eine verschachtelte Struktur aufweisen und unbekannte Fremdwörter enthalten, sind zu vermeiden. Falls sich spezialisierte Begriffe nicht vermeiden lassen, können Pop-up-Boxen oder Verlinkungen zur Erklärung eingesetzt werden. Am wichtigsten dabei ist es, die Bedürfnisse der Zielgruppe in den Fokus zu stellen.
  • Bilder- und Videoinhalte: Bilder sind nicht nur dekorative Elemente, sondern können starke Botschaften übermitteln. Aus diesem Grund sollten Bilder immer einen aussagekräftigen Alternativtext besitzen, damit Nutzer von Screen-Readern ebenfalls die relevanten Informationen daraus ziehen können. Ein guter alternativer Text umfasst nicht nur eine Beschreibung, sondern auch eine kurze Erklärung, warum das Bild an dieser Stelle eingesetzt wird. Ziel ist es, Anwendern mit Sehschwäche die gleiche User Experience wie Menschen mit normaler Sehleistung zu ermöglichen. Bei Bildern, die nur zur Dekoration dienen, ist es sinnvoll, ein so genanntes Null-Alt-Attribut zu erzeugen. In diesem Fall wird das Bild von Screen-Readern ignoriert. Bei komplexen visuellen Dateien, zum Beispiel Grafiken oder Diagrammen, ist es ratsam, das abgebildete Element in Textform zu beschreiben. Alternativtext sollte nicht nur bei Bildern, sondern auch bei Videoinhalten eingesetzt werden. Ideal wäre es, wenn Videoinhalte vollständig transkribiert würden. In diesem Fall könnten die Inhalte von Screen-Readern vorgelesen werden. Das ist sicherlich nicht in allen Situationen umsetzbar, doch zumindest eine Beschreibung sollte immer möglich sein.

Technik macht’s möglich – HTML5 als Beispiel

Die neuen Sektionselemente von HTML5 erlauben es, eine Webseite inhaltlich deutlich besser auszuzeichnen, als es mit HTML noch möglich war. Bisher gab es nur das universelle <div>-Tag, um einen Bereich einer Webseite von anderen Bereichen abzugrenzen. Die neuen Elemente sind in Tabelle 1 zusammengefasst.

HTML5-Element Bedeutung Erläuterung
header Kopfbereich Das Element sollte für einführende Elemente wie eine Seitenüberschrift oder den Namen einer Webseite verwendet werden.
section Aufteilung in inhaltliche Abschnitte Das Element kann dazu verwendet werden, den Inhalt eines Dokuments in thematische Abschnitte einzuteilen. Das können zum Beispiel Kapitel oder die Bereiche einer Webseite sein.
article Aufteilung in in sich geschlossene Blöcke Mit diesem Element werden in sich geschlossene Themenblöcke zusammengefasst. Es ist ähnlich zu verwenden wie das section-Element, sollte aber auf einer anderen Aggregationsebene ansetzen, zum Beispiel, um einzelne Newsmeldungen innerhalb einer Section „News“ zu trennen.
aside zusätzliche Informationen Dieses Element wird verwendet, um zusätzliche Informationen auszuzeichnen, zum Beispiel eine Seitenleiste.
footer Fußbereiche Hier werden Angaben zum Fußbereich einer Webseite untergebracht. Typische Inhalte sind das Impressum oder die AGB.
adress Kontaktinformationen adress sollte zum Hinterlegen der Kontaktinformationen verwendet werden.
nav Seitennavigationsleiste Gemäß der Spezifikation sollte das Element nav für die Hauptnavigation der Seite eingesetzt werden. Weitere Links sollten hingegen in aside und Zusatzangaben wie das Impressum in footer ausgelagert werden.

Tabelle 1: Elemente in HTML5 zur semantischen Auszeichnung

Dabei müssen wir beachten, dass die Verwendung der Elemente allein noch nicht zu einer angepassten Darstellung im Browser führt, d. h. man sieht zunächst keine Änderung. Die Zuweisung der Formatierung für den Browser hingegen erfolgt an zentraler Stelle in einem CSS-Dokument. Trotzdem ist die Auszeichnung mit semantischen Sektionselementen sinnvoll, denn Screen-Reader können nun beispielsweise den einzelnen Inhalten einer Webseite eine exakte Bedeutung zuordnen. Mit anderen Worten: HTML wird nunmehr das, wofür es immer schon gedacht war, eine Seitenbeschreibungssprache. Nicht mehr und nicht weniger.

Sehen wir uns die neuen Möglichkeiten an einem konkreten Beispiel an. Listing 1 und Abbildung 2 zeigen eine Webseite, die lediglich das <div/>-Tag verwendet. Über das Attribut id wird das einzelne <div/>-Element zum Beispiel für die CSS-Datei identifizierbar.

<div id="header">
  <h1>Trips for U</h1>
</div>

<div id="navigation">
  <p>
    <a href="#"> Pauschalreisen</a>
    <a href="#"> Last Minute</a>
    <a href="#"> Hotel</a>
    <a href="#"> Flug</a>
    <a href="#"> Top-Angebote</a>
  </p>
</div>

<div id="sidebar">
  <ul>
    <li>
      <a href="#">Urlaubstipps</a>
    </li>
  </ul>
</div>

<div id="content">
  <h2>Die angesagten Urlaubsangebote</h2>
  <P>
    <ul>
      <li>
        <a href="#">Mallorca</a>
      </li>
      <li>
        <a href="#">Fuerteventura</a>
      </li>
      <li>
        <a href="#">Ägypten</a>
      </li>
      <li>
        <a href="#">Griechenland</a>
      </li>
    </ul>
  </P>
</div>

<div id="footer">
  <p>
    <a href="#">Kontakt</a>   
    <a href="#">Impressum</a> 
    <a href="#">FAQ</a>   
  </p>
</div>
Abb. 2: Seitenstruktur mit <div/>-Tags

Abb. 2: Seitenstruktur mit <div/>-Tags

Eindeutig wird es bei Verwendung der neuen HTML5-Tags wie <header/> und <article/>. Quellcode und Inhalt korrespondieren nunmehr direkt miteinander, wie Listing 2 und Abbildung 3 zeigen.

<header>
  <h1>Trips for U</h1>
</header>

<nav>
  <p>
    <a href="#"> Pauschalreisen</a>
    <a href="#"> Last Minute</a>
    <a href="#"> Hotel</a>
    <a href="#"> Flug</a>
    <a href="#"> Top-Angebote</a>
  </p>
</nav>

<aside>
  <ul>
    <li>
      <a href="#">Urlaubstipps</a>
    </li>
  </ul>
</aside>

<article>
  <h2>Die angesagten Urlaubsangebote</h2>
  <P>
    <ul>
      <li>
        <a href="#">Mallorca</a>
      </li>
      <li>
        <a href="#">Fuerteventura</a>
      </li>
      <li>
        <a href="#">Ägypten</a>
      </li>
      <li>
        <a href="#">Griechenland</a>
      </li>
    </ul>
  </P>
</article>

<footer>
  <p>
    <a href="#">Kontakt</a>   
    <a href="#">Impressum</a> 
    <a href="#">FAQ</a>   
  </p>
</footer>
Abb. 3: Seitenstruktur mit semantischen Auszeichnungselementen von HTML5

Abb. 3: Seitenstruktur mit semantischen Auszeichnungselementen von HTML5

Barrierefreiheit überprüfen

Im Netz findet man eine Menge unterstützender Werkzeuge für die Überprüfung der Barrierefreiheit. Oft eingesetzte Werkzeuge sind die Web Accessibility Toolbar für Opera sowie die Web Developer Toolbar für Firefox. Je nach Browser stehen weitere spezielle Erweiterungen und Tools zur Verfügung (Tabelle 2).

BITV- und WCAG-Prüfprogramme
Barrierefinder Der Barrierefinder ist ein schneller, einfacher und vor allem deutschsprachiger Test, mit dem Internetseiten auf einige Kriterien der Barrierefreiheit hin überprüft werden können. Das Testverfahren von www.barrierefinder.de basiert auf Sicht- und Vergleichsbeurteilungen. Es werden verschiedene Bedingungen simuliert und die Internetseite entsprechend angezeigt.
TAW – Web Accessibility Test Überprüft einzelne Seiten nach den W3C-Richtlinien WCAG 1.0. Auch als eigenständige Anwendung für Windows, macOS und diverse Unix-Systeme erhältlich.
WAVE – Web Accessibility Evaluation Tool Sehr empfehlenswertes Prüfwerkzeug, das eventuelle Fehler und Barrieren im Kontext der Seite anzeigt (englischsprachig).
Compliance Sheriff Cynthia Says Prüfprogramm, das Seiten nach den WCAG-1-Richtlinien und dem amerikanischen Accessibility-Standard Section 508 überprüft.
Browsererweiterungen (Firefox)
Web Developer Extension
Web Developer Extension (deutsche Version)
Accessibility Extensions for Mozilla Firefox
FireBug
JAWS-Simulator Fangs
Rendered Source Chart
Colour Contrast Analyser Firefox Extension
WAVE 3.0 Accessibility Tool
Browsererweiterungen (Opera)
Web Developer Toolbar & Menu for Opera
Opera W3-Dev Menu
Browsererweiterungen (Internet Explorer)
Web Accessibility Toolbar (deutsche Version)
WEB for ALLAISToolbar
Internet Explorer Developer Toolbar
WAVE 3.0 Accessibility Tool
Browsererweiterungen (Safari)
Safari Tidy Plug-in
WebDevAdditions 1.0b18
Drosera
Web Inspector
SafariStand
Eigenständige Anwendungen und Onlinetools
Photosensitive Epilepsy Analysis Tool (PEAT)
Web Accessibility Inspector
Java Accessibility Helper Early Access
Validome

Tabelle 2: Werkzeuge zur Überprüfung der Barrierefreiheit

Keines dieser Werkzeuge kann jedoch ein hundertprozentiges Ergebnis liefern. Gefragt sind vielmehr Praxistests mit betroffenen Nutzern und qualifizierte Prüfer, die sich mit den aktuellen WCAG und der BITV auskennen. Ist die betreffende Seite barrierefrei? Der BITV-Test ermöglicht es, nicht nur den Status zu überprüfen und eine gute Zugänglichkeit zu attestieren, sondern auch bestehende Mängel zu identifizieren und zu korrigieren. Den BITV-Test gibt es seit dem Jahr 2004. Im März 2019 wurde er erneut überarbeitet und an die WCAG 2.1 sowie an die europäische Norm EN 301 549 und die Änderungen in der BITV angepasst. Der BITV-Test besteht aus 60 Prüfschritten. Als Ergebnis bekommt man einen ausführlichen Testbericht. Sind die geprüften Seiten BITV-konform, wird das BIK-Prüfsiegel für Barrierefreiheit im Internet vergeben. Der Webauftritt wird dann in die Liste barrierefreier Websites aufgenommen. Die Durchführung erfolgt durch zwei Experten des Prüfverbundes in einem sogenannten Tandem-Test. Weitere Informationen zum Ablauf und zu den Kosten dieses Prüfverfahrens findet man auf den Webseiten der Onlinepräsenz des deutschen BITV-Tests.

Akteure und Unternehmen, die nicht der BITV unterliegen, da sie international tätig sind, haben sich eher am WCAG-Test zu orientieren. Beide Tests enthalten jedoch dieselben Prüfschritte, die Vorgehensweise ist ähnlich. Unterschiede bestehen bei der Auswertung der Testergebnisse. Beim BITV-Test arbeitet man mit abgestuften Bewertungen (erfüllt, eher erfüllt, teilweise erfüllt, eher nicht erfüllt und nicht erfüllt) und es wird ein Punkteergebnis berechnet. Beim WCAG-Test gibt es im Ergebnis nur noch die Unterscheidung zwischen erfüllt oder nicht erfüllt. Eine getestete Seite ist dann konform, wenn alle Erfolgskriterien erfüllt sind. Die Konformität nach WCAG kann dabei nur für einzelne Seiten definiert werden. BITV/WCAG-Selbstbewertung ist ein webbasiertes kostenloses Prüftool, um Webseiten auf Barrierefreiheit hin zu überprüfen. Anhand eines Fragebogens mit 60 Schritten kann die Barrierefreiheit eingeschätzt werden. Der Fragebogen stützt sich auf das Verfahren des BITV-Tests. Die Zuverlässigkeit der Ergebnisse ist davon abhängig, wie gut man sich vorab mit den Prüfschritten des BITV-Tests vertraut macht.

Easy Checks ist ein weiteres Tool, das von der W3C entwickelt wurde. Die Tests sind bewusst auf das Nötigste reduziert und einfach gehalten. Easy Checks können mit jedem Browser durchgeführt werden. Sie decken daher nur die Prüfung essenzieller Anforderungen ab. Überprüft werden: Dokumenttitel, Alternativtexte für die Grafiken, Überschriften, Kontraste, Skalierbarkeit, Tastaturbedienbarkeit und Tastaturfokus, Formulare, bewegte Inhalte, Videos mit Untertitelung und Lesereihenfolge. Auch wenn diese ersten Tests erfolgreich sind, können weitere Barrieren bestehen. Für eine weitere Überprüfung sind Expertentests oder umfassendere Selbstbewertungen ratsam.

Automatisierte Tests für die Überprüfung der Barrierefreiheit gibt es entweder als Freeware oder als kostenpflichtige Versionen. Die sind schnell, können jedoch nicht alle Anforderungen der Barrierefreiheit, wie sie in der BITV bzw. in den WCAG definiert sind, testen und bewerten. Sinnvoll ist der Einsatz von automatischen Tests zusätzlich zu der Prüfung durch Experten.

Software zur Überwindung von Barrieren

Software selbst kann nicht nur barrierefrei sein, sondern auch umfassende Unterstützung im Alltag leisten. Auf den Seiten des auf Barrierefreiheit spezialisierten Unternehmens Marlem-Software findet sich zum Beispiel ein Sprechassistent, der die Kommunikation bei Sprachbehinderungen erleichtert (Abb. 4). Die Web-App kann auf einem iPad ausgeführt werden. Sie ermöglicht Menschen z. B. nach einem Schlaganfall oder bei spasmischen Lähmungen das Sprechen.

Fazit

Barrierefreiheit sollte heute nicht mehr nice to have sein, sondern zu einem Standard werden. Zu einem guten Design und zu einer ausgereiften Usability sollte selbstverständlich auch der Umstand gehören, alle Nutzergruppen anzusprechen bzw. ihnen eine Bedienung der Software zu ermöglichen. Leider ist das noch nicht überall der Fall. Viel zu oft wird erst die Applikation bzw. die Software erstellt und erst im letzten Schritt geschaut, wie man noch „etwas Barrierefreiheit“ hinbekommt. Das Ignorieren dieses Themas kann zu echten Problemen führen, wie ein Blick in die USA zeigt (Textkasten: „Barrierefreiheit wird einklagbar“).

Barrierefreiheit wird einklagbar

Der Oberste Gerichtshof der USA hat Anfang Oktober die Möglichkeit für blinde Menschen verbessert, Einzelhändler zu verklagen, wenn ihre Webseiten für sie nicht zugänglich sind. Geklagt hatte der blinde Guillermo Robles in Los Angeles bereits vor drei Jahren, weil er bei einem Pizzaservice online keine Pizza bestellen konnte. Die Seite war für ihn nicht zugänglich. Seine Klage beruft sich auf die ADA Standards for Accessible Design, die seit 2010 in den USA gelten. Ein Regionalgericht hatte zugunsten des Klägers geurteilt. Die Branche ist erwartungsgemäß in Berufung gegangen, um eine Klagewelle abzuwenden. Der angerufene Supreme Court hat Anfang Oktober 2019 entschieden, die Klage nicht anzunehmen, sondern diese an ein Bezirksgericht in Los Angeles zurückverwiesen. Zunächst bleibt das ursprüngliche Urteil bestehen und die Sache ist noch nicht abschließend geklärt. Es zeigt jedoch, welche Relevanz das Thema Barrierefreiheit heute entfaltet.

In der digitalen Welt besteht in Sachen Barrierefreiheit, Inklusion und Accessibility dringender Nachbesserungsbedarf. Design und Entwurf sollten die Anforderungen an Barrierefreiheit bereits in der Planung berücksichtigen. Die neuen HTML5-Elemente konsequent einzusetzen ist ein Beispiel für eine angemessene technische Berücksichtigung.

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. Außerdem ist der Windows Developer weiterhin als Print-Magazin im Abonnement erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -