Entwickeln barrierefreier Webanwendungen

Barrierefreiheit im Internet

Viele Anwendungen im Internet weisen Barrieren auf und schränken dadurch ihre Nutzer ein. Dies kann sich bereits durch Fehler in der mobilen Ansicht einer Webseite bemerkbar machen. Kritischer wird es jedoch, wenn aufgrund von Barrieren ganze Nutzergruppen von dem Zugang zu einer Anwendung ausgeschlossen werden. Besonders Menschen mit Behinderungen sind hiervon betroffen, da es ihnen oftmals nicht möglich ist, bestimmte Barrieren zu überwinden.

Die „Web Accessibility Initiative“ (WAI) des „World Wide Web Consortium“ (W3C) entwickelte mit den „Web Content Accessibility Guidelines“ (WCAG) einen internationalen Standard zur barrierefreien Gestaltung des Internetangebots. Um die Inklusion auch national voranzutreiben, wurde dieser Standard zusätzlich in der deutschen „Barrierefreie Informationstechnik Verordnung“ (BITV) verankert. Es ist somit deutlich erkennbar, dass Barrierefreiheit einen immer höheren Stellenwert erreicht.

Vorgehensweise beim Entwickeln

Trotz des hohen Stellenwerts der Barrierefreiheit kann es legitim sein, sich gegen Barrierefreiheit zu entscheiden. Dies kann der Fall sein, sofern man nicht den öffentlichen Vorgaben unterliegt und Einschränkungen der Nutzer ausschließen kann. Die Entscheidung eine Software barrierefrei zu entwickeln, sollte somit bewusst getroffen werden. Dies ist besonders wichtig, da zu Beginn definiert werden muss, welche Aspekte der Barrierefreiheit angegangen werden sollen. Diese können je nach Zielgruppen unterschiedlich sein wie zum Beispiel:

• Farben
• Kontraste
• Textgrößen
• Sprachausgabe
• Struktur für Webcrawler
• …

Das Angehen ausgewählter Aspekte sollte anhand einer Prioritätsliste erfolgen. So gibt es beispielsweise einzelne Barrieren, die eine Anwendung gänzlich unnutzbar machen, andere hingegen beeinträchtigen nur den Komfort. Zudem empfiehlt sich im Allgemeinen für die barrierefreie Entwicklung auf UI-Frameworks oder auch A11Y (Accessibility) Linter zurückzugreifen. Mit diesen können Fehler bezüglich Barrierefreiheit bereits zu Beginn der Entwicklung vermieden oder entdeckt werden. Ebenso ist es wichtig eine Auswahl von Werkzeugen festzulegen. Diese sollten sowohl bei den zukünftigen Testern sowie den Endanwendern verbreitet sein um realistische Ergebnisse zu erhalten.

Vorgehensweise beim Testen

Um die Einhaltung der Richtlinien für Barrierefreiheit zu prüfen, empfiehlt sich toolgestütztes Testen zu betreiben. Das W3C bietet hierzu eine große Liste an Software . Durch das Auditieren der Anwendung mit diesen Tools kann anhand der daraus generierten Berichten ermittelt werden, welche Richtlinie nicht eingehalten wurde. Ebenso kann anhand der dortigen Empfehlungen erkannt werden, welche Änderungen erforderlich sind, um den Standard zu erfüllen.

Neben dem toolgestützten Testen ist auch das Testen durch Nutzer ein sehr wichtiger Aspekt. Erst dabei zeigt sich, ob die Software von einer Person mit Einschränkungen wirklich genutzt werden kann. Im besten Fall wird die Anwendung von Nutzern getestet, die auf die Barrierefreiheit angewiesen sind, um so ein realistisches Feedback zu erhalten. Alternativ kann auch mit nicht eingeschränkten Nutzern getestet werden, indem Barrieren simuliert werden. Dies kann Beispielsweise erreicht werden durch sehr hohe Lichteinstrahlung, stark vergrößerte Texte oder durch geschlossene Augen und einem Screenreader (digitale Sprachausgabe). Bei einer solchen Simulation ist jedoch wichtig, dass die Funktionsweise und Handhabung der entsprechenden Unterstützungssoftware den Testern bekannt ist. So ist etwa bei Nutzern von Screenreadern häufig verbreitet, mit der Taste „D“ zwischen bestimmten Bereichen in der der Anwendung zu springen. Ein Beispiel hierzu wird im nachfolgenden Absatz veranschaulicht.

Beispiel: Aufbau eines Grundgerüsts

Nachfolgend ist ein stark vereinfachtes Beispiel abgebildet. Dort ist die Grundstruktur einer Webseite veranschaulicht. Diese beinhaltet ein Navigationsmenü, eine Titelleiste, ein Hauptinhaltsbereich und eine Fußleiste.

Der zugrundeliegende Aufbau ist mit HTML abstrakt dargestellt. Dieser Aufbau entspricht nicht den Richtlinien für Barrierefreiheit. Blinde Menschen, die auf Screenreader angewiesen sind und diese Webseite aufrufen, werden starke Probleme in der Orientierung und Navigation haben, da wesentliche Informationen fehlen.

<body data-rsssl=1>
    <div>Startseite</div>
    <div>
        <div>Landmarken Beispiel</div>
        <div>
            <div>Willkommen</div>
        </div>
        <div>Copyright</div>
    </div>
</body>

Eine bessere und barrierefreie Lösung hierfür ist die Nutzung von Ankerpunkten (sogenannte Sprungmarken oder Landmarken). Diese sind nachfolgend durch die semantischen HTML Elemente „nav“, „header“, „main“, „article“ und „footer“ dargestellt. Diese Elemente verändern die Struktur der Seite nicht, bieten jedoch mehr Informationen für Screenreader.

<body data-rsssl=1>
    <nav>Startseite</nav>
    <div>
        <header>Landmarken Beispiel</header>
        <main>
            <article>Willkommen</article>
        </main>
        <footer>Copyright</footer>
    </div>
</body>

Mit der Taste „D“ ist es den Nutzern nun möglich den Fokus auf Landmarken zu setzen und zwischen diesen zu springen. Von einer Landmarke aus sind dann weitere Navigationsschritte möglich wie bei der „Navigation“ die Auswahl eines Menüeintrags. Die Sprachausgabe des Screenreaders ergäbe somit je Sprung die folgende Information:

1. „Navigation Sprungmarke – Startseite“
2. „Banner Sprungmarke – Landmarken Beispiel“
3. „Haupt Sprungmarke – Willkommen“
4. „Inhaltsangabe Sprungmarke – Copyright“

Anhand dieser Änderungen ist der erste Schritt in Richtung Barrierefreiheit gemacht. Blinde Nutzer können nun schnell einen Überblick über die Seitenstruktur erhalten und deutlich schneller zu gewünschten Bereichen navigieren. Um die volle Unterstützung für Screenreader zu bieten, gibt es noch viele weitere Punkte, die es zu berücksichtigen gilt wie Beispielsweise „ARIA-Attribute“ oder auch „Live Regions“.

Fazit

Viele Angebote im Internet sind nicht barrierefrei. Dadurch werden ganze Anwendergruppen von deren Nutzung ausgeschlossen. Durch internationale Standards und gesetzlichen Verankerungen soll dem entgegengewirkt werden. Zu Beginn der Entwicklung einer Software sollte geplant werden, wie und in welchem Umfang das Thema Barrierefreiheit angegangen wird. Für die Entwicklung und das Testen der Anwendung kann auf Frameworks und Tools zurückgegriffen werden. Diese nehmen einen Großteil der Arbeit ab, wodurch sehr schnell viele Barrieren aufgelöst werden können.