zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Ältere Webseite auf/mit HTML 5 umbauen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.08.2015, 15:45
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard Ä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:

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.
Angehängte Grafiken
Dateityp: jpg seitenbeispiel-visuell.jpg (40,6 KB, 76x aufgerufen)
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.08.2015, 16:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.08.2015, 17:04
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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

Zitat:
Wie wirken sich die Barrierefreiheitsfeatures von HTML 5 (welche sollen das sein ausser der vorgegebenen Semantik welches es für User einfacher machen zu bestimmten Inhalten zu kommen oder diese zu bewerten?) und WAI-Aria aus ? Bilden HTML5 -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 ...
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
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #4 (permalink)  
Alt 21.08.2015, 08:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.654
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Okay, Divsuppe ist nicht mehr
War es auch nie. Wer es trotzdem verwendet hat, war einfach zu faul, sich mit HTML auseinanderzusetzen


Zitat:
Zitat von andir Beitrag anzeigen
3. Div header
4. div content
5. div sidebar 2
7. div footer
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?

Zitat:
Zitat von andir Beitrag anzeigen
6. ul navigation (
Zugegeben, das ist kein div, aber wieso keine Navigation hier? Oder ist das nur eine unwichtige Navigation und die <nav> befindet sich im header?

Zitat:
Zitat von andir Beitrag anzeigen
Bilden HTML-Elemente wie "section", "article" oder "menu" natürliche Sprungmarken,
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.

Zitat:
Zitat von andir Beitrag anzeigen
Oder weiß ein tabbender User welchen Tab er dafür einsetzen könnte
Ich habe auf meiner Tastatur nur einen Tab, was für eine Tastatur verwendest du, dass du mehrere hast?

Zitat:
Zitat von andir Beitrag anzeigen
3. Sidebar rechts: "aside" richtig?
Wenn das zutrifft, dann ja.
Mit Zitat antworten
  #5 (permalink)  
Alt 23.08.2015, 22:01
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
War es auch nie. Wer es trotzdem verwendet hat, war einfach zu faul, sich mit HTML auseinanderzusetzen

Ähja, 2009 (die letzte grundlegende Revision der Seite) steckte HTML5 noch in den Kinderschuhen (Draft 1 oder 2) und IE6 war noch recht wichtig mit damals 15% Anteil.

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?

Wie gesagt, das ist die vereinfachte Struktur der zu überarbeitenden Seite

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

Siehe oben.


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 weiß was ein Screenreader ist und die alte Seite wurde im Rahmen meiner Möglichkeiten dafür bearbeitet. Ich habe meine 5000 Posts hier nicht nur im Offtopic verbracht.

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

Was ich nicht weiß ist, ob innerhalb der letzten Jahre Möglichkeiten, z.B. für Screenreader, hinzugetreten sind, die es den Nutzern erleichtern mittels diverser Tastatureingaben direkt bestimmte Ziele anzuspringen ohne von Links abhängig zu sein oder von Überschriften. Deswegen meine (Praxis-)Nachfrage.

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 .
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #6 (permalink)  
Alt 18.09.2015, 20:17
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Ort: Bad Liebenzell
Beiträge: 1.495
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von andir Beitrag anzeigen
... 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 ...
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...
Code:
...

<nav role="navigation" id="skiplinks">
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
</nav>

<header role="banner" id="head">
  <h1>...</h1>
</header>

<main role="main" id="main">
  <section>
    <article id="a1">
				
          ...content...
          
    </article>
  </section>
</main>

<aside role="complementary" id="column">
  <section id="sidenav">
    <ul>
      <li>navpoint 1</li>
      <li>navpoint 2</li>
    </ul>  
  </section>
</aside>

<footer role="contentinfo">
  <p>...nach oben...123mei...oder...als..liste</p>
</footer>

...
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.
__________________
Personal stuff

Geändert von laborix (18.09.2015 um 20:18 Uhr) Grund: Rechtschreibung
Mit Zitat antworten
  #7 (permalink)  
Alt 19.09.2015, 01:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
man möge mich verbessern
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
Mit Zitat antworten
  #8 (permalink)  
Alt 19.09.2015, 08:39
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Ort: Bad Liebenzell
Beiträge: 1.495
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
... Die Skiplinks hast du noch nicht so recht verstanden. Mit dem nav-Element vertragen sie sich in der Regel nicht. ...
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.
__________________
Personal stuff

Geändert von laborix (19.09.2015 um 08:44 Uhr) Grund: Rechtschreibung
Mit Zitat antworten
  #9 (permalink)  
Alt 21.09.2015, 23:13
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hier passiert ja was
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

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
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.09.2015, 21:00
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Ort: Bad Liebenzell
Beiträge: 1.495
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von andir Beitrag anzeigen
... Danke für die Rückmeldungen ...
Bitte, gerne.

Erinnert mich gerade daran das ich meine Hauptdomain auch mal angehen sollte
__________________
Personal stuff
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[XHTML] HTML Kompatibilitätsrichtlinen 2.0a1 gato (X)HTML 9 18.11.2007 12:28
CSE HTML Validator Standard Anschaffung wert? DieterWelzel Offtopic 10 17.08.2007 17:02
XHTML webseite bauen aber wie? bin ein noob was XHTML angeht. Mysteryxxx (X)HTML 6 11.11.2006 23:37
Ältere Screenreader Dieter Barrierefreiheit 2 16.09.2006 12:13
HTML Code auf Webseite darstellen Lloyd Larkin Offtopic 7 18.07.2006 16:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:41 Uhr.