5 HTML5- und ARIA-Entwurfsmuster

1. Hauptelement-Entwurfsmuster

Ein Entwurfsmuster für die grundlegende Seitenarchitektur.

  1. < Körper >
  2. ...
  3. ...
  4. ...
  5. ...
  6. ...
  7. Körper >

Das Hauptelement ist eine der neuesten Ergänzungen der HTML5-Spezifikation. Es repräsentiert den Hauptinhaltsbereich einer Seite. In Kombination mit anderen HTML5-Elementen wie Kopf- und Fußzeile ist dies ein effektives Entwurfsmuster für die grundlegende Seitenstruktur.

Eine Seite darf nur ein Hauptelement enthalten. Die HTML5.1-Spezifikation ist diesbezüglich eindeutig:



'Autoren dürfen nicht mehr als ein Hauptelement in ein Dokument aufnehmen.'

Das Hauptelement sollte Inhalte enthalten, die für die Seite eindeutig sind. Mit anderen Worten, es sollte keinen Inhalt enthalten, der auf der Website oder in der Anwendung wiederholt wird. In diesem Entwurfsmuster würden wiederholte Inhalte wie das Logo in das Kopfzeilenelement und Site-Informationen wie Copyright oder Kleingedrucktes in die Fußzeile gelangen.

Das Rolle der Haupt ist nativ mit dem Hauptelement in HTML5 verknüpft. ARIA anwenden Rolle = 'Haupt' Direkt im HTML ist daher eine 'Gürtel und Klammern' -Technik. Es teilt Browsern und unterstützenden Technologien, die das Hauptelement nicht unterstützen (aber ARIA-Orientierungspunktrollen unterstützen), mit, dass sie alles innerhalb des enthaltenen Elements als Hauptinhalt der Seite behandeln sollen.

Hinweis: Verwenden Sie wie im Beispiel nur die Banner und contentinfo Rollen in Kopf- und Fußzeile, wenn sie sich auf das Körperelement beziehen.

Ein Vorteil dieses Entwurfsmusters besteht darin, dass möglicherweise in Zukunft keine Sprunglinks mehr benötigt werden. Derzeit (und auf absehbare Zeit) müssen diese Tastaturkürzel manuell implementiert werden. Die HTML5.1-Spezifikation ermutigt Browser und unterstützende Technologien, eine Tastaturnavigation einzuführen, die sich direkt auf das Hauptelement konzentriert. Mit der Zeit kann dies bedeuten, dass das Überspringen von Links der Vergangenheit angehört.

xara Foto & Grafikdesigner Bewertung

2. Navigationsmuster

Ein Entwurfsmuster für primäre und sekundäre Navigationsblöcke.

  1. < das >
  2. < Bei der >< zu href = 'home.html'> Homezu >Bei der >
  3. < Bei der >< zu href = 'about.html'> Über unszu >Bei der >
  4. < Bei der >< zu href = 'contact.html'> Kontaktieren Sie unszu >Bei der >
  5. das >

Das kein Element stellt einen Bereich einer Seite dar, der Navigationslinks enthält, entweder als Sammlung oder als Teil anderer Inhalte. Ein häufiges Missverständnis ist, dass die sind nicht Element sollte für jede Gruppe von Links auf einer Seite verwendet werden, aber das HTML5.1-Spezifikation macht deutlich, dass dies nicht der Fall ist:

'Nicht alle Gruppen von Links auf einer Seite müssen sich in a befinden sind nicht Element - Das Element ist hauptsächlich für Abschnitte gedacht, die aus Hauptnavigationsblöcken bestehen. '

Das sind nicht und das Elemente erfüllen unterschiedliche Zwecke, so dass die sind nicht Element erweitert (anstatt zu ersetzen) das traditionelle das basiertes Entwurfsmuster. Das sind nicht Element teilt Browsern und unterstützenden Technologien mit, dass dieser Bereich der Seite zum Zwecke der Navigation dient, und das das element macht das, was es immer macht (gruppiert eine Sammlung von Elementen zusammen).

Das Rolle der Navigation ist nativ mit dem verbunden sind nicht Element in HTML5. ARIA anwenden Rolle = 'Navigation' Direkt im HTML ist daher die gleiche 'Gürtel und Hosenträger' -Technik, die im Hauptentwurfsmuster verwendet wird.

3. Schnittentwurfsmuster

Ein Entwurfsmuster für Regionen, die thematische Inhalte gruppieren.

  1. < h1 id = 'Überschrift'> Wetterberichth1 >
  2. ...

Wenn das Abschnittselement keine Überschrift enthält, kann das Aria-Label-Element verwendet werden:

  1. ..... .....

Das Abschnittselement repräsentiert einen generischen Bereich einer Seite. Es wird oft angenommen, dass das Abschnittselement für jeden Teil des Inhalts verwendet werden sollte, der noch nicht von einem der anderen HTML5-Abschnittselemente verarbeitet wurde. Die HTML5.1-Spezifikation erklärt Folgendes:

So bearbeiten Sie Gifs in Photoshop

'Das Abschnittselement ist kein generisches Containerelement. Wenn ein Element nur für Stylingzwecke oder als Annehmlichkeit für die Skripterstellung benötigt wird, wird den Autoren empfohlen, das zu verwenden div Element stattdessen. '

Das Region Rolle ist nativ mit dem Abschnittselement in HTML5 verknüpft. Inzwischen ist es üblich, die Rolle direkt im HTML-Code anzuwenden, um diese HTML5-Elemente für Browser und unterstützende Technologien zu identifizieren, die sie noch nicht unterstützen.

Das Abschnittselement ist vielseitig einsetzbar, da es einen generischen Bereich darstellt. Dies kann jedoch zu Problemen beim guten Design führen. Browser und unterstützende Technologien, die das Abschnittselement unterstützen, können den Zweck des Inhalts in der Region nicht identifizieren.

Die HTML5.1-Spezifikation enthält die folgenden Informationen:

'Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten, normalerweise mit einer Überschrift.'

Das Zuordnen der Überschrift zu ihrem übergeordneten Abschnittselement löst das Problem. Verwendung der Arie-beschriftet von Attribut auf das Abschnittselement und koppeln es mit dem Ich würde Auf der Überschrift wird eine programmatische Beziehung zwischen den beiden erstellt. In diesem Beispiel bedeutet dies, dass Browser und unterstützende Technologien diesen Teil der Seite als 'Wetterberichtsregion' anstatt nur als 'Region' identifizieren würden.

wie man Kleidung für Charaktere entwirft

Hinweis: Wenn das Abschnittselement keine Überschrift hat oder Sie sich keine vernünftige Bezeichnung für den Inhalt des Abschnitts vorstellen können, missbrauchen Sie wahrscheinlich das Abschnittselement. In diesen Fällen ist es besser, eine semantisch neutrale zu verwenden div Element stattdessen.

4. Details und zusammenfassendes Entwurfsmuster

Ein Entwurfsmuster zum Offenlegen von Inhalten.

  1. Kursplan
  2. < Tabelle >
  3. < tr >
  4. < th > Startdatumth >< th > Enddatumth >< th > Dauerth >
  5. tr >
  6. Tabelle >

Das Detailelement und Zusammenfassungselement arbeiten zusammen. Zusammen bilden sie ein natives Widget, mit dem der Benutzer problemlos auf zusätzliche Informationen zugreifen kann. Oder sie werden es tun, wenn die Browserunterstützung etwas konsistenter wird (derzeit unterstützen nur Webkit / Blink-basierte Browser diese HTML5-Elemente). Derzeit wird noch eine JavaScript-Polyfüllung benötigt, um im übrigen das gewünschte Verhalten zu erzielen.

Die ARIA Gruppenrolle teilt Browsern und unterstützenden Technologien mit, dass das Detailelement eine Reihe verwandter Objekte enthält. Die Rolle im Zusammenfassungselement bedeutet, dass Browser und unterstützende Technologien, die diese HTML5-Elemente nicht unterstützen, das Zusammenfassungselement als Schaltfläche betrachten. Dies wird durch das arienerweiterte Attribut ergänzt, das den aktuellen Status des zugeordneten Inhalts innerhalb des Detailelements angibt.

Dieses Entwurfsmuster bietet dem Widget eine bessere Erschwinglichkeit (insbesondere für Benutzer mit unterstützender Technologie). Der kleine schwarze Pfeil, mit dem einige Browser ein Offenlegungs-Widget anzeigen, geht nur so weit. Mit dem hinzugefügten ARIA wird das Ganze viel robuster - es ist ein Knopf (und jeder weiß, dass ein Knopf gedrückt werden kann), und es ist klar, dass sich etwas ausdehnen oder zusammenbrechen wird, wenn es ist.

5. Entwurfsmuster für Figur und Bildbeschreibung

Ein Entwurfsmuster für kommentierte Inhalte.

  1. < zu href = '# fig1'> Abbildung 1zu >
  2. ...
  3. Codebeispiel
  4. < zum >
  5. ...
  6. zum >

Das Figurenelement und figcaption Element Stellen Sie diesen Lehrbuchklassiker dar - einen kommentierten Inhalt, auf den von einem anderen Ort aus verwiesen werden kann. In diesem Entwurfsmuster könnte sich der Link beispielsweise in einem Textabschnitt befinden, der auf das Codebeispiel in Abbildung 1 verweist.

Das Figure-Element enthält einen in sich geschlossenen Inhaltsblock. Die Gruppenrolle wird aus demselben Grund angewendet, aus dem sie im Entwurfsmuster für Details / Zusammenfassungen angewendet wurde. Es zeigt Browsern und unterstützenden Technologien an, dass das Figurenelement eine Reihe verwandter Elemente enthält.

Das figcaption-Element liefert die Anmerkung für den Figureninhalt. Das Arie-beschriftet von Das Attribut wird mit der ID des figcaption-Elements gepaart. Es wird eine Zuordnung zwischen den Elementen figur und figcaption für die Browser und Hilfstechnologien hergestellt, die diese HTML5-Elemente noch nicht unterstützen. Derzeit ist Firefox der einzige Browser, der die Semantik von Figuren und Figuren unterstützt.

Bild von Patrick Lauke

So verstecken Sie Ihr Profilbild auf Facebook

Worte: Léonie Watson und Steve Faulkner

Léonie Watson ist Beraterin für digitale Barrierefreiheit, und Steve Faulkner ist Senior-Berater für Barrierefreiheit und technischer Direktor bei Die Paciello-Gruppe Europa.