Ältere Webseite auf/mit HTML 5 umbauen
 

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:

Okay, Divsuppe ist nicht mehr wenn man es richtig machen will. Kurz zum schematischen Aufbau meiner Seite:

Visuell siehe Bild

http://xhtmlforum.de/attachment.php?...1&d=1440078001

Codefolge in Beispielsschreibweise:
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.

Hallo,

du hast leider falsche Vorstellungen von dem Inhalt der Begriffe wie HTML5, Barrierefreiheit und so weiter.

Der Umstieg auf HTML5 lohnt sich in jedem Fall. Die Vorteile liegen jedoch teilweise an anderer Stelle als von dir vermutet.

Ich empfehle dir deshalb dich mit den Grundlagen von HTML5 / CSS3 / Barrierefreiheit zu beschäftigen. Damit sind wir im Rahmen des Forums überfordert und dazu gibt es jede Menge frei zugängliche oder auch kostenpflichtige Informationen und Literatur.

Ich gehe mal nicht davon aus, das du Rechtfertigungen suchst um HTML5 "guten Gewissens" ablehnen zu können.

Gruss

MrMurphy

Ich fürchte ich habe meine Frage zu ungenau oder zu ausschweifend formuliert, deswegen dampfe ich das mal ein und ergänze:

Das ist eine Frage der Praxis. Sollte niemand hier Kenntnis davon haben, dann ist es so. Bis dahin frage ich.

Daran anschließend die zweite Frage, welches HTML-Element an den genannten Stellen sinnvoll wäre. Das kann das Forum bestimmt :)

War es auch nie. Wer es trotzdem verwendet hat, war einfach zu faul, sich mit HTML auseinanderzusetzen :)


Und da sind wir wieder bei der div-Suppe. Wieso hältst du dich nicht an das, was du ein, zwei Absätze weiter oben geschrieben hast?

Zugegeben, das ist kein div, aber wieso keine Navigation hier? Oder ist das nur eine unwichtige Navigation und die <nav> befindet sich im header?

Was hindert dich daran, es auszuprobieren. Öffne eine Seite in deinem Browser und springe zu den einzelnen HTML5 Elementen. Damit sollte diese Frage beantwortet sein. Zusatz: Es gibt nicht nur die grafischen Browser sondern acuh Screenreader, etc.
Eine zusätzliche Lektüre dazu (wasMrMurphy im ersten Post gemeint hat). Ja, das ist viel, deshalb hat er auch gesagt, dass das den Rahmen des Forums sprengt.

Ich habe auf meiner Tastatur nur einen Tab, was für eine Tastatur verwendest du, dass du mehrere hast?

Wenn das zutrifft, dann ja.

Da WAI-Aria auch erst seit 2014 den Status einer Empfehlung hat, werde ich das jetzt einbauen, sofern die Verwendung bestimmter HTML(5) Elemente das nicht überflüssig macht.

In ein paar Tagen werde ich eine überarbeitete (neue) Struktur präsentieren, dann habt Ihr /Du was dran zu beißen :) .

Hallo andir,

lange her und selber lange nicht mehr hier gewesen :)

Schau dir mal das Buch "Flexible Boxes" von Peter Müller an, ich glaube er ist dir bekannt.

Damit habe ich mir ein HTML5 und WAI-Aria Gerüst zusammengestrickt...
Mehr musst du meines Erachtens (man möge mich verbessern) nicht tun um auch Screenreader, Tastatur oder ähnliches abzufangen.

Das Buch von Peter Müller ist unabhängig davon sehr interessant für HTML5, CSS3 und Response Web.

Hallo

Solche Einladungen soll man nicht ausschlagen.

Nur mal zwei Anmerkungen.

Nur mal als zusätzlichen Hinweis: Die "ARIA Landmark Roles" sollten nur verwendet werden, wenn das damit ausgezeichnete Element auch die entsprechenden Inhalte enthält. Ohne konkreten Inhalt läßt sich das natürlich nicht beurteilen.

Und:

Die Skiplinks hast du noch nicht so recht verstanden. Mit dem nav-Element vertragen sie sich in der Regel nicht. Für die Skiplinks gibt es kein spezielles HTML-Element, so dass ein div am geeignetsten erscheint.

Skiplinks sollen bestimmten Anwendern die Navigation erleichtern und Abschnitte schnell ansteuern lassen, die erfahrungsgemäß auf einer Homepage am häufigsten gesucht werden.

Gruss

MrMurphy

Skiplinks auf mobile Phones, früher per Liste, heute per JS-Library. Früher gab es eine Empfehlung JS aus Sicherheitsgründen abzuschalten, heute geht HTML5 mit allen Extras ohne JS nicht. Nur gibt es in vielen JS-Websites keinen noscript-Bereich, viel zu aufwendig. Einer der Gründe warum Skiplinks ruhig als Liste mit nav-Element eingesetzt werden können.

Mal eine kurze Frage, nur so nebenbei. Hast du mal mit beeinträchtigten Menschen (siehe Lebenshilfe e.V.) gearbeitet oder gar mit einem Screenreader? Wenn ja, siehst du eine Website mit anderen Augen, denn diese Menschen wollen genauso wie wir auch das Internet nutzen.

Hier passiert ja was :D
Danke für die Rückmeldungen :)

Ich versuche für wesentliche Anwendungsbereiche ohne JS auszukommen. Skiplinks verwende ich bereits und werde ich auch weiter verwenden müssen.
Tabindizierung (tabindex) habe ich für mich derzeit ausgeschlossen, der Nachteil, alles auszeichnen zu müssen, wiegt schwer und rechtfertigt nicht den Vorteil.

Danke für den Hinweis auf (den bekannten) Peter Müller, ein echter Erklärbär :D

Tatsächlich ist es im Prinzip nicht schwer - war es auch bisher nicht - aber im Detail spannend. Hab jetzt erstmal ein anderes Projekt abgeschlossen wo ich der Einäugige unter den Blinden bin :)

Bitte, gerne.

Erinnert mich gerade daran das ich meine Hauptdomain auch mal angehen sollte :oops: