Neuanordnung von Inhalten

Rachel Andrew

Die Reihenfolge der Inhalte in Ihrem Dokument ist wichtig für die Zugänglichkeit Ihrer Website. Ein Screenreader liest Inhalte basierend auf der Reihenfolge des Dokuments vor und verwendet dazu die von Ihnen ausgewählten HTML-Elemente, um dem Inhalt eine Bedeutung zu verleihen. Eine Person, die statt eines Touchscreens oder einer Maus mit einer Tastatur auf der Website navigiert, navigiert mit der Tabulatortaste um das Dokument. Das bedeutet, dass sie von einem aktiven Element zum aktiven Element springen und dabei mit der Tabulatortaste zwischen Links und Formularfeldern wechseln, wieder in der Reihenfolge, in der sie im Dokument vorhanden sind.

Daher ist es wichtig, mit einem gut strukturierten Dokument zu beginnen und alle richtigen HTML-Elemente zu verwenden, um eine barrierefreie Website zu schaffen. Es ist jedoch möglich, einige dieser guten Arbeitsschritte rückgängig zu machen, wenn Sie mit der Verwendung von CSS beginnen. Sehen wir uns die Gründe dafür an.

Quell- und visuelle Reihenfolge

Die Navigation auf der Website ist oft als Liste von Links gekennzeichnet. Mit der Flexbox können Sie diese in einen horizontalen Balken verwandeln. Im folgenden Glitch-Beispiel habe ich dieses häufig verwendete Muster erstellt. Klicken Sie auf das Beispiel und wechseln Sie mit der Tabulatortaste zwischen den Links. Der Fokus bewegt sich in eine logische Richtung von links nach rechts, also in der Reihenfolge, die wir auf Englisch lesen.

Wenn Sie ein solches Muster erstellt haben und dann aufgefordert wurden, Contact Us, das an zweiter Stelle in der Quelle steht, ans Ende zu verschieben. Dazu können Sie das Attribut order verwenden, das in Flexbox funktioniert. Wechseln Sie mit der Tabulatortaste durch die Elemente im Beispiel unten, in dem die Elemente mit der Eigenschaft order neu angeordnet wurden.

Der Fokus springt zum letzten Element und dann wieder zurück. Bei der TAB-Reihenfolge ist dieses Element das zweite Element. Optisch ist es das letzte Element.

Das obige Beispiel verdeutlicht das Problem, das auftritt, wenn wir Inhalte mithilfe von CSS neu anordnen und neu anordnen. Wenn Sie mit diesem Problem zu tun haben, wäre es richtig, die Reihenfolge in der Quelle zu ändern, anstatt CSS zu verwenden.

Welche CSS-Eigenschaften können zu einer Neuanordnung führen?

Jede Layoutmethode, die das Verschieben von Elementen ermöglicht, kann dieses Problem verursachen. Die folgenden CSS-Eigenschaften verursachen häufig Probleme bei der Neuanordnung von Inhalten:

• position: absolute verwenden und ein Element visuell aus dem Ablauf entfernen.
• Die Eigenschaft order im Flexbox- und Rasterlayout.
• Die Werte row-reverse und column-reverse für flex-direction in der Flexbox.
• Der Wert dense für grid-auto-flow im Rasterlayout.
• Beliebige Positionierung nach Zeilenname oder Nummer oder mit grid-template-areas im Rasterlayout.

In diesem nächsten Beispiel habe ich ein Layout mit CSS Grid erstellt und die Elemente mithilfe von Zeilennummern positioniert, ohne zu berücksichtigen, wo sie sich in der Quelle befinden.

Versuchen Sie, mit der Tabulatortaste um dieses Beispiel herum zu navigieren, und sehen Sie, wie der Fokus springt. Das kann vor allem bei langen Seiten sehr verwirrend sein.

Problem wird getestet

Ein sehr einfacher Test besteht darin, mit der Tastatur durch Ihre Seite zu navigieren. Kannst du alles erreichen? Gibt es dabei seltsame Sprünge?

Ein visuelles Beispiel für die Neuanordnung von Inhalten ist die Prüfung „Tab-Stopp“ in der Chrome-Erweiterung Accessibility Insights. Die Abbildung unten zeigt das Beispiel für das CSS-Raster in diesem Tool. Sie können sehen, wie der Fokus im Layout springen muss.

Neuanordnung von Inhalten und responsives Webdesign

Bei nur einer Präsentation ist es nicht schwierig, die Quelle in einer logischen Reihenfolge zu platzieren und dies im Layout widerzuspiegeln. Es kann schwieriger werden, wenn Sie das Layout an verschiedenen Haltepunkten betrachten. Auf kleineren Bildschirmen kann es beispielsweise sinnvoll sein, ein Element an den unteren Rand des Layouts zu verschieben.

Derzeit gibt es keine gute Lösung für dieses Problem. In den meisten Fällen hilft es Ihnen, bei der Entwicklung von „Mobile First“ auf Quelle und Layout zu achten. Die Entscheidung, die Sie im Hinblick auf die Priorität auf Mobilgeräten treffen, sind oft solide für die Inhalte im Allgemeinen. Entscheidend ist, die Möglichkeit einer solchen Neuanordnung von Inhalten zu erkennen und zu testen, ob das Endergebnis an jedem Haltepunkt zu auffällig ist.