Semantisches HTML und ARIA (Accessible Rich Internet Applications) sind beides wichtige Werkzeuge, um Webinhalte für alle Nutzer zugänglich zu machen, auch für diejenigen, die auf Hilfstechnologien wie Screenreader angewiesen sind.

Wichtig: Bitte beachte, dass die Informationen in diesem Artikel nur Vorschläge sind und keine Rechtsberatung darstellen. Jegliche Haftung im Zusammenhang mit der Nutzung der bereitgestellten Information ist ausgeschlossen. Es wird keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der Informationen übernommen. Wir raten dir, dass du dich bei Unklarheiten oder Fragen rechtlich beraten lässt.

Semantisches HTML

Semantisches HTML gibt eindeutig an, welche Art von Inhalt ein Element anzeigt.

Schauen wir uns das Navigationselement (Menü) an: 

Du könntest es folgendermaßen aufsetzen, was zwar korrekt funktionieren würde, aber nicht semantisch wäre, weil uns <div> nichts über den Inhalt verrät: 

  <div id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

Damit es semantisch ist, würdest du es so aufsetzen: 

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

Das sagt uns explizit, dass der darauffolgende Inhalt eine Navigation bzw. ein Menü sein soll. 

Ein weiteres Beispiel ist das Button-Element: 

Wenn <div> genutzt wird, gibt es weder eine inhärente Bedeutung noch ein Verhalten. Und obwohl es wie ein Button aussieht und funktioniert, fehlt es an Barrierefreiheit, Tastatur-Unterstützung und semantischer Bedeutung, wenn es nicht manuell mit ARIA-Rollen und einer Tastatur-Handhabe erweitert wird.

<div class=”button”>

Klick mich an

</div>

Für nützliches und semantisches HTML würdest du einen Button so aufsetzen: 

<button> Klick mich an </button>

Wichtige Anmerkung: Wenn du zu einer anderen Seite navigieren möchtest (z.B. einer Kontakt-Seite), solltest du ein <a> (anchor) Element mit href-Attribut statt <button> nutzen.

Ein <button> ist für Aktionen wie Formulare abschicken oder das Auslösen einer JavaScript-Funktion gedacht, aber unterstützt nicht das href-Attribut (welches dem Browser sagt, wo der Link hingeht). In diesem Fall nutzt man: 

<a class="button" href="/contact">Kontakt</a>

Wenn Websites mit semantischen HTML aufgebaut werden, 

1. Verbessert das die Unterstützung von Screenreadern: Semantische Elemente liefern den Kontext für unterstützende Technologien.
2. Wird die Navigation über die Tastatur verbessert: Browser und Hilfstechnologien können eine bessere Navigation bieten, da die Struktur der Website klar ist. Außerdem enthalten native HTML-Elemente bereits barrierefreie Funktionen. Zum Beispiel ist ein <button> automatisch auswählbar und klickbar und hat bereits die implizite Rolle “Button”.
3. Wird SEO unterstützt: Der Aufbau macht es einfacher für Suchmaschinen, die Website zu verstehen. 

ARIA 

ARIA (Accessible Rich Internet Applications) ist eine Kombination aus Rollen und Attributen, die festlegen, wie Web-Inhalte und Web-Anwendungen besser zugänglich gemacht werden können, insbesondere für dynamische Inhalte und benutzerdefinierte Komponenten, die keine native HTML-Semantik verwenden (können).

ARIA-Rollen verleihen Inhalten eine semantische Bedeutung, sodass Screenreader und andere Tools die Interaktion mit einem Objekt auf eine Weise darstellen und unterstützen können, die den Erwartungen der Benutzer an diese Art von Objekt entspricht. ARIA-Rollen können verwendet werden, um Elemente zu beschreiben, die nicht im semantischen HTML vorhanden sind oder vorhanden sind, aber noch nicht vollständig vom Browser unterstützt werden. 

Zum Beispiel, kannst du einem Container die Rolle “Dialog” geben, wenn es ein Overlay ist, damit die Hilfstechnologien verstehen, dass sich dieses Modul über dem normalen Seiteninhalt öffnet. 

ARIA-Attribute ermöglichen es, den Zustand und die Eigenschaften eines Elements so zu beschreiben, dass der Inhalt für die Besucher entsprechend mit Hilfstechnologien dargestellt werden kann. ARIA ändert allerdings nichts an der Funktion oder dem Verhalten eines Elements, sondern ist nur beschreibend. Wenn semantische HTML-Elemente nicht genutzt werden (können), muss JavaScript verwendet werden, um Verhalten, Fokus und ARIA-Zustände zu verwalten. 

Ein Beispiel für ein Attribut, das häufig Verwendung finden kann, sind ARIA-Label. Du kannst ARIA-Labels verwenden, um weitere Informationen bereitzustellen und die Funktion oder den Zweck eines Elements zu beschreiben, z. B. für eine Button „Absenden“ in einem Formular kannst du folgendes nutzen:

<button aria-label="Formular absenden">Absenden</button>

Ein anderes Beispiel, das sich eher auf Zustände bezieht, wäre wenn du ein Akkordeon hast und das ARIA-Attribut aria-expanded beschreibt, ob ein Trigger aufgeklappt oder zugeklappt ist und ob der zugehörige Inhalt ein- oder ausgeblendet ist. Wie bereits erwähnt, handelt es sich hierbei jedoch nur um eine Beschreibung des aktuellen Zustandes, nicht aber um die Funktionalität des Ein- und Ausklappens.

Zusammengefasst: ARIA erweitert semantisches HTML und wird dort eingesetzt, wo semantisches HTML nicht zur Verfügung steht oder nicht ausreicht. Es soll Hilfstechnologien dabei unterstützen, den Inhalt und den Zustand von Elementen besser auszulesen, um so die Barrierefreiheit der Website zu verbessern. Wichtiger Hinweis: Wenn du das korrekte semantische HTML verwendest, solltest du keine gleichwertigen ARIA-Rollen oder -Attribute hinzufügen, z. B. für <button> nicht noch role="button" nutzen, da dies unnötig ist und sogar zu Verwirrung führen kann.

Bei einigen Templates und Sections haben wir bereits ARIA-Rollen und -Attribute hinterlegt und arbeiten daran, dass es bei allen der Fall ist. 

Außerdem gibt es bei Container-Einstellungen Barrierefreiheitsoptionen, die es dir ermöglichen, ARIA-Rollen und -Label zu setzen, welche dann mit korrektem HTML und ARIA-Rollen und -Attribute eingefügt werden. Du kannst außerdem selber ARIA-Rollen und -Attribute im Code hinterlegen. Bitte beachte, dass die korrekte Nutzung und Implementierung von ARIA notwendig ist, um die Barrierefreiheit zu verbessern. Dafür findest du hier hilfreiche Anleitungen und Erklärungen: 

• https://www.w3.org/WAI/ARIA/apg/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA 

Werde ein Teil unserer Community!

Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und präsentiere deine Lieblingsseiten. Hole dir Feedback und sprich mit uns über Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt zur Sitejetters Community.