Technik

• Leere alt-Attribute für Layoutgrafiken
  • Eine Grafik, die keine informative Funktion hat, benötigt keinen Alternativtext. Grafiken ohne informative Funktion sind zum Beispiel Abstandshalter, Farbflächen, Muster, oder rein dekorative Fotos. Solche Grafiken sollen mit ei-nem leeren alt-Attribut (alt="") ausgezeichnet werden.
    
  • Thema des Prüfschritts sind auch Icons, die mittels Icon Font eingebunden sind und SVGs.
    
• Alternativen für Audiodateien und stumme Videos (Möglichkeit)
  • Audiodateien und stumme Videodateien, die Informationen vermitteln, müssen mit gleichwertigen Medienalter-nativen versehen werden - es sei denn, es handelt sich bei Ihnen bereits um Medienalternativen für Text.
    
• HTML-Strukturelemente für Überschriften
  • Überschriften müssen korrekt mit den HTML-Strukturelementen h1 bis h6 oder äquivalenten ARIA-Rollen und Attri-buten ausgezeichnet sein und die Inhalte der Seite erschließen
    
• Nur eine H1 pro Seite
  
• Keine H Level überspringen
  
• HTML-Strukturelemente für Listen
  • Zur Auszeichnung von Listen auf der Seite sollen HTML-Strukturelemente für Listen (ul, ol und so weiter) genutzt werden.
    
• HTML-Strukturelemente für Zitate
  • Zur Auszeichnung von Zitaten, die als eigenständige Textabschnitte gefasst sind, soll das dafür vorgesehene HTML-Strukturelement blockquote genutzt werden.
    
• Datentabellen richtig aufgebaut
  • Datentabellen sind strukturell richtig aufgebaut, Zeilen- und Spaltenüberschriften sind mit th oder den entspre-chenden ARIA-Rollen ausgezeichnet.
    
• Zuordnung von Tabellenzellen
  • In komplexen Datentabellen soll der Bezug von Überschriften und Inhalten (über scope oder über id und headers) definiert sein, ausdrückliche Zuordnungen von Überschriften und Inhalten in einfachen Datentabellen sollen korrekt sein.
    
• Kein Strukturmarkup für Layouttabellen
  
  • Tabellenstruktur-Mark-up soll nicht für Layouttabellen verwendet werden.
    
• Verwende Landmark-Elemente, um wichtige Inhaltsbereiche zu kennzeichnen
  
• Nutze das button Element für Buttons
• Inhalt gegliedert
  
  • Absätze sind mit geeigneten Strukturelementen ausgezeichnet.
  • Hervorhebungen in Texten sind mit strong oder em ausgezeichnet.
    
  • Text-Inhalt wird nicht per CSS eingebunden.
    
• Beschriftung von Formularelementen programmatisch ermittelbar (wichtig!)
  
  • Sichtbare Beschriftungen von Formularelementen sind vorhanden.
    
  • Eine sichtbare Beschriftung von Formularelementen soll vor (das heißt links neben oder über) dem zugehörigen Eingabefeld vorhanden sein. Nur die Beschriftung von Checkboxes und Radiobuttons kann (und sollte normaler-weise) rechts neben dem zugehörigen Eingabefeld angeordnet werden.
    
  • Wenn für die Eingabe ein bestimmtes Format verlangt wird, so sind die Anweisungen für alle Benutzer lesbar.
• Sinnvolle Reihenfolge
  
  • Seiteninhalte sollen unabhängig von der Darstellung in einer sinnvollen und brauchbaren Reihenfolge stehen. Was inhaltlich zusammengehört (etwa eine Überschrift und die dazugehörigen Inhalte darunter) soll nicht auseinan-dergerissen werden. 
    
  • Mittels CSS versteckte Seiteninhalte sollen deshalb an sinnvoller Stelle im Seitenquelltext erscheinen.
    
  • Dynamische Inhalte, die im Ausgangszustand visuell versteckt sind, sollen auch für Screenreader verborgen sein, damit sie nicht die Lesereihenfolge stören.
    
• Korrekte Syntax
  
  • Die verwendete Markup-Sprache HTML muss korrekt eingesetzt werden. Dabei muss für jedes Element folgendes gewährleistet sein:
    
    • Sie besitzen vollständige Start- und Endtags
      
    • sie sind gemäß Spezifikation korrekt verschachtelt
      
    • sie enthalten keine doppelten Attribute
      
    • alle ihre IDs sind eindeutig, außer dort wo die Spezifikationen etwas anderes erlauben
      
• Name-Rolle-Wert verfügbar
  
  • Alle selbst gestalteten Komponenten einer Website (also Elemente oder Widgets, die nicht auf interaktiven HTML-Elementen beruhen) sind so umgesetzt, dass die semantischen Informationen (Name, Rolle, Eigenschaften) vor-handen sind. Werden nicht semantische Elemente (etwa div oder span) eingesetzt und mithilfe von JavaScript zu Bedienelmenten umfunktioniert, wird die Semantik mithilfe von WAI-ARIA bereitgestellt.
    
  • Die wechselnden Zustände der Bedienelemente werden nicht nur visuell über CSS und JavaScript abgebildet, son-dern auch über scriptgesteuerte Änderung der Werte der ARIA-Attribute, damit die Semantik auch bei nicht-visueller Nutzung verfügbar ist.
    
• Statusmeldungen programmatisch verfügbar
  
  • Eine Statusmeldung ist eine Nachricht, die einer Seite dynamisch hinzugefügt wird. Sie informiert Nutzenden bei-spielsweise über den Erfolg oder das Ergebnis einer Aktion, über den Fortschritt eines Prozesses oder über das Vor-kommen von Fehlern.
    
  • Wenn Webangebote Statusmeldungen erzeugen, sollen visuell eingeblendete Statusmeldungen mit geeigneten Rollen und Eigenschaften ausgezeichnet und programmatisch ermittelbar sein, das bedeutet die Statusmeldun-gen werden Nutzenden von assistiven Technologien (Screenreader) präsentiert, ohne dass sie den Fokus erhal-ten.Beispiele für Statusmeldungen:
    
    • Ware wurde im Shop dem Warenkorb hinzugefügt
      
    • 3 Bücher der Merkliste hinzugefügt
      
    • Formular erfolgreich abgeschickt (Erfolgsmeldung)
      
    • 5 Suchergebnisse (etwa nach Filterung der Ergebnisse)
      
    • 3 Fehler im Formular (bei clientseitiger Prüfung ohne Neuladen der Seite)
      
    • Punktestand geändert
      
    • Seite wird geladen (bei visueller Ladeanzeige/Fortschrittsbalken)
      
• Keine Beschränkung der Bildschirmausrichtung
  
  • Webinhalte sollen sich an die nutzergewählte Ausrichtung von Ausgabegeräten anpassen. Sie sollten sowohl im Hochformat als auch im Querformat dargestellt werden und nutzbar sein, es sei denn, eine bestimmte Ausrich-tung des Inhalts ist unerlässlich.
    
  • Es wird nicht verlangt, dass in beiden Ausrichtungen Inhalte und Funktionen in der gleichen Form angeboten wer-den. So können in einer anderen Orientierung Inhalte ggf. erst nach Aktivierung von Ausklappbereichen oder mittels Links auf andere Seiten angeboten werden.
• Anderssprachige Wörter und Abschnitte ausgezeichnet (wichtig!)
  
  • Wenn innerhalb einer Seite Wörter und Textabschnitte in einer anderen Sprache vorkommen, müssen diese mithil-fe des lang-Attributs ausgezeichnet werden.
    
• Eingabefelder zu Nutzerdaten vermitteln den Zweck
  
  • Eingabefelder, die sich auf den Nutzer selbst beziehen, sollten eine semantisch eindeutige, sprachunabhängige Bestimmung ihres Zweckes ermöglichen. Geeignet dafür ist zur Zeit das HTML autocomplete-Attribut, mit dem sich der Eingabezweck für Felder wie etwa Name, E-Mail oder Telefonnummer ebenso wie für Adress-Daten oder Kre-ditkarten-Daten definieren lässt.
    
• Inhalte brechen um
  
  • Seiten-Inhalte sollen bei einer Browserfensterbreite von 320 CSS-Pixeln (bzw. bei einer Browserfensterbreite von 1280 CSS-Pixeln und 400% Zoomvergrößerung) so umbrechen, dass alle Informationen und Funktionen verfügbar sind, ohne dass Nutzer horizontal scrollen müssen.
    
  • Es wird dabei nicht verlangt, dass alle Inhalte in gleicher Weise in der responsiven Ansicht verfügbar sind. So sind die sichtbaren Navigationsmenüs einer Standard-Ansicht auf dem Desktop häufig nach dem Hereinzoomen (oder bei Nutzung des Angebots auf einem Smartphone-Bildschirm) nur über eine Ausklappnavigation zugänglich. Inhal-te können auch in Ausklappbereichen oder über Links auf andere Seiten oder Ansichten verfügbar sein.
    
• Textabstände anpassbar 
  
  • Die Anpassung der Zeilenhöhe auf das 1,5-fache der Textgröße, des Abstands nach Absätzen auf das 2-fache der Textgröße, von Buchstabenabständen auf das 0,12-fache der Textgröße und von Wortabständen auf das 0,16-fache der Textgröße führt nicht zu einem Verlust an Inhalten oder Funktionalitäten, zum Beispiel durch das Ab-schneiden von Inhalten in Elementen, deren Größe sich bei Einstellung größerer Textabstände und dadurch erfol-gender Textspreizungen oder Umbrüche nicht dynamisch anpasst.
    
  • Anmerkung: Die Anforderung verlangt nicht von Autoren, die genannten Werte bei Ihren Inhalten umzusetzen, sondern lediglich, dass von Nutzern vorgenommene Anpassungen nicht zum Abschneiden von Text oder Verlust von Funktionalitäten führt.
    
• Eingeblendete Inhalte bedienbar (wichtig!)
  
  • Zusätzliche Inhalte, die angezeigt werden, wenn Elemente den Zeiger- oder Tastaturfokus erhalten, z. B. benutzer-definierte Tooltips oder Ausklapp-Menüs, sollten drei Anforderungen erfüllen:
    
    • Wenn zusätzliche Inhalte durch Darüberfahren mit dem Zeiger erscheinen, können Benutzer den Zeiger über diesen Inhalt bewegen, ohne dass er verschwindet.
      
    • Es gibt die Möglichkeit, einen eingeblendeten Inhalt zu schließen, ohne den Fokus zu verschieben (z. B. durch Drücken der Escape-Taste oder durch Aktivieren des Elements, dessen Fokussierung den Inhalt einblendet).
      
    • Der Inhalt schließt nicht selbsttätig nach einer gewissen Zeitspanne.
      
• Ohne Maus nutzbar (wichtig!)
  
  • Die Webseite soll auch ohne Maus - also ausschließlich mit der Tastatur - zu benutzen sein
• Zeitbegrenzungen anpassbar (Slider?)
  
  • Seiteninhalte werden ohne Zeitbegrenzung angezeigt, die Zeitbegrenzung ist abschaltbar, oder sie kann verlängert werden. Dies betrifft etwa:
    
    • zeitbegrenzte Dialoge, welche Nutzer zu Entscheidungen auffordern
      
    • Online-Transaktionen mit begrenzter Session-Dauer und automatischem Ausloggen bei längerer Inaktivität
      
    • das automatische Neu-Laden von Seiten oder die zeitverzögerte Weiterleitung zu einer anderen Seite
• Bewegte Inhalte abschaltbar (Slider?)
  
  • Ablenkung durch blinkende oder sich bewegende Elemente soll vermieden werden, auf 5 Sekunden begrenzt sein oder abschaltbar sein.
    
  • Bewegte oder automatisch aktualisierte Inhalte, z. B. periodisch wechselnde Nachrichten-Aufmacher (Teaser) sol-len zum Lesen anhaltbar sein.
    
• Bereiche überspringbar (wichtig!)
  
  • Verschiedene Inhaltsbereiche wie Navigation, Suche oder Seiteninhalt können von Nutzern assistiver Technologien übersprungen werden. Der Seitenaufbau soll unabhängig von der Darstellung deutlich werden. Eine der folgenden Voraussetzungen soll erfüllt sein:
    
    • Es werden sinnvolle Bereichsüberschriften (HTML-Strukturelemente h1 bis h6) eingesetzt
      
    • Es sind Sprunglinks vorhanden.
    •  HTML5 Elemente zur Auszeichnung von Bereichen (header, nav, main, aside, footer) erschließen den Seiten-aufbau sinnvoll.
      
    • WAI-ARIA document landmarks strukturieren die Seitenbereiche sinnvoll.
      
    • Frames und Iframes brauchen ein sinnvolles title-Attribut.
      
• Schlüssige Reihenfolge bei der Tastaturbedienung (wichtig!)
  
  • Wenn die Webseite mit der Tastatur bedient wird, soll die Reihenfolge, in der Links, Formularelemente und Objekte angesteuert werden, schlüssig und nachvollziehbar sein.
    
• Aktuelle Position des Fokus deutlich (wichtig!)
  
  • Der Tastaturfokus soll mindestens genau so deutlich hervorgehoben werden wie der Mausfokus. Bei Links, die nicht auf den Mauszeiger reagieren, soll der Tastaturfokus sich zumindest deutlich von der ausgewählten Hinter-grundfarbe abheben. Versteckte Sprunglinks sollen bei Fokuserhalt eingeblendet werden.
    
• Alternativen für komplexe Zeiger-Gesten
  
  • Wenn Webinhalte Funktionen implementiert werden, die über pfadbasierte Zeiger-Gesten (z.B. Wischgeste, etwa zum Bewegen von Slider-Bereichen oder Löschen von Inhalten) bedient werden können, gibt es Alternativen für die Aktivierung mittels einer einfachen Zeigereingabe.
    
• Zeigergesten-Eingaben können abgebrochen oder widerrufen werden
  
  • Funktionen von Bedienelementen sollen nicht bereits durch den Down-Event eines Zeigers auf einem Bedienele-ment ausgeführt werden; falls doch, muss es eine Möglichkeit geben, die ausgelöste Funktion entweder abzubre-chen oder rückgängig zu machen.
    
• Sichtbare Beschriftung Teil des zugänglichen Namens (wichtig!)
  
  • Sichtbare Beschriftungen von Bedienelementen sollen im zugänglichen Name des Bedienelements vorkommen. Dies betrifft zum Beispiel Links, Beschriftungen von Textfeldern, Buttons oder Checkboxen.
    
  • Spracheingabenutzer können Bedienelemente wie Links, Tasten oder Eingabefelder aktivieren, indem sie den sichtbaren Namen sagen, auch in der Verbindung mit Befehlen (z. B. Klick "Abschicken"). Wenn die sichtbare Be-schriftung nicht in dem hinterlegten zugänglichen Namen des Bedienelements (also dem Text, der programmatisch als Beschriftung ermittelt wird) vorkommt, lässt sich das Bedienelement gegebenenfalls nicht oder nur über Um-wege mittels Spracheingabe aktivieren.
    
• Hauptsprache angegeben
  
  • Die Hauptsprache der Webseite soll angegeben werden.
    
  • Screenreader verwenden Wortlisten, in denen die Aussprache der Wörter festgelegt ist. Sie müssen wissen, in wel-cher Sprache ein Text verfasst ist, damit sie die richtige Wortliste verwenden und den Text korrekt aussprechen können.
    
• Fehlererkennung (wichtig!)
  
  • Wenn ein Formular Fehlermeldungen erzeugt, sollen die fehlerhaft ausgefüllten Felder identifiziert und der Fehler in Textform beschrieben werden. Nicht dynamisch mit Java Script einblenden!
    
• Beschriftungen von Formularelementen vorhanden (wichtig!)
  • Eine sichtbare Beschriftung von Formularelementen soll vor (das heißt links neben oder über) dem zugehörigen Eingabefeld vorhanden sein. Nur die Beschriftung von Checkboxes und Radiobuttons kann (und sollte normaler-weise) rechts neben dem zugehörigen Eingabefeld angeordnet werden.
    
  • Wenn für die Eingabe ein bestimmtes Format verlangt wird, so sind die Anweisungen für alle Benutzer lesbar.
    
• Hilfe bei Fehlern (wichtig!)
  • Wenn ein Formular Fehlermeldungen erzeugt, müssen diese verständlich sein und Hinweise geben, wie der Fehler zu korrigieren ist.
    
• Fehlervermeidung wird unterstützt
  • Bei wichtigen Dateneingaben (etwa bei finanziellen Transaktionen) gibt es die Möglichkeit, die Dateneingabe rück-gängig zu machen oder sie vor dem Abschicken zu überprüfen und zu korrigieren. Erfolgreiche Eingaben werden bestätigt.
    
• Benutzerdefinierte Einstellungen
  • Die Seite soll benutzerdefinierte Browsereinstellungen berücksichtigen. Im Einzelnen können dies folgende Punkte sein:
    • Geänderte Vorder- und Hintergrundfarben
    • Schriftarten
    • Schriftgrößen
    • Darstellung des Fokuscursors
      
    • Maßeinheiten
  • Die Seite kann darüber hinaus eigene Werte für diese Einstellungen anbieten. Wenn diese Einstellungen nicht ge-nutzt werden, sollen die Browsereinstellungen übernommen werden. In manchen Fällen muss die Seite neu gela-den werden, damit sich die Änderungen auswirken.
    
• Vermeide die Verwendung des Autofokus-Attributs
  
• Entferne unsichtbare fokussierbare Elemente