Onepager und Barrierefreiheit: Worauf Du achten solltest
· von Dennis Erdmann
Moin!
Und wie bei jedem Theme haben wir wieder versucht, die Messlatte ein wenig höher zu legen. Diesmal bei der Barrierefreiheit.
Denn TORNADO kommt sowohl als klassische Website als auch als Onepage-Variante. Und genau darum geht es heute: Barrierefreiheit und Onepager.
Vielleicht denkst Du jetzt: „Ist doch nur eine Seite. Was soll daran besonders sein?“
Auf den ersten Blick stimmt das. Aber wenn Leistungen, Über uns, Referenzen und Kontakt auf einer langen Seite stehen, müssen sich Deine Besucher:innen dort erstmal zurechtfinden. Auch ohne Maus. Und auch ohne die Seite sehen zu können.
1. Abschnitte statt Unterseiten
Bei einer klassischen Website hat jeder Bereich seine eigene Seite. Beim Onepager übernehmen die einzelnen Abschnitte diesen Job. Deshalb ist eine klare Überschriftenstruktur hier besonders wichtig.
Menschen, die einen Screenreader nutzen, nutzen auch echte HTML-Überschriften, um gezielt zwischen den Abschnitten springen zu können (ein Text, den Du lediglich groß und fett gestaltest, bietet diese Möglichkeit nicht).
Achte deshalb auf die Überschriftenebenen. Wähle sie passend zur inhaltlichen Struktur (statt danach, welche Schriftgröße optisch gut passt).
2. Ein Menüklick ist kein Seitenwechsel
Bei der Multipage-Variante öffnet „Kontakt“ eine neue Seite. Beim Onepager springt die Ansicht zum Kontaktbereich weiter unten.
Das sollte auch mit der Tastatur sinnvoll funktionieren. Denn wenn die Ansicht nach unten wandert, die Tastaturbedienung aber oben im Menü weitergeht, wird es schnell verwirrend.
Teste deshalb nach einem Menüsprung direkt mit der Tab-Taste weiter: Geht es am Ziel weiter oder in der Navigation?
3. Ein feststehendes Menü braucht Platz
Gerade bei langen Onepagern ist es praktisch, wenn die Navigation am oberen Bildschirmrand stehen bleibt. Weniger praktisch ist es, wenn die Überschrift nach einem Sprung dahinter verschwindet.
Auch Links und Formularfelder, die Du mit der Tastatur auswählst, sollten sichtbar bleiben. Prüfe das besonders dann, wenn Du die Darstellung vergrößerst oder die Höhe des Kopfbereichs anpasst. Zum Beispiel, weil Dein Logo mehr Platz braucht.
4. Scrollen muss keine Achterbahnfahrt sein
Parallax-Effekte, einfliegende Texte und lange Scroll-Animationen passen optisch vielleicht wunderbar zu Deinem Onepager. Für Menschen, die empfindlich auf Bewegung reagieren, können sie allerdings unangenehm sein.
Berücksichtige deshalb die Systemeinstellung für reduzierte Bewegung. Achte darauf, dass alle Inhalte auch ohne diese Animationen erreichbar und lesbar bleiben.
5. Der Weg nach unten kann lang werden
Mit der Maus bist Du schnell beim Kontaktformular. Mit der Tab-Taste musst Du vorher vielleicht durch sämtliche verlinkte Leistungen, Referenzen und Teamprofile.
Gut erreichbare Sprunglinks können solche Wege abkürzen. Zusammen mit einer sinnvollen Überschriftenstruktur helfen sie dabei, gezielt zu den wichtigen Bereichen zu gelangen.
Diese Besonderheiten haben wir bei der Entwicklung von TORNADO im Blick gehabt und versucht, möglichst viel davon umzusetzen. Offene Punkte benennen wir auf der Seite Barrierefreiheit.
Mein Tipp: Leg die Maus kurz zur Seite und teste Deine Website mit Tab, Umschalt + Tab und Enter. Kommst Du überall hin? Siehst Du, welches Element gerade ausgewählt ist? Und kannst Du nach einem Menüsprung sinnvoll weitermachen?
Das ersetzt keinen vollständigen Barrierefreiheitstest. Aber Du merkst ziemlich schnell, wo es hakt.
Und falls Du TORNADO für Dein nächstes Projekt einsetzen möchtest: Nur noch heute, Dienstag, gilt unser Einstiegsangebot mit 20% Rabatt:
Ob klassische Website oder Onepager – beide Varianten sind dabei. 😉
Erstma',
Dennis
PS: Verbesserungen für die Barrierefreiheit werden wir bald auch in SIRIUS nachziehen.