Hierarchische Menüs mit CSS erstellen

Eines der wichtigsten Elemente eines Webauftritts ist das Menü. Das Menü hilft dem Nutzer dabei, sich in komplizierten Seitenstrukturen zurechtzufinden und um schnell an jeden gewünschten Punkt in dieser Hierarchie springen zu können.

Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.

Das barrierefreie CSS Menü

In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und CSS beruht und keine Verwendung von JavaScript macht. So soll es möglich sein, dass Menü auch dann noch bedienen zu können, wenn der Nutzer JavaScript oder gar CSS im Browser ausgeschaltet hat.

So sieht das fertige Menü aus

Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)
Mehr lesenHierarchische Menüs mit CSS erstellen

Nils wartet bis September

Und wir dürfen Ihn dabei beobachten. Eine wirklich klevere Aktion. Big Brother auf Ikea-Art. Wer schon immer mal wissen wollte, wie jemand sein Zimmer neu einrichtet, kann dies hier rund um die Uhr beobachten. Wer möchte, kann auch interaktiv eingreifen. Nils ist per Telefon, Email und Post erreichbar. Selbst eine Twitter Account wurde eingerichtet. AberMehr lesenNils wartet bis September

Ist display=“none“ jetzt irrelevant?

Beim Studieren der aktuellen HTML5 Spezifikation, ist mir ein neues Attribut aufgefallen, welches möglicherweise bald eine große Bedeutung bekommen könnte. Ich spreche hier vom Attribut irrelevant, welches allen HTML Elementen zugewiesen werden darf.

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

HTML 5 Draft Recommendation Screenshot

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)
Mehr lesenIst display=“none“ jetzt irrelevant?

Firefox3 kann jetzt auch schüchtern

Der Internet Explorer konnte ja schon seit Längerem schüchtern, doch nun ist auch der Firefox nachgezogen und kann jetzt ebenfalls schüchtern. Warum ich solch eine Schwachsinn schreibe? Okay, bevor mir jemand die Tastatur aus der Hand reißt… Was ich mit der Überschrift eigentlich sagen wollte: Firefox unterstützt in der Version 3 nun endlich auch SollumbrücheMehr lesenFirefox3 kann jetzt auch schüchtern

Back to Top