Erstellen von Landmarken (HTML5, ARIA)
Landmarken sind vordefinierte Teile des Layouts, zum Beispiel <header>
, <nav>
oder <main>
und <footer>
usw
Verwenden Sie entweder HTML5-Landmarks oder deren ARIA-Entsprechungen.
Hier findet ihr eine Liste mit HTML5-Punkten und ihren ARIA-Entsprechungen
Die Zuordnung von ARIA-Rollen und HTML5-Elementen ist nicht genau. Die beiden Spezifikationen haben unterschiedliche Ziele. Die folgende Tabelle zeigt, wo es Gemeinsamkeiten gibt.
HTML5 | ARIA-Rolle | Von den meisten Screenreadern als Orientierungspunkt aufgeführt |
---|---|---|
<header> | role=“banner” | Ja |
<nav> | role=“navigation” | Ja |
n/a | role=“search” | Ja |
<main> | role=“main” | Ja |
<footer> | role=“contentinfo” | Ja |
<aside> | role=“complementary” | Ja |
<section> | role=“region” | Die meisten Bildschirmleseprogramme zeigen sie nur an, wenn ihnen ein Name gegeben wird. Benutzer von Bildschirmleseprogrammen können sich anhand von Überschriften durch den Text bewegen. Deshalb muss man nicht jedem Abschnitt oder jeder Region einen Namen geben. Es ist sogar schlecht, zu viele Orientierungspunkte auf einer Seite anzugeben, weil das den Benutzer verwirrt. |
<article> | role=“article” | JAWS listet es auf, andere Programme aber nicht. |
<form> | role=“form” | Gemischte Unterstützung: Bildschirmleseprogramme listen Formulare nur auf, wenn sie als role=„form“ markiert sind
(das |
Die nützlichsten Elemente sind Header/Banner, Nav/Navigation, Main und Footer/Contentinfo. Die anderen können ebenfalls verwendet werden, sind aber nicht so weit verbreitet.