Einführung in die Entwicklung barrierefreier Software, Teil 2

Gerfried Steube on February 14, 2017 - 11:00 am in Software-Entwicklung

[ad_1]

Ist ein Verständnis für die grundsätzliche Bedeutung der Barrierefreiheit einmal geschaffen, mag die exemplarische Betrachtung einiger Aspekte das vorher verinnerlichte Grundwissen vertiefen. Damit nicht genug, gilt es nun, die Rolle der Barrierefreiheit im Entwicklungsprozess zu verankern.

Software barrierefrei zu implementieren bedeutet nicht nur, sie für körperlich behinderte Nutzer bedienbar zu machen. Von ihnen genutzte Hilfsmittel wie Braillezeilen zur Steuerung des Computers beziehungsweise zur alternativen Ausgabe von Inhalten sind lediglich ein Aspekt, der bei der Planung und der Implementierung der Software zu beachten ist. Die Erörterung in einem früheren Artikel hat aufgezeigt, dass auch weitere Nutzergruppen wie Senioren oder Personen mit einer anderen Muttersprache von barrierefreier Software profitieren. Im Alltag ist eigentlich jeder schon einmal an eine Barriere bei der Programmnutzung gestoßen.

Die Sache mit den Standards

Dabei ist es oft weniger schwer, eine Anwendung barrierefrei zu gestalten, als oft angesichts der vielen verschiedenen Bedürfnisse angenommen. Eine gute Voraussetzung ist es, wenn sich Entwickler bei der technischen Realisierung an gängige Standards halten. Den Unterschied soll ein kleines Beispiel veranschaulichen.

Darstellung mit einer unstrukturierten Definition mit div-Containern

Darstellung mit einer strukturierten Definition unter Nutzung der passenden HTML-Elemente

Optisch wird mit beiden Implementierungen das gleiche Ergebnis erreicht, allerdings ist die erste Variante nicht barrierefrei, da sie HTML-Elemente nicht entsprechend dem Standard verwendet. Statt strukturierender Tags für Überschriften, Kopf- und Fußzeile kommen hier einfache div-Container zum Einsatz.

Ausschnitt der Definition der unstrukturierten Variante:

<div id="header">
 <div id="header-title">Werbekrake GmbH</div>
</div>

<div id="main">
 <div id="tabs">
 <div id="nav">
 <ul>
 <li class="ui-tabs-active">
 <a href="#tab-info">Information</a></li>
 <li><a href="#tab-register">Registration</a></li>
 </ul>
 </div>
 <div id="tab-info">
 <div id="tab-title">Ihre Vorteile im Überblick</div>
 <p>Mit einer Registrierung bei uns profitieren Sie von allen
 Vorteilen.</p>
 <div id="article-list>
<div id="article">
 <p>Sie erhalten täglich bis zu 10 kostenfreie Mails mit
 Informationen zu unseren Produkten.</p>
 <a href="#">Mehr erfahren</a>
 </div>
 <div id="article">
 <p>Unsere Mitarbeiter in der Firmenzentrale pflegen den
 persönlichen Kontakt durch regelmäßige Anrufe.</p>
 <a href="#">Mehr erfahren</a>
 </div>
 <div id="article">
 <p>Durch die Weitergabe Ihrer Daten zu unseren Partnern wird
 Ihnen ein noch breiteres Produktangebot ermöglicht.</p>
 <a href="#">Mehr erfahren</a>
 </div>
 </div>

 </div> 
</div>

Ausschnitt der Definition der strukturierten Variante:

<header>
 <h1>Werbekrake GmbH</h1>
</header>

<main>
<div id="tabs">
 <nav>
 <ul>
 <li><a href="#tab-info">Information</a></li>
 <li><a href="#tab-register">Registration</a></li>
 </ul>
 </nav>

 <div id="tab-info">
 <h2>Ihre Vorteile im Überblick</h2>
 <p>Mit einer Registrierung bei uns profitieren Sie von allen
 Vorteilen.</p>
 <section id="info-list">
 <article>
 <p>Sie erhalten täglich bis zu 10 kostenfreie Mails mit
 Informationen zu unseren Produkten.</p>
 <a href="#">Mehr erfahren</a>
 </article>
 <article>
 <p>Unsere Mitarbeiter in der Firmenzentrale pflegen den
 persönlichen Kontakt durch regelmäßige Anrufe.</p>
 <a href="#">Mehr erfahren</a>
 </article>
 <article>
 <p>Durch die Weitergabe Ihrer Daten zu unseren Partnern wird
 Ihnen ein noch breiteres Produktangebot ermöglicht.</p>
 <a href="#">Mehr erfahren</a>
 </article>
 </section>

 </div>
 </div> 
</main>

Das hat zur Folge, dass insbesondere für Screenreader und Bots wichtige Strukturinformationen verloren gehen, die für die Navigation und Orientierung beziehungsweise die Bewertung der Inhalte einer Suchmaschine wichtig sind. Vergleicht man die Aufbereitung, wie sie JAWS, ein verbreiteten Screenreader, umsetzt, wird der Unterschied schnell deutlich.

Ausgabe der unstrukturierten Variante mit dem Screenreader JAWS im Browser

Ausgabe der strukturierten Variante mit dem Screenreader JAWS im Browser

Auffällig ist, dass die strukturierte Version die einzelnen Bereiche des Dokuments ebenfalls wiedergibt – für die Orientierung auf einer Seite eine wichtige Unterstützung.

Schemenhafte Aufteilung des Beispiels in Bereiche mit den Bezeichnungen, wie sie von JAWS wiedergegeben werden

Besser getrennt als vereint

Wer meint, dass eine derartige Strukturierung eine Selbstverständlichkeit ist, irrt leider. Vor allem wenn Template- oder GUI-Designer zum Einsatz kommen, lassen die Ergebnisse diesbezüglich oft zu wünschen übrig und man kommt um eine händische Nachbearbeitung nicht herum. In diesem Fall kann der ARIA-Standard (Accessible Rich Internet Applications) helfen, die verloren gegangene Struktur wiederherzustellen. ARIA ist Teil des HTML5-Standards und definiert Rollen, Eigenschaften und Zustände der Elemente im DOM.

Schwierig wird es auch, wenn sich zusätzlich fest definierte Formatierungsanweisungen zwischen die Strukturierungselemente mischen. Eine Anpassung an individuelle Bedürfnisse ist dann nur noch schwer möglich. Glücklicherweise gilt die Trennung von Struktur und Layout unabhängig von der
Barrierefreiheit schon lange als Qualitätsmerkmal für Softwarearchitekturen. Nur auf diese Weise lassen sich einfach responsive Dialoge für unterschiedliche Endgeräte umsetzen oder die systemweiten Einstellungen eines Betriebssystems integrieren. Ändert sich hier beispielsweise die Schriftart, sollen sie auch alle Anwendungen nutzen.

[ad_2]