Barrierefreie-Navigation

Einschränkungen

• Visuell
  • Maus nicht immer bedienbar
• Motorisch
  • Tastatur muss herhalten
  • Mausersatz kommt infrage
• Kognitiv
  • Schlechte Erfassungsgabe, …

Hilfsmitteln

• Mausersatz
  • Kopfmaus (beispielsweise eviacam)
  • Tastatur Mausemulation (beispielsweise orca)
• Spracheingabe
• Screenreader (beispielsweise orca)
  • Braille-Zeile
  • Sprachausgabe

Rechner und Smartphone / Tablett

• Für Rechner Bedienung über de bereits erwähnten Hilfsmitteln.
• Für reine Touchgeräte im OS eingebauten Screenreader
  • Android Talkback
  • iOS voiceOver

Das Konzept und die Funktionsweise sind sehr unterschiedlich. Bei der Touchgeräte werden nur Klicks und Tastatur-Eingabe in Elementen wie Input, Links und Schaltelementen weitergereicht. Das Fokus wird nicht immer behandelt.

Auf Rechner werden die Tastatur und Mauseingabe den Browser, gegebenenfalls nach Vorverarbeitung weitergereicht.

Die Unterschieden erlauben, auf Smartphone oder Tabletten kein saubere Reaktion der GUI, manche Events fehlen.

Tastatur Navigation mit und ohne Screen-Reader

• Ohne Screen-Reader:
  • Tab: von fokussierbare Element zur fokussierbare Element
  • Space: Auswählen, Aus- Einklappen
  • Wagen Rücklauf: Ein- Ausklappen, in Formularen posten.
  • Kursor hoch/runter Bei Selectionsbox nutbar
• Mit Screen-Reader
  • Wie ohne
  • Cursor Tasten:
    • Buchstabenweise in einer Zeile bewegen.
    • Eine Zeile hoch oder runter

Caret/Browser Navigation

• Die Caret Navigation erlaubt einen Zeichen- oder Zeilenweise Navigation in der Applikation. Mittels F7 kann sie manchmal ein- ausgeschaltet werden.
• Die Browser Navigation verschiebt nur das Ausgabefenster.
• Screenreader wie Orca oder NVDA (Windows) sorgen dafür, dass eine Caret Navigation im Browser verwendet wird,

Navigation Titel zu Titel

• Orca und NVDA können von Titelzeile zur Titelzeile springen (Taste H)
• oder gezielt zum nächste Titel (H1 bis H6) mittels die Tasten 1 bis 6 zu springen.

Tastatur Eingabe

• Am PC wie gewohnt
• Auf Smartphone oder Tabletten wird nach Doppelklick auf das Bildschirm die Tastatur eingeblendet.
  • Mit Verschieben des Fingers, werden die erreichten Tasten angesagt, durch heben und zweifach klicken erfolgt die Übernahme des Zeichens.

Sinnvoller Aufbau der Webseite

• Reduzieren der Anzahl an Tastenbetätigungen.
• Skiplinks vorsehen, Aber nicht viel das Hauptinhaltsbereich sollte sofort erreichbar sein.
• Mit H Elementen die Navigation zu relevante Abschnitte erleichtern.
  • H1 entspricht Beginn der Seite.
  • H2 Zeigt auf Bereiche wie Inhalt.
  • H3 Zeigt auf den nächsten Untertitel unterhalb von h2
  • …
• Touch Geräte wandern von Abschnitt zum Abschnitt, der Browser bekommt es nicht mit-

Realisierung einen Navigationsmenü

<nav>
   <details>
       <summary aria-label="Hauptmenü" id="menu-top">Menü;</summary>
       <ul>
           <li><a href='.' >HOME</a></li>
           <li>
               <details><summary">Navigation</summary>
                   <ul>
                       <li><a href="./?1">Seite 1</a></li>
                       <li>
                           <details><summary>Seite 3.X</summary>
                               <ul>
                                   <li><a href="./?3,1">Seite 3.1</a></li>
                               </ul>
                       </li>
                       <li>
                           <details><summary>Aktion</summary>
                               <ul>
                                   <li><button id='action' aria-label="Hell/Dunkel" 
                                       type="submit">Ausführen</button></li>
                               </ul>
                           </details>
                       </li>
                   </ul>
               </details>
           </li>
       </ul>
   </details>
</nav>

 function focusOut(e) { setTimeout(toogleDetails, 1); }

document.querySelectorAll('nav summary, nav a, nav button').forEach(a => {
        a.addEventListener('focusout', focusOut);});

var allDetails = null;
function closeAll() {allDetails.forEach( det => { det.open = false;});}
window.addEventListener('DOMContentLoaded',function() {
    var menu = null; var navi = null;
    function closeOnlyOpen() {
        allDetails.forEach( det => {
            if ( !det.contains(document.activeElement) ) det.open = false;})}
    function toogleDetails() {
        if ( document.activeElement ) closeOnlyOpen(document.activeElement);
        else closeAll();}
    function outHandler(e) {
        if ( navi.contains(e.target)  && e.key == 'Escape') {
            e.preventDefault(); closeAll(); menu.focus();
        } else if ( !navi.contains(e.target) ) closeAll();}
    allDetails = document.querySelectorAll('nav details');
    menu = document.querySelector('#menu-top');
    navi = document.querySelector('nav');
    document.querySelector('body').addEventListener('keyup', outHandler);
    document.querySelector('body').addEventListener('click', function (e) {
        if ( !navi.contains(e.target)) closeAll();
        else closeOnlyOpen();
    });})

summary svg {
    width:1em;
    height:1em;
    vertical-align:middle;
    stroke: #00a;
}

<summary>
    <svg viewBox="0 0 100 100" width="16" height="16">
        <line x1="5" y1="85" x2="95" y2="85" stroke-width="10" />
        <line x1="5" y1="50" x2="95" y2="50" stroke-width="10" />
        <line x1="5" y1="15" x2="95" y2="15" stroke-width="10" />
    </svg>
</summary>