Accessibility - Best Practice

Inhalt

• Semantisches HTML
• Genügend Kontrast
• Navigation durch Tastatur
• ALT Beschreibung für Bilder- Formulare
• ARIA roles (Accessible Rich Internet Applications)
• Untertitel & Übersetzung

Semantisches HTML

Semantisches HTML bedeutet, dass HTML-Elemente entsprechend ihrem Verwendungszweck und nicht nur zur Darstellung verwendet werden.

Beispiel H-Tag

H-Tags sollen immer aufgrund der Struktur verwendet werden, und nicht aufgrund des Stylings.

<h1></h1>
<h2></h2>
<h3></h3>
<h2></h2>

Weniger Div verwenden.

Div Elemente sind nicht aussagekräftig, HTML bietet viele passende alternativen.

<header>
  <!-- Site logo, header content -->
</header>
<nav>
  <!-- Navigation links -->
</nav>
<main>
  <!-- Main content -->
</main>
<footer>
  <!-- Footer content -->
</footer>

Vorteile

• Accessability
• SEO
• Unterhalt

Genügend Kontrast

Der Kontrast bezieht sich auf den Unterschied in Farbe und Helligkeit zwischen dem Text und seinem Hintergrund.

Dieser kann in den Entwicklertools des Browser einfach überprüft werden. Perfekt wäre der AAA Standard, minimum sollte aber der AA Standard gewährleistet werden

Vorteile

• Bessere Lesbarkeit
• Grössere Zielgruppe
• Einhaltung von Vorschriften (Bsp. WCAG 2.1 )
  

Navigation durch Tastatur

Alle Bereiche einer Webseite sollten mit Hilfe der Tastatur erreichbar sein. Eine Navigation kann wie folgt umgesetzt werden.

<ul>
  <li tabindex="0">
    Menu Item 1
    <ul class="dropdown-content">
      <li tabindex="0">Sub Item 1</li>
      <li tabindex="0">Sub Item 2</li>
    </ul>
  </li>
  <li tabindex="0">Menu Item 2</li>
</ul>

document.querySelectorAll('li[tabindex="0"]').forEach((item) => {
  item.addEventListener("keypress", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      // Code to toggle dropdown
    }
  });
});

Vorteil

• Zugänglichkeit für alle
• Verbesserte Benutzerfreundlichkeit
• Einhalten von Standards

ALT Beschreibung für Bilder

Selbsterklärend ist natürlich, dass jedes Bild eine ALT Beschreibung erhalten sollte, die Auskunft über das Bild gibt.

<img src="apptiva-logo.png" alt="Apptiva's Logo" />

Vorteile

• Accessability
• SEO
• Fallback

Formulare

Bei Formularen können <label> mittels "for" und "id" einander zugwiesen werden. So erkennen Screenreader welche <label> zu welchen <input> Elementen gehören.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Submit</button>
</form>

Vorteile

• Klarheit und Kontext
• Handhabung von Fehler
• Tastaturnavigation

ARIA roles (Accessible Rich Internet Applications)

ARIA roles unterstützen die Benutzerfreundlichkeit für dynamische Komponente der Webseite. So können Elementen Rollen zugewiesen werden oder Zustände und Beziehungen zwischen Elementen definiert werden.

• Rollen
  • role
• Zustand:
  • aria-expanded
  • aria-checked
  • aria-hidden
• Beziehungen
  • aria-label
  • aria-labelledby
  • aria-describedby
• Widget (interaktive Element)
  • aria-autocomplete
  • aria-haspopup
• Live (News update)
  • aria-live
  • aria-atomic

aria-live="polite" weist darauf hin, dass Aktualisierungen dieser Region von Bildschirmlesern angekündigt werden sollten, die aktuelle Aufgabe jedoch nicht unterbrechen sollten.

Mehr Informationen zu diesem Thema findet man unter WAI-ARIA

Vorteile

• Verbessertes Bildschirmleserlebnis
• Grössere Interaktivität

Untertitel & Übersetzung

Videomaterial kann für weitere User zugänglich gemacht werden, indem man Untertitel zu dem Videomaterial hinzufügt.

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English" />
</video>

Testen

Es gibt verschiedene Möglichkeiten die Accessibility einer Webseite zu testen. Hier einige relevante Tools:

• Browser Entwicklertools
• Screenreader (Bsp. VoiceOver)
• Chrome Lighthouse
• Zugang für alle