Weiter zum Hauptteil der Seite
Inqbus Inclusive Design

Titel wird geladen.

Der Inhalt wurde leider zurück gezogen

Wichtige Komponenten

Die Basisstruktur

Das folgende Schema zeigt die Basisstruktur einer Seite.

Jede dieser Strukturelemente ist optional, erfüllt aber einen wesentlichen Zweck. Man sieht die 4 wesentlichen Landmarks Header, Footer, Aside und Main, sowie die oben genannten Hilfen, die ausgezeichnete Navigation, der Shortcut zum Hauptteil und die Aria-Felder. Dabei müssen die Aria-Felder nicht zwingend im Header angeordnet sein.

Landmarks

Landmarks sind Kennzeichnungen für Bereiche mit einer bestimmten Aufgabe.

Header

Der Header ist ein statischer Bestandteil. Das bedeutet, er ist auf allen Seiten gleich. In der Regel beinhaltet er, neben eigenen Elementen wie dem Logo, die Navigation der Seite.

Main

Der Main-Bereich ist der Hauptteil der Seite. Hier ist der Inhalt der sich auf jeder Seite ändert abgelegt.

Aside

Ein Aside ist ein Seitentext, der auf mehreren Seiten vorkommt und sich nicht ändert. Er wird speziell gekennzeichnet, damit Nutzer ihn leicht überspringen können. Die Anordnung ist völlig flexibel. In der Regel wird er rechts oder links vom Hauptteil der Seite angeordnet um die Breite zu reduzieren und die Seite so angenehmer lesbar zu machen.

Footer

Der Footer ist wie der Header ein statischer Bestandteil am Ende der Seite.

Die Navigation

Die Navigation haben wir bereits in einem anderen Beispiel ausführlich beschrieben.

Shortcut zum Hauptteil der Seite

Ein Screenreader liest das HTML immer von oben nach unten. Damit Nutzer den Header, die Navigation und eventuell ein Aside schnell überspringen können, ist ein Link zum Hauptteil sehr praktisch. Mit diesem kann der Nutzer bei Bedarf statische Inhalte überspringen.

Aria Polite und Aria Assertive

Die Funktionsweise

Aria Polite und Aria Assertive sind spezielle Aria-Bereiche, die vom Screenreader gelesen werden, sobald sich ihre Inhalte ändern.

Der Unterschied

Während Aria Assertive den Screenreader unterbricht und die Nachricht direkt vorliest, wartet ein Aria Polite bis die aktuelle Ausgabe beendet ist. Beide verhalten sind an gewissen Stellen gewünscht. Wenn zum Beispiel eine Seite gewechselt wird, reicht ein Aria Polite, wie in unserem Beispiel Menü zu sehen ist. Wenn man hingegen einen Button ändert, wie bei unserem TriStateButton , dann soll der Nutzer direkt informiert werden, auch wenn eine andere Ausgabe noch vorgelesen wird.

Der Einbau

Diese speziellen Aria-Felder werden eingebaut, indem einem div spezielle Rollen und Attribute zugeordnet werden.

<div class="hidden_help_text" role="status" aria-live="polite" aria-relevant="all" aria-atomic="true" id="aria_polite">
Nachricht hier
</div>
<div class="hidden_help_text" role="status" aria-live="assertive" aria-relevant="all" aria-atomic="true" id="aria_assertive">
Nachricht hier
</div>

Dabei sollte es diese Bereiche nur einmal auf der Seite geben.

Überschriften

Für Überschriften gelten sehr einfache Regeln.

  1. Es gibt nur eine h1-Überschrift pro Seite.
  2. Alles was nach Überschrift aussieht, sollte eine Überschrift sein. Auch wenn es im Footer oder im Aside abgelegt ist.
  3. Die Reihenfolge der Überschriften muss passen. Auf eine h1-Überschrift darf nicht direkt eine h3-Überschrift folgen, sondern eine h2-Überschrift.
  4. Für den sehenden Nutzer sollte innerhalb eines Bereichs auf jeder Seite die Überschrift immer gleich gestyled sein.

Werden diese eingehalten, ist es für den sehenden und nichtsehenden Nutzer einfach der Struktur zu folgen.

Seitenaufbau im Detail

Wie das HTML aussehen kann

<body>
    <header class="header">
        <div class="hidden_help_text" role="status" aria-live="polite" aria-relevant="all" aria-atomic="true" id="aria_polite">
            Nachricht hier
        </div>
        <div class="hidden_help_text" role="status" aria-live="assertive" aria-relevant="all" aria-atomic="true" id="aria_assertive">
            Nachricht hier
        </div>
        <a href="#maincontent" class="hidden_help_text">Weiter zum Hauptteil der Seite</a>
        Inhalt
    </header>
    <main id="maincontent" class="main_content">
        <h1>Hauptüberschrift</h1>
        Inhalt
    </main>
    <aside>
        Inhalt
    </aside>
    <footer>
        Inhalt
    </footer>
</body>

Wie das CSS aussieht

.hidden_help_text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}