Hallo zusammen,
war schon ne Weile nicht mehr hier
Meine Webseite kommt langsam ins fünfte oder sechste Jahr seit der letzten codemäßigen Überarbeitung und seitdem hat sich einiges getan, insbesondere HTML5 ist jetzt an Bord. Hier möchte ich nun die Gelegenheit nutzen, semantisches HTML richtig einzusetzen und, deswegen hier in diesem Unterforum, von den scheinbar implementierten
Barrierefreiheitsfeatures zu profitieren, bisher kam ich "ohne" aus bzw. mit handgestrickten Sprungmarken etc, durchnavigieren mit Tastatur etc.
Hab ich bei
Peter Kröner geklaut, der seinerseits die HTML5-Spezifikation zitierte:
Zitat:
Authors must not use elements [...] for purposes other than their intended semantic purpose ...
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.
|
Okay, Divsuppe ist nicht mehr wenn man es richtig machen will. Kurz zum schematischen Aufbau meiner Seite:
Visuell siehe Bild
Codefolge in Beispielsschreibweise:
Code:
1. der übliche HTML <head></head>
2. Div wrapper (nur zum Umfassen und begrenzen) >sichtbarer Bereich
3. Div header
---- div skipbox für Sprunglinks (Inhalt, Navi, Suchfeld etc.)
---- Überschrift (immer gleich)
header Ende
4. div content
---- div toolbox ( mit Suchfeld, Druckversionsanzeige, Link Inhaltsübersicht etc.) - visuell in sidebar links
---- Überschrift mit Sprungmarke (Beginn Inhalt)
---- soweit vorhanden: Seiten- oder Bereichslinks (visuell verschoben nach sidebar links)
---- Artikeltext
Ende div content
5. div sidebar 2
6. ul navigation (wird visuell nach oben geschoben, seinerzeit wegen SEO und so)
7. div footer
Ende wrapper div
Eigentlich nichts Aufregendes. Mir geht es jetzt um mehrere Dinge:
Wie wirken sich die Barrierefreiheitsfeatures von HTML 5 und WAI-Aria aus ? Bilden HTML-Elemente wie "section", "article" oder "menu" natürliche Sprungmarken, sprich, kann Sprungmarkencode entfernt werden? Wie sieht es beispielsweise in einem klassischen Seitenmenü aus das als aria-attribut "role=tablist" hat? Die einzelnen Elemente entsprechend: "role=tab" oder wäre das überflüssig? Könnte man in so einer Tablist Prioritäten vergeben, etwa ...
Navi:
Bereich 1 (Hauptbereichsseite/Link) (4 untergeodnete Listenpunkte/Links)
Bereich 2 (Hauptbereichsseite/Link) (5 untergeodnete Listenpunkte/Links)
Bereich 3 (Hauptbereichsseite/Link) (6 untergeodnete Listenpunkte/Links)
usw.
die einen User von Hauptbereich zu Hauptbereich springen lassen ohne dass er alles durchtabben muss? Oder weiß ein tabbender User welchen Tab er dafür einsetzen könnte um das eine oder andere Ergebnis zu erzielen?
Welche Elemente würdet Ihr durch Elemente aus HTML 5 ersetzen?
Mein bisheriger Gedanke:
1. Artikelinhalt auch so auszeichnen, das heißt statt "Überschrift mit Sprungmarke" ein article-Element setzen mit darin enthaltener Überschrift und Inhalt. Nach Inhaltsende article natürlich schließen
2. Sidebar links: Hm, Seiten-und/oder bereichsspezifisch, die, soweit seitenspezifisch, innerhalb des contents (article) liegen. Wie würdet Ihr diese sidebar nennen? Gäbe es eine passende Auszeichnung dafür "aside" oder so obwohl der Inhalt manchmal einen direkten Bezug hat (seitenspezifische Navi, quasi Kapitelüberschriften)?
3. Sidebar rechts: "aside" richtig?
4. footer = footer, richtig?
Hinweis: Ich kann die Inhalte fast beliebig verschieben, da ich große Teile der Seite mit php zusammensetzen lasse, nur der eigentliche Artikelinhalt ist "fix".
Über Antworten würde ich mich freuen.