sprungmarker testet

Anlässlich des alljährlichen Blue Beanie Day  – am 30. November – bat mich Robert Lender, ihm 2 Fragen zu beantworten:

• Wie beurteile ich HTML 5 (Vorteile / Nachteile)?
• Ist HTML 5 auch förderlich für die Barrierefreiheit im Web?

Aufgrund von HTML 5 als W3C Recommendation bietet sich ein Rückblick auf nun schon fast ein Jahrzehnt HTML 5 Entwicklung an. 

Wie beurteile ich HTML5 (Vorteile / Nachteile)

Im Grunde gibt es nur Vorteile durch HTML 5. Endlich hat sich eine Semantik entwickelt, die sich an die realen Bedürfnisse im Web anpasst. Eine Semantik, die sich auf den ersten Blick schnell erschließt: Den Kopf der Webseite als header, den Fuss als footer und der Hauptinhalt als main. Natürlich geht es auch kleinteiliger. So kennzeichnet sich die Hauptnavigation mit nav, eine inhaltliche Einheit als article aus und Bild und Bildbeschreibung finden sich unter der semantischen Struktur figure und figcaption wieder.

Durch die neue semantische Vielfalt wird es aber auch komplizierter. Das fängt mit dem header Element an, das mehrfach verwendet werden kann und lässt ganze Diskussionsforen über Semantik und Einsatz des section Elements streiten. Vor HTML 5 war die Semantik begrenzt und nicht auf ganze Semantik-Gebäude ausgerichtet. Nun können wir Webseiten quasi semantisch durch konzeptionieren. Aber wie macht man das so genau? Das W3C und die WHATWG bieten zwar für jedes Element immer auch ein Beispiel, aber letztlich sitzt man vor seiner Webseite und bedient sich aus dem semantischen Werkzeugkasten.

Schnell haben sich daraus dann populäre Blogsysteme wie WordPress für ihr Default-Theme ein Semantik-Gerüst gebaut. Etliche Webstandards-Seiten wie HTML5 Doctor haben die dann noch getuned. Es war richtig spannend zu sehen, was sich wie am besten und sinnvollsten inhaltlich strukturieren lässt. Wie stark lässt sich das aside Element dehnen. Hat man vor HTML 5 schon immer unter die Haube von Webseiten geguckt, macht man das seit HTML 5 mit schöner Gewohnheit und Regelmäßigkeit. Da sich die Semantik weiterentwickelt – HTML 5 ist ja nun living standard, entwickelt sich also am lebenden Beispiel weiter – , ändern sich auch die semantischen Gebäude. Also vergewissert man sich immer wieder, ob das eigene semantische Gerüst noch stimmig genug ist. Die Frage ist heute nicht mehr, ist das Gerüst auch korrekt. Oder man erhält Anregungen, die man für sich und mit anderen diskutieren kann wie letzthin am Accessibility Summit 2014, als Becky Gibson in ihrem Vortrag zur HTML 5 Accessibility für typische Teaser den Mehr-Link mit dem aside Element gekennzeichnet hat.

Man ist heute als Semantiker und Entwickler stärker gefordert, mit HTML 5 an semantische Grenzen zu gehen. In einem W3C Kurs sollte ich eine HTML 5 Seite responsive erstellen und hatte als Rückmeldung erhalten, meine Seite sei übersemantisch. Gut, ich hatte versucht, eben auch mal einen semantischen Grenzgang zu wagen. 🙂 Aber genau diese Gratwanderung ist spannend.

Ist HTML 5 auch förderlich für die Barrierefreiheit im Web?

Semantik ist nach wie vor der Grundstein für die Barrierefreiheit im Web oder wie es Shawn Lauriat auf dem Accessibility Summit 2014 in seiner Präsentation Accessibility Challenges in Complex Web Applications so schön verrechnet hat: Es gilt beim semantischen Einsatz von HTML 5 das 90/10 Verhältnis. 10% semantische Entwicklungsarbeit und 90% Semantik gibt es gratis frei Haus. Schnürt man noch WAI-ARIA dazu, hat man etwas mehr Entwicklungsarbeit, aber noch mehr gratis Semantik – vor allem für Screenreader-Nutzer. Das rechnerische Verhältnis für WAI-ARIA ist dann – so Lauriat – 40/60. Immer noch ein sehr guter Schnitt. 🙂

Die semantische Gratwanderung mit HTML 5 ist natürlich auch steinig – sieht man sich aktuelle Webseiten an, findet man eher semantischen Wildwuchs. Vielfach wird ohnehin auf HTML 5 Semantik verzichtet, sondern nur der HTML5-Doctype – Marke HTML 5 Alibi – eingesetzt. Da, wo die HTML Semantik dann tapfer eingesetzt wird, kommt sie meist über header und footer Element nicht hinaus. Schon bei der Hauptnavigation beginnt die erste semantische Klippe. Man findet nicht wenige Seiten, die fünf und mehr nav Elemente einsetzen. Gut, die HTML 5 Spezifikation gibt da nur Empfehlungen. Aber hier schließt sich die Argumentation zum Thema Barrierefreiheit: Nicht jede Linkliste ist eine wichtige Navigation. Im Grunde sollte nur die Hauptnavigation der Webseite mit dem nav Element gekennzeichnet werden.

Das section Element hat kaum jemand verstanden und hat schlicht die Divitis – den Übereinsatz des div Elements –  ersetzt. Oder wie Roger Johansson schon 2012 für den semantischen Einsatz von HTML 5 summierte:

Articleitis, sectionitis and headeritis are the new divitis.

Quelle: Roger Johansson – Twitter

Ähnliche Probleme bereitet auch der Einsatz von WAI-ARIA. Selbst die vergleichsweise einfach einzusetzenden role Attribute wie  banner oder main werden entweder gar nicht eingesetzt oder nicht wirklich auf passenden inhaltlichen Bereichen. Jared Smith hat das ausführlich in seiner Präsentation ARIA Gone Even Wilder auf dem Accessibility Summit 2014 dargestellt: ARIA wird häufig anstatt herkömmlicher Semantik verwendet und dann auch oftmals mit falschen roles. Ähnliches lässt sich für das placeholder Attribut aus der wunderbaren Welt der HTML 5 Formulare feststellen: Kaum war das neue Attribut da, hat man schon die herkömmliche Formular-Semantik fallen gelassen und damit  das label Element. Ein placeholder tut es doch auch – nur dass sich dabei keiner erinnert oder mal nachblättert, was die Funktion des placeholder Attribute eigentlich ist: nämlich einen zusätzlichen Hinweis bei der Eingabe in ein Formularfeld zu geben –  etwa welches Format ein Datum haben sollte.

Im Grunde wird es nicht einfacher werden – weder mit HTML 5 noch mit der dadurch erzeugbaren Semantik. Aber das soll nicht heißen, wir lassen das lieber mit der Semantik. Was wir weiterhin brauchen werden – mehr Best Practice Beispiele, mehr Unter-die-Haube-Gucken auch beim semantischen Wildwuchs und sich Gedanken darüber machen, wie man semantische Problemstellen und wacklige Semantik-Gebäude optimieren kann.

Auch dafür ist der Blue Beanie Day da. Uns immer wieder daran zu erinnern, dass das Web diversity – Vielfalt – bedeutet – ist ja auch mit dem Pony von My Little Pony Motto des diesjährigen Blue Beanie Day. Und so vielfältig wie das Web, so vielfältig ist der Einsatz von Semantik im Web. Unsere Aufgabe als Entwickler ist es, eine sinnvolle und vielfältige Semantik für möglichst alle zu integrieren. Dafür setzen wir gerne morgen wieder eine blaue Haube auf.