Erstellen von HTML5-Anwendungen

Entwerfen von Eingabehilfen mit HTML5

Rajesh Lal

Wenn Sie wirklich eine breite Zielgruppe ansprechen möchten, empfiehlt es sich, Eingabehilfen für Ihre Website zu entwerfen. Eingabehilfen erleichtern den Zugriff auf Webseiten, gestalten sie benutzerfreundlicher und machen sie für jeden verfügbar. Im Allgemeinen lassen sich Eingabehilfen mithilfe modernster Technologien einfacher gestalten. Heutzutage kann dies mit HTML5 erfolgen.

Damit Zugriff auf Inhalt möglich ist, muss dieser auf einer breiten Palette von Geräten verfügbar sein, beispielsweise auf herkömmlichen Computern über eine Tastatur oder Maus, über Bildschirmsprachausgaben, Audiobrowser, Geräte mit begrenzter Bandbreite, alte Browser und Computer sowie über Mobiltelefone und Geräte mit Fingereingabe. Außerdem sollte er für eine möglichst breite Vielfalt von Personen erreichbar sein, auch für Benutzer mit Behinderungen und ältere Bürger sowie für Menschen mit Leseschwächen oder vorübergehenden Krankheiten oder solche, die nur mit einer Tastatur oder Maus arbeiten möchten.

Eingabehilfen für Personen mit Behinderungen sind für die folgenden vier Hauptbereiche gedacht:

• Hörvermögen
• Mobilität
• Kognitive Fähigkeiten
• Sehfähigkeit

Probleme mit dem Hörvermögen bedeuten, dass ein Benutzer beispielsweise nicht in der Lage ist, Ton auf der Website zu hören. Die Lösung sieht so aus, dass der Inhalt mittels einer Textalternative für sämtlichen Inhalt, der keinen Text umfasst, wahrnehmbar gemacht wird, beispielsweise in Form von Untertiteln. Fügen Sie nach Möglichkeit transkribierte Sprache und Zeichensprachen ein.

Probleme mit der Mobilität bedeuten in diesem Fall die Unfähigkeit, die Maus oder die Tastatur zu verwenden. Die Lösung für Mobilität im Web besteht darin, den Inhalt bedienbar zu machen. Ermöglichen Sie also den Zugriff auf Funktionen nur über die Tastatur sowie per Joystick, Spracherkennung und auditiver Rückmeldung, soweit dies machbar ist. Gestatten Sie eine Navigation mit ordnungsgemäßer Verwendung von Überschriften und Verankerungen, und bieten Sie den Benutzern die Möglichkeit, zeitbasierten Inhalt anzuhalten. Deaktivieren Sie alle automatischen Aktualisierungen auf der Seite.

Kognitive Schwierigkeiten betreffen den Inhalt an sich, beispielsweise im Hinblick auf die Größe von Text und Bildern oder den Farbkontrast. Einigen Benutzern bereiten auch auffällige Grafiken und Schriftarten Probleme. Die Lösung besteht in diesem Fall darin, den Inhalt verständlich zu gestalten. Verwenden Sie einfach lesbare Schriften ohne Serifen, und ermöglichen Sie eine Größenänderung der Schriften. Setzen Sie zwischen dem Vordergrund und dem Hintergrund einen hohen Farbkontrast ein. Vermeiden Sie flimmernde Bilder, die sich automatisch aktualisieren, sowie die automatische Wiedergabe von Medien und Animationen. Verwenden Sie mehrere optische Hinweise und Standardsymbole, damit der Inhalt einfach zu erfassen ist.

Probleme mit der Sehfähigkeit können von der Unfähigkeit zur Unterscheidung von Farben bis hin zur vollständigen Unfähigkeit, den Inhalt zu sehen, reichen. Die Lösung für derartige Probleme sieht so aus, dass der Inhalt stabil gestaltet werden muss, damit er von den Benutzer-Agents zuverlässig interpretiert werden kann und problemloser Zugriff darauf über Bildschirmsprachausgaben möglich ist. Verwenden Sie semantisches HTML, und halten Sie Standards ein. Verwenden Sie syntaktisch korrektes HTML, und überprüfen Sie die Seite. Setzen Sie wo immer möglich das Attribut „lang“ und abbr-Tags ein.

Kurz gesagt muss Inhalt für das Web wahrnehmbar, bedienbar, verständlich und stabil gestaltet werden, damit ein Zugriff darauf möglich ist. Aus all diesen Attributen setzt sich das POUR-Modell des World Wide Web Consortium (W3C) zusammen. Dieses schreibt Folgendes vor: Benutzer müssen die dargestellten Informationen und Benutzeroberflächenelemente mit ihren Sinnen wahrnehmen können. Sie müssen eine Möglichkeit haben, die Benutzeroberfläche zu bedienen. Sie müssen in der Lage sein, die Informationen sowie die Verwendung der Oberflächenelemente zu verstehen. Der Inhalt muss so stabil sein, dass ein Zugriff darauf über eine Vielzahl von Benutzer-Agents möglich ist, darunter Hilfstechnologien (Assistive Technologies, ATs).

Nachdem Sie nun die Grundlagen von Eingabehilfen verstanden haben, wollen wir uns einmal zwei sehr wichtige Konzepte näher ansehen, die das Design von Eingabehilfen für das Web betreffen: progressive Verbesserung und ARIA (Accessible Rich Internet Applications).

Progressive Verbesserungen und ARIA

Progressive Verbesserung ist ein Ansatz beim Webdesign, der Eingabehilfen mittels semantischem HTML, Stylesheets und Skripting fördert. Es geht dabei darum, eine Website zu erstellen, deren Basisinhalt allen Benutzern zur Verfügung steht, während erweiterte Inhalte und Funktionen nur für Benutzer zugänglich sind, die über mehr Fähigkeiten, mehr Bandbreite oder leistungsstärkere Tools verfügen. Konzentrieren Sie sich bei der Erstellung einer Site zunächst darauf, den Inhalt auf möglichst einfache Weise anzuzeigen. Entwerfen Sie die Seite mithilfe von semantisch strukturiertem HTML. Alle Darstellungselemente, die den sichtbaren Inhalt verändern (beispielsweise Fett- oder Kursivformatierung), müssen in ein externes Stylesheet aufgenommen werden.

Semantisches HTML bedeutet, dass die HTML-Tags auf einer Seite den Inhalt so beschreiben, dass es seiner Bedeutung statt seiner Darstellung entspricht. Sämtliche Informationen zur Ausgestaltung des Inhalts sind in einer CSS-Datei enthalten. Die Logik und das clientseitige Verhalten der Webseite werden hingegen nach dem Laden der Seite und dem Analysieren und Anwenden des Stylesheets über extern verknüpftes JavaScript hinzugefügt. Progressive Verbesserung gewährleistet, dass eine Seite selbst bei einem Fehler in der JavaScript-Datei mit den richtigen Formaten geladen wird. Und wenn die CSS-File ignoriert wird (beispielsweise von Bildschirmsprachausgabesystemen), enthält die HTML-Seite trotzdem noch den gesamten Inhalt. 

Alle modernen Betriebssysteme verfügen über eigene Eingabehilfen-APIs. Sie alle bestehen aus einem Satz offener Methoden und Schnittstellen, die vom Browser zum Lesen und Analysieren von Text zur Verfügung gestellt werden. Bei der Microsoft-Version handelt es sich um Microsoft Active Accessibility (MSAA), einem Bestandteil der Benutzeroberflächenautomatisierung (UIA) für Windows. Linux bietet IAccessible2, und Apple setzt auf das Mac OS X Accessibility-Protokoll – sie alle folgen jedoch dem vom W3C (bit.ly/OlD4lX) festgelegten ARIA-Standard. In Abbildung 1 ist dargestellt, wie ein Benutzer mithilfe eines Geräts mit Hilfstechnologie wie einer Bildschirmsprachausgabe mit einer zugänglichen Webseite interagieren kann. Diese Geräte greifen mittels Eingabehilfen-APIs auf Webseiten zu.

Abbildung 1: Benutzerzugriff auf eine Webseite mittels Hilfstechnologie

ARIA wurde im Rahmen der Web Accessibility Initiative (WAI) des W3C entwickelt. Der Standard legt fest, wie Webinhalt und Webanwendungen besser zugänglich gemacht werden können. Mithilfe von ARIA werden Eingabehilfen für dynamischen Inhalt und erweiterte Benutzeroberflächen-Steuerelemente verbessert, die mit HTML, CSS, JavaScript, AJAX und zugehörigen Technologien entwickelt wurden. Mittlerweile ist ARIA ein offizieller Bestandteil der HTML5-Spezifikation und auch in gängige JavaScript-Bibliotheken wie JQuery, Dojo und YUI eingebettet. Weitere Informationen finden Sie unter bit.ly/b89BEJ.

ARIA verwendet einen Satz an Rollen, Status und Eigenschaften, um eine Webseite für die Eingabehilfen-APIs verfügbar zu machen. Diese Rollen, Status und Eigenschaften werden den Elementen auf einer Seite zugeordnet, die für die Hilfstechnologien verfügbar gemacht werden. Die meisten Hilfstechnologietools – darunter JAWS, NVDA und VoiceOver – unterstützen heutzutage ARIA. Im Folgenden wird ARIA näher betrachtet.

ARIA-Rollen

Rollen geben den Elementtyp auf sinnvolle Weise an. Nehmen wir einmal an, eine Bildschirmsprachausgabe findet ein HTML-Element auf einer Seite, die role=navigation einschließt. Die Bildschirmsprachausgabe erkennt dann, dass dieses HTML-Element zu Navigationszwecken gedacht ist, und der Benutzer kann direkt auf die Navigation zugreifen, anstatt alle Links über die Tabstopptaste durchgehen zu müssen.

ARIA-Rollenattribute werden wie folgt auf HTML-Elemente angewendet:

<div role="XXX"> </div>

„XXX“ ist hier ein Wert, der vom Typ des HTML-Elements und dessen Rolle auf der Seite abhängt. Er kann abhängig von dem Inhalt, den er darstellt, eine Reihe von Werten annehmen – beispielsweise ein Formular, eine Navigation, eine Suche oder ein Artikel. Es gibt drei Arten von Rollen:

• Landmarkrollen fungieren als Landmarks zu Navigationszwecken.
• Strukturelle Rollen definieren die Dokumentstruktur und erleichtern die Anordnung von Inhalt.
• Widgetrollen bestehen aus eigenständigen Benutzeroberflächenwidgets sowie aus zusammengesetzten Widgets, die Container mit mindestens zwei eigenständigen Widgets sind.

In Abbildung 2 sind alle in ARIA verfügbaren Rollenwerte dargestellt. ARIA beinhaltet acht Landmarkrollen, 18 strukturelle Rollen, 25 eigenständige Benutzeroberflächen-Widgetrollen sowie neun zusammengesetzte Benutzeroberflächen-Widgetrollen. Weitere Informationen finden Sie unter bit.ly/S0HUvi.

Abbildung 2: ARIA-Rollenwerte

Landmarkrollen	Strukturelle Rollen		Widgetrollen
			Eigenständige Widgets		Zusammengesetzte Widgets
application	article	region	alert	progressbar	combobox
banner	columnheader	row	alertdialog	radio	grid
complementary	definition	rowheader	button	scrollbar	listbox
contentinfo	directory	separator	checkbox	slider	menu
form	document	toolbar	dialog	spinbutton	menubar
main	group		gridcell	status	radiogroup
navigation	heading		link	tab	tablist
search	img		log	tabpanel	tree
	list		marquee	textbox	treegrid
	listitem		menuitem	timer
	math		menuitemcheckbox	tooltip
	note		menuitemradio	treeitem
	presentation		option

Im Gegensatz zu Rollen sind Status und Eigenschaften von ARIA Attribute, die für jedes HTML-Element festgelegt werden können.

ARIA-Status

Ein ARIA-Status ist eine dynamische Eigenschaft eines HTML-Elements, die die mit dem Objekt verknüpften Daten darstellt, die wesentliche Natur des Elements jedoch nicht beeinflusst. Es gibt zwei Arten von ARIA-Status – global und Widget (siehe Abbildung 3). Globale Status können auf jedes beliebige Element unabhängig davon angewendet werden, ob auf das Element eine Rolle angewendet wurde. Widgetstatus sind Attribute von Benutzeroberflächenwidgets, die eine Interaktion seitens des Benutzers erfordern.

Hier das Attribut „aria-hidden“:

<div aria-hidden="true">
  <p>Paragraph text here </p>
</div>

Mit diesem Code wird der entsprechende Absatz bei der Bildschirmsprachausgabe nicht berücksichtigt.

ARIA-Eigenschaften

ARIA-Eigenschaften sind ARIA-Status ähnlich. Auf der Seite sind sie jedoch verhältnismäßig statisch und fungieren als zusätzliche Eigenschaften des HTML-Elements. Widgeteigenschaften entsprechen den Widgetstatus, ihr Wert ändert sich jedoch innerhalb des Seitenbereichs nicht. Es gibt 11 globale Eigenschaften und 14 Widgeteigenschaften (siehe Abbildung 3).

Abbildung 3: Status und Eigenschaften von ARIA

Attributtyp	Global	Widget
ARIA-Status	aria-busy aria-disabled aria-grabbed aria-hidden aria-invalid	listitem math note presentation region row rowheader separator toolbar
ARIA-Eigenschaften	aria-atomic aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labelledby aria-live aria-owns aria-relevant	aria-autocomplete aria-haspopup aria-label aria-level aria-multiline aria-multiselectable aria-orientation aria-readonly aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext

Beispiel der Widgeteigenschaft „aria-required“:

<label for="username">User name:</label>
<input id="username" type="text" aria-required="true">

Hier ist ein Formulareingabefeld erforderlich.

In Abbildung 3 sehen Sie eine Übersicht über alle Status und Eigenschaften von ARIA. Weitere Informationen finden Sie unter bit.ly/OlbLeh.

Nachdem Sie nun einigermaßen mit ARIA und seinen Rollen, Status und Eigenschaften vertraut sind, können Sie damit eine progressiv verbesserte zugängliche Website erstellen.

Erstellen einer zugänglichen Website

Eine typische Website enthält eine Reihe von Komponenten. Sehen wir uns nun einmal an, wie Folgendes unter Berücksichtigung von Eingabehilfen und mittels HTML5 und ARIA erstellt wird:

1. Startseite
2. Kopfzeilenbereich mit Logo
   • Navigationsmenü
   • Hauptgrafik
   • Hauptinhalt
   • Informationsblöcke
   • Kontaktformular
3. FAQ-Seite
4. Infoseite mit Video

Abbildung 4 illustriert die grundlegende Struktur der von mir erstellten Site.

Abbildung 4: Sitemap für Beispielwebsite

In Abbildung 5 ist ein typisches Startseitenlayout für eine produkt- oder dienstbasierte Site dargestellt. Zur Erstellung verwende ich zunächst HTML5 mit progressiver Verbesserung und mache sie dann für Geräte mit Hilfstechnologie zugänglich.

Abbildung 5: Standardlayout für eine Startseite

Ich habe eine Reihe von Elementen auf der Seite festgelegt: Kopfzeile, Navigation, Aktionsaufruf, Hauptgrafik, Willkommensnachricht mit kurzem Inhalt, Informationsblöcke und Fußzeile

Gemäß den Grundsätzen der progressiven Verbesserung erstelle ich eine sequenzielle HTML5-Seite, die diese Elemente berücksichtigt. Dazu verwende ich die Elemente <header>, <nav>, <figure>, <article>, <section>, <aside> und <footer> (siehe Abbildung 6).

Abbildung 6: HTML5-Startseite

<!doctype html>
<html lang="en">
<head><title>HTML5 Home Page</title></head>
<body>
  <header><!-- header -->
  <a href="/"><img src="images/logo.png"></a>
  </header>
<nav><!-- navigation -->
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
  <li><a href="/faq">FAQ</a></li>
  <li><a href="/about">About</a></li>
</ul>
</nav>
<div><!-- main content -->
<section>
  <figure><img src="images/maingraphics.png">
  <figcaption>Welcome image. More help on image<a href="#/">Help</a></figcaption>
  </figure>
</section>
<section>
  <h2><a href="Action" target="_blank">Subscribe</a></h2>
  <article>
  <h2>Welcome!</h2>
  <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
  </article>
</section>
</div>
<aside><!-- info blocks -->
  <h4>Promotion</h4><ul><li>items</li></ul>
  <h4>Awards</h4><ul><li>items</li></ul>
  <h4>News</h4><ul><li>items</li></ul>
</aside>
<footer><!-- footer -->
  <div>Copyright © 2012</div>
  <div><a href="">Privacy Policy</div>
</footer>
</body>
</html>

Dieser Code wird in den meisten derzeit gebräuchlichen Browsern unterstützt. Alle nicht unterstützten HTML5-Elemente werden standardmäßig als <div>-Element festgelegt. Wenn beispielsweise das Element <header> nicht unterstützt wird, verwendet der Browser stattdessen ein <div>-Element wie folgt:

<header><!-- header -->
<a href="/"><img src="images/logo.png"></a>
</header>
<div><!-- header -->
<a href="/"><img src="images/logo.png"></a>
</div>

Damit Tools mit Hilfstechnologie die Landmarks zu Navigationszwecken und die strukturellen Teile des Dokuments erkennen können, füge ich den einzelnen Elementen folgende Rollen hinzu (siehe Abbildung 7):

• header role=banner
• nav role=navigation
• maincontent role=main
• section role=region
• article role=article
• aside role=complementary
• footer role=contentinfo

Abbildung 7: Hinzufügen von Rollen

<!doctype html>
<html lang="en">
<head><title> Accessible HTML5 Home Page</title></head>
<body>
  <header role="banner"><!-- header -->
  <a href="/"><img src="images/logo.png"></a>
  </header>
<nav role="navigation"><!-- navigation -->
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
  <li><a href="/faq">FAQ</a></li>
  <li><a href="/about">About</a></li>
 </ul>
</nav>
<div id="maincontent" role="main"><!-- main content -->
<section>
 <figure><img src="images/maingraphics.png">
 <figcaption>Welcome image. More help on image<a href="#/">Help</a></figcaption>
 </figure>
</section>
<section role="region">
  <h2><a href="Action" target="_blank">Subscribe</a></h2>
  <article role="article">
  <h2>Welcome!</h2>
  <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and … </p>
  </article>
</section>
</div>
<aside role="complementary"><!-- info blocks -->
  <h4>Promotion</h4><ul><li>items</li></ul>
  <h4>Awards</h4><ul><li>items</li></ul>
  <h4>News</h4><ul><li>items</li></ul>
</aside>
<footer role="contentinfo"><!-- footer -->
  <div>Copyright © 2012</div>
  <div><a href="">Privacy Policy</div>
</footer>
</body>
</html>

Um für alle Browser Formate anzuwenden, müssen zuerst wie folgt alle HTML5-Elemente im Stylesheet als Elemente auf Blockebene definiert werden:

<style>
header,footer,nav,article,aside,section,figure,figcaption{display:block;}
</style>

Ich füge die ARIA-Rollen ein, damit die Formate für jedes einzelne Element angewendet werden:

<style>
  header[role="banner"]{/* Styles for banner */}
  header{/* Styles for other headers */}
  #maincontent[role="main"]{ /* Styles for main content */}
  nav[role="navigation"]{/* Styles for navigation */}
  section[role="group"]{/* Styles for section */}
  article[role="article"]{/* Styles for article */}
  aside[role="complementary"]{/* Styles for info blocks */}
  footer[role="contentinfo"]{/* Styles */}
</style>

Da die HTML-Seite sequenziell analysiert wird, empfiehlt es sich, die JavaScript-Datei unten auf der Seite nach der Fußzeile einzufügen. Damit ist die Site vollkommen unabhängig von JavaScript – die JavaScript-Funktion wird erst instanziiert, wenn das Dokument bereit ist und vollständig geladen wurde. Im folgenden Code ist die Skriptdatei in meinem Beispiel bereits eingefügt:

<footer role="contentinfo"><!-- ><!-- footer -->

  <div>Copyright © 2012</div>

  <div><a href="">Privacy Policy</div>

</footer>

  <script type="text/javascript" src="jquery.min.js"></script>

  <script type="text/javascript" src="main.js"></script>

</body>

</html>

Erstellen eines zugänglichen Kontaktformulars

Bildet einen wesentlichen Bestandteil webbasierter Interaktion, und HTML5 umfasst eine Reihe neuer Eingabetypen und Attribute, mit denen sich Eingabehilfen leichter gestalten lassen. In Abbildung 8 sind diejenigen aufgeführt, die sich auf HTML5-Formulare beziehen.

Abbildung 8: Formulareingabetypen und -attribute

Eingabetyp	input type=datetime input type=datetime-local input type=date input type=month input type=time input type=week input type=number	input type=range input type=email input type=url input type=search input type=tel input type=color
Attribute	autocomplete autofocus form formaction formenctype formmethod formnovalidate	formtarget list multiple pattern placeholder required step

Zur Erstellung von Eingabehilfen sollte ein Formular auf nur einen Zweck beschränkt sein. Eine Kontaktseite sollte nur das Kontaktformular und keine weitere Ablenkung beinhalten. Dann fällt es den Benutzern wesentlich leichter, Geräte mit Hilfstechnologie zu verwenden.

Außerdem ist es wichtig, den richtigen Eingabetyp zu verwenden. Dadurch lassen sich Geräte leichter bedienen, die dieses Attribut unterstützen. Beispielsweise kann input type=number ein numerisches Tastenfeld für mobile Geräte darstellen, input type=url wiederum eine besondere „.com“-Taste auf der virtuellen Tastatur zahlreicher Smartphones.

Verwenden Sie wie folgt das Attribut „for“ in einer Beschriftung sowie das Attribut „id“ im Eingabeelement:

<label for="useremail">Your E-mail:</label>
<input id="useremail" name="useremail" type="email" value=""/>

Dadurch wird die Beschriftung dem Eingabeelement im Hilfsgerät zugeordnet. Mithilfe des Attributs „arai-describedby“ können Sie dies auch auf eine aussagekräftigere Weise tun. Wenn Sie beispielsweise für jedes Eingabefeld Hilfetext haben, können Sie diesen mit dem Eingabetext verknüpfen:

<label for="useremail">Your E-mail:</label>
<input id="useremail" type="email" value="" aria-describedby="helpemail"/>
<p id="helpemail">Your email address will be used for further communication</p>

Der nächste Schritt besteht darin, den Platzhalter und die erforderlichen HTML5-Attribute (mit aria-required=„true“) hinzuzufügen. Anhand des Platzhalterattributs kann illustriert werden, wie eine gültige Eingabe aussieht, und das erforderliche Attribut macht das Eingabefeld zu einem Pflichtfeld:

<label for="useremail">Your E-mail:</label>
<input id="useremail" type="email" placeholder="john@msn.com" required
aria-required="true" value="" aria-describedby="helpemail"/>
<p id="helpemail">Your email address will be used for further communication</p>

Ein Platzhalter ist jedoch keine Beschriftung. Und beachten Sie auch, dass ein Sternchen im Text zur Anzeige eines Pflichtfelds bei jedem Feld von der Bildschirmsprachausgabe gelesen wird, was die Bedienung durch Menschen mit eingeschränkter Sehfähigkeit erschwert. Verwenden Sie stattdessen das Feldattribut „aria-required“. Dieses gibt dem Gerät mit Hilfstechnologie an, bei welchen Feldern es sich um Pflichtfelder handelt. Verwenden Sie außerdem statt des Sternchens eine Hintergrundfarbe oder ein Bild, um den Benutzer auf das Pflichtfeld hinzuweisen.

Sie können auch das Attribut „autofocus“ hinzufügen. Dieses ist sehr hilfreich, da es den Fokus auf das erste Element des Formulars setzt.

Abbildung 9 illustriert Code, mit dem ein zugängliches HTML5-Kontaktformular erstellt wird, und in Abbildung 10 ist das Kontaktformular dargestellt.

Abbildung 9: Erstellen eines HTML5-Kontaktformulars

<div id="contact" role="main"><!-- main content -->
  <!-- content -->
    <section id="content">
      <article>
        <h2>Contact <span>Form</span></h2>
        <form id="contacts-form" action="" method="post">
          <fieldset>
            <div class="field">
              <label for="name" >Name </label>
              <input id="name" placeholder="John Smith" autofocus required
                aria-required="true" type="text" value="" />
            </div>
            <div class="field">
              <label for="email">E-mail</label>
              <input id="email" placeholder="john@msn.com" type="email" required
                aria-required="true" value=""/>
            </div>
            <div class="field">
              <label for="website">Website</label>
              <input id="website" placeholder="http://website.com"
                type="url" />
            </div>
            <div class="field">
              <label for="message">Message</label>
              <textarea id="message"
                placeholder="Write your message Here!" required
                aria-required="true" ></textarea>
            </div>
            <div><a href="#" onclick="submit()">Send Your Message!</a></div>
          </fieldset>
        </form>
      </article>
    </section>
</div>

Abbildung 10: Das Kontaktformular im Browser

Für Personen mit Behinderungen können Aktualisierungen schwierig sein. Live-Regionen können Hilfstechnologiegeräte jedoch auf Aktualisierungen aufmerksam machen, wenn Sie das Attribut „aria-live“ zusammen mit den Rollenattributen „status“, „log“ und „alert“ verwenden:

• aria-live=“off”: Aktualisierungen werden nicht angekündigt. (Die Region ist nicht live.)
• aria-live=“polite”: Aktualisierungen werden angekündigt, wenn der Benutzer inaktiv ist.
• aria-live=“assertive”: Höhere Priorität, aber Aktualisierungen werden nicht unbedingt sofort angekündigt.
• role=“log”, role=“status” und role=“alert” für verschiedene Meldungstypen

Es folgt eine einfache Methode, mit der Sie dies in den HTML-Code integrieren können:

<div id="liveregion" role="log" aria-live="polite">

Sehen wir uns nun eine FAQ-Seite mit zugänglichem Inhalt an.

Erstellen einer zugänglichen FAQ-Seite mit Bildern

FAQ-Seiten gehören mit zu den am häufigsten besuchten Seiten vieler Websites. Eine FAQ-Seite kann Text, Tabellen, Links, Bilder und Titel enthalten, und alle sollten zugänglich sein. Sehen wir uns an, wie Sie dies erreichen können. Zunächst sollte der HTML-Inhalt nur semantische HTML-Tags enthalten. Ausgestaltungselemente sollten in das Stylesheet aufgenommen werden. Anstelle von:

<i>italics</i>

verwenden Sie also:

<em>emphasized</em>
  <cite>citation</cite>

Und anstelle von:

<b>bold</b>

verwenden Sie:

<strong>strong</strong>

Diese Elemente machen den Inhalt aussagekräftiger und werden von Bildschirmsprachausgaben unterschiedlich interpretiert. Einige Bildschirmsprachausgaben ändern beispielsweise den Ton beim Element <strong>, aber nicht bei den Elementen <b>.

Außerdem ist es wichtig, titelbezogene Überschriftenelemente wie <h1>, <h2> usw. richtig zu verwenden. Idealerweise sollten sie auf einer Seite eine <h1>-Überschrift und nach Bedarf mehrere Unterüberschriften verwenden. Verwenden Sie unbedingt schließende Tags für jedes HTML-Element. Achten Sie auch darauf, alle sortierten und unsortierten Listen korrekt zu schließen. Üblicherweise sollten Sie auch alle Tags in Kleinbuchstaben schreiben und sie korrekt verschachteln. Abbildung 11 zeigt ein Beispiel dafür.

Abbildung 11: Markup für eine FAQ-Seite

<h1>FAQ</h1>
  <h2>List of frequently asked questions</h2>
    <ul>
    <li><a href="#q1">Accessible Text</a></li>
    <li><a href="#q2">Accessible Tables</a></li>
    <li><a href="#q3">Accessible Links</a></li>
    <li><a href="#q4">Accessible Images</a></li>
    <li><a href="#q5">Accessible Titles</a></li>
    </ul>
  <h2 id="q1">Accessible Text</h2>
    <h3>Semantic HTML</h3>
    <h3>Proper hierarchy</h3>
    <h3>Localized content</h3>
    <h3>Acronym</h3>
    <h3>Font-size</h3>
    <h3>Color</h3>
  <h2 id="q2">Accessible Table</h2>
  <h2 id="q3">Accessible Links</h2>
  <h2 id="q4">Accessible Images</h2>
  <h2 id="q5">Accessible Titles</h2>

Um lokalisierten Inhalt zu erstellen, legen Sie die Seitensprache mit dem Attribut „lang“ im globalen <html>-Element fest:

<html lang="en">

Für Inhalt in einer anderen Sprache verwenden Sie „lang“ wie folgt in den Elementen <p> oder <span>:

<p><span lang="la">Carpe diem </span>(seize the day)</p>

Und für Abkürzungen verwenden Sie das Tag „abbr“:

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> was founded in 1994.</p>

Die Schriftgröße des Inhalts sollte immer relativ sein. Verwenden Sie niemals absolute oder feste Schriftgrößen, da dies die Schriftskalierungsfunktionalität des Browsers beschränkt. Vergrößern oder verkleinern Sie die Schriftgröße mit einer der folgenden Optionen über die Standardeinstellungen des Browsers:

• Prozentsatz (%)
• em (relativ zur Größe des Großbuchstaben M)
• ex (relativ zur Größe des Großbuchstaben X) 
• Schlüsselwörter (klein, mittel, größer, kleiner, größer usw.) 

Im Folgenden finden Sie ein Beispiel:

font-size:100%;
  line-height:1.125em;

Farbe sollte als Sichthilfe für den Inhalt verwendet werden, aber nicht ausschließlich zur Darstellung von Informationen. Ein hoher Farbkontrast zwischen dem Vordergrund und dem Hintergrund ist wichtig, um die Seite zugänglich zu machen. Das W3C empfiehlt ein Kontrastverhältnis von 4,5:1 bei normalem Text und von 3:1 bei größerem Text.

Zur Formularüberprüfung kann der Hintergrund bei einzelnen Eingabeelementen farbig angezeigt werden, um auf einen Fehler hinzuweisen, der für farbenblinde Benutzer möglicherweise nicht erkennbar ist. Verwenden Sie für gleiche Informationen unbedingt mehrere Hinweise, beispielsweise eine Beschriftung, um einen Fehler anzuzeigen.

Wenn Sie in einem Stylesheet Farbe verwenden, legen Sie für das Element für die Hintergrundfarbe eine Komplementärfarbe fest. Manche Menschen können etwas leichter lesen, wenn der Hintergrund schwarz ist. Ermöglichen Sie deshalb die Abänderung der Seitenfarbe in ein dunkleres Seitenlayout. Im Folgenden finden Sie ein Beispiel:

body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:100%;
  line-height:1.125em;
  background-color:#212222;
  color:#242424;
}

Standardtabellen enthalten in der Regel eine Kopfzeile und eventuell auch eine Fußzeile. Mit einfachen Tabellentags lassen sich diese aber nicht unterscheiden. HTML5 liefert jedoch eine Reihe neuer nützlicher Tags:

• <caption> ist der Tabellentitel.
• <details> zeigt zusätzliche Details an, die ein Benutzer auf Wunsch ein- oder ausblenden kann.
• <summary> wird angekündigt, bevor die eigentlichen Tabellendaten von einer Bildschirmsprachausgabe gelesen werden.
• <thead> gibt die Tabellenkopfzeile an.
• <tfoot> gibt die Tabellenfußzeile an.

Abbildung 12 illustriert Code für eine HTML-Beispieltabelle, auf die von Geräten mit Hilfstechnologie zugegriffen werden kann.

Abbildung 12: Eine Tabelle, auf die zugegriffen werden kann

<h4>Table with Caption, Summary and Details</h4>
<table>
  <caption>
    <strong>Lorem Ipsum.</strong>
    <details>
      <summary>Help</summary>
      <p><strong>Lorem Ipsum </strong>is simply dummy text of the printing and </p>
     </details>
  </caption>
  <thead>
    <tr>
      <th>Table header column 1</th>
      <th>Table header column 2</th>
      <th>Table header column 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table footer column 1</td>
      <td>Table footer column 2</td>
      <td>Table footer column 3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table data column 1</td>
      <td>Table data column 2</td>
      <td>Table data column 3</td>
    </tr>
  </tbody>
</table>

Vermeiden Sie beim Erstellen von Links allgemeine Links wie „Hier klicken“ und „Weitere Informationen“. Verwenden Sie das Titelattribut und aussagekräftigen Ankertext. So fügen Sie Links richtig hinzu:

<p>Designandmethod.com has an article on accessibility. See the <a title="click for more information at the Design & Method Web site" href="http://designandmethod.com">Big picture at Design and Method</a></p>

Verwenden Sie ASCII-Symbole mit Bedacht. Wenn Sie mehrere Seiten haben, vermeiden Sie die Symbole für „größer als“ und „kleiner als“ (> und <) zum Vor- und Zurückblättern zum nächsten Elementesatz. Verwenden Sie stattdessen eindeutigen Text wie „Nächste 10 Elemente“ und „Vorherige 10 Elemente“. Manchmal mag es logisch erscheinen, bei der Breadcrumbnavigation das Symbol für „größer als“ zu verwenden. Von der Bildschirmsprachausgabe wird „Weiter >>“ jedoch leider als „Weiter, größer als, größer als“ gelesen, was nicht hilfreich ist. Wenn das Design ein „>“ erfordert, verwenden Sie ein CSS-Hintergrundbild.

Und schließlich sollten Links noch unterstrichen werden. Daran können farbenblinde Benutzer erkennen, dass es sich bei dem Text um einen Link handelt. Sie können dies im Stylesheet mithilfe eines Ausgestaltungselements erreichen:

{
  text-decoration: underline;
  display:block;
  border-bottom:1px solid #000;
}

Um Bilder zugänglich zu machen, beginnen Sie mit einem aussagekräftigen alt-Attribut, und verwenden Sie für Ausgestaltungsbilder ein leeres alt-Tag (alt=„“). Fügen Sie unbedingt das Titelattribut ein. Es wird als eine QuickInfo angezeigt und von Bildschirmsprachausgaben geprüft, wenn kein alt-Attribut zur Verfügung steht. Wenn weder das alt-Tag noch Titelattribute gefunden werden, kündigt das Gerät mit Hilfstechnologie den Bildnamen an. Achten Sie deshalb unbedingt darauf, dem Bild einen aussagekräftigen Namen zu geben.

Verwenden Sie role=presentation für ein Bild oder ein beliebiges Element, das für Geräte mit Hilfstechnologie nicht relevant ist. Wenn Sie Bildkarten einfügen, verwenden Sie „alt“ für jeden Bereich. Sie können für Bilder also die Tags „figure“ und „figcaption“ verwenden. Verwenden Sie möglichst wenig animierte Bilder. Diese können bei Menschen, die an Epilepsie leiden, Anfälle auslösen.

Das folgende Beispiel zeigt, wie Sie ein Bild zugänglich machen:

<figure><img src="images/maingraphics.png" alt="Example screen shot" title="main graphics showing screenshot example"><figcaption>Image with caption.</figcaption></figure>

Hier ist der Code für eine Bildkarte:

<area shape=rect coords=0,0,10,10 href="example.htm" alt="example">

Beim Erstellen von zugänglichem Inhalt müssen Sie zu guter Letzt noch relevante Schlüsselwörter zu Beginn von Titeln einfügen. Benutzer mit Sehbehinderungen finden sich leichter zurecht, wenn am Anfang präzise Titel mit den relevanten Schlüsselwörtern stehen.

Im folgenden Beispiel erscheint das redundante „So machen Sie“ in den einzelnen Titeln besser lesbar. Eine Bildschirmsprachausgabe würde diese ersten drei Wörter jedoch bei jedem Titel wiederholen, wodurch es den Benutzern erschwert würde, den Inhalt schnell zu erfassen. Durch die Verwendung präziser und relevanter Schlüsselwörter zu Beginn des Titels wird dieser besser zugänglich:

<a href="#q1"><!--How to make content Accessible-->Accessible Content</a>
<a href="#q2"><!--How to make links Accessible-->Accessible Links</a>
<a href="#q3"><!--How to make images Accessible-->Accessible Image</a>
<a href="#q4"><!--How to make titles Accessible-->Accessible Titles</a>

Sehen wir uns jetzt einmal kurz an, wie der zugänglichen Website eine Seite „Info“ hinzugefügt wird – eine Seite, die Audio und Video enthält. Um Audio- und Videoelemente zugänglich zu gestalten, wird Folgendes benötigt:

Eine zugängliche Seite „Info“ mit Audio und Video

Nehmen wir einmal an, die Seite „Info“ soll ein Video enthalten, das die Gründung meiner Website erläutert. Mithilfe der Tags <audio> und <video> in HTML5 lässt sich Multimediainhalt leichter in einer Webseite einbetten. Der Zugriff auf Inhalt durch Nichtmuttersprachler, taube bzw. gehörlose oder blinde Personen oder solche, deren Lautsprecher defekt sind oder die sich in einem lauten Umfeld aufhalten, ist in diesem Fall jedoch sehr schwierig. In all diesen Fällen sind ganz besondere Richtlinien einzuhalten. Nachfolgend finden Sie einige Möglichkeiten, um Audio- und Videoinhalt zugänglich zu gestalten:

• Fügen Sie Texttranskripte für Audio oder Video in HTML-Format ein.
• Fügen Sie alternativen Inhalt für Browser ein, die keine Medientags unterstützen.
• Die Steuerelemente sollten zumindest eine Schaltfläche für „Ein/Aus“ umfassen.
• Medien sollten nicht automatisch gestartet werden, sondern immer vom Benutzer zu starten sein.
• Stellen Sie einen Link zum Herunterladen der Mediendatei bereit.
• Stellen Sie Untertitel (erweiterte Untertitel oder Untertitel) über eine Video-/Audiospur bereit.

Bei Untertiteln handelt es sich typischerweise um eine zeitlich abgestimmte Transkription der gesprochenen Worte in einem Video, die den Benutzern den Inhalt verständlich machen. Für gehörlose Benutzer sind erweiterte Untertitel die bessere Lösung, da sie Transkriptionen von Geräuschen, Toneffekten, Musik usw. zusammen mit den gesprochenen Worten beinhalten.

Derzeit werden erweiterte Untertitel und Untertitel über das Spurelement zusammen mit den folgenden Formaten unterstützt: 

• WebVTT für die erweiterte Untertitelung von Videoinhalt
• SMPTE-TT, ein zeitgesteuertes Textformat für die Untertitelung
• SRT, für Untertiteldateien

Die Unterstützung von Eingabehilfen für Video befindet sich derzeit noch in der Entwicklung. Nachfolgend finden Sie jedoch ein Beispiel:

<video controls>
<source src="video-file.mp4" type="video/mp4"/>
<track src="en.vtt" kind="subtitles" srclang="en"
label="English p subtitles" default/>
<track src="en.ttml" kind="captions" srclang="en"
label="English p captions" default/>
</video>

Medien lassen sich zwar nicht granular steuern, doch HTML5 verfügt über ein Steuerattribut, das Steuerelemente für das Medienelement anzeigt. Zugriff auf diese Steuerelemente ist über die Tastatur möglich:

• Mit der Leertaste wird zwischen „Wiedergabe“ und „Pause“ umgeschaltet.
• Mit dem Pfeil-nach-links und dem Pfeil-nach-rechts wird das Video um 5 Sekunden vor- und zurückgespult.
• Mit STRG + Pfeil-nach-links oder Pfeil-nach-rechts wird das Video um 60 Sekunden vor- und zurückgespult.
• Mit POS1 + Pfeil-nach-links oder Pfeil-nach-rechts kann an den Anfang oder das Ende des Videos gesprungen werden.
• Wenn der Fokus auf der Lautstärketaste liegt, lässt sich die Lautstärke mit den Tasten Pfeil-nach-oben und Pfeil-nach-unten erhöhen und verringern.

Unterstützung von Eingabehilfen in Visual Studio 2012

Sicher freut es Sie zu wissen, dass sich Eingabehilfen mit Visual Studio 2012 einfacher gestalten lassen. Es gibt jetzt IntelliSense für ARIA-Rollen, -Attribute und -Eigenschaften in HTML-Elementen (siehe Abbildung 13 und Abbildung 14).

Abbildung 13: IntelliSense-Unterstützung für ARIA-Rollen in Visual Studio 2012

Abbildung 14: ARIA-Eigenschaften werden in IntelliSense unterstützt

Nachdem Sie eine zugängliche Webseite erstellt haben, möchten Sie sicher prüfen, ob diese tatsächlich den Anforderungen an Eingabehilfen entspricht. Mit Visual Studio 2012 geht das ganz einfach. Klicken Sie mit der rechten Maustaste auf eine Seite, und wählen Sie „Eingabehilfen überprüfen“ (siehe Abbildung 15).

Abbildung 15: Sie können die Eingabehilfen einer Webseite in Visual Studio 2012 überprüfen

Wählen Sie dann die Stufe der Richtlinien für Eingabehilfen bei Webinhalten (Web Content Accessibility Guidelines, WCAG), die Sie überprüfen möchten: Priorität 1 oder Priorität 2 (siehe bit.ly/S0Nb66). Sie können auch eine Überprüfung gemäß Access Board Abschnitt 508 vornehmen, der sich auf die von der US-Regierung im Abschnitt 508 des Rehabilitation Act definierten Standards bezieht (section508.gov). Nachdem Sie die Richtlinien ausgewählt haben, prüft Visual Studio 2012 alle HTML-Elemente und zeigt einen ausführlichen Bericht zu allen Fehlern oder Warnungen auf der Seite an (siehe Abbildung 16).

Abbildung 16: Bericht zu Eingabehilfen für Webhinhalt in Visual Studio 2012

Sie haben jetzt erfahren, wie Sie mithilfe von HTML5 eine zugängliche Website erstellen und wie Ihnen einige Eingabehilfenfeatures von Visual Studio 2012 dabei behilflich sein können. Sie finden dort nützliche Ergänzungen für Ihre Toolbox, wenn Sie Eingabehilfen für das Web erkunden.

Rajesh Lal arbeitet bei Nokia und engagiert sich für HTML5 und Webtechnologien. Er hat mehrere Bücher über Windows-Gadgets, Webwidgets, das mobile Web sowie Silverlight-Technologien geschrieben. Sie können Eingabehilfen beim Softwaredesign und die Methoden unter dsgnmthd.com/accessibility diskutieren. Informationen zum Autor finden Sie unter iRajLal.com.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Art Barstow, Lakshmi C. Chava und Dennis Lembrée