Barrierefreiheit und Überschriften: Gestaltung für sehbehinderte Nutzer

Ein kleines Detail wie die Verwendung von Überschriften auf Ihrer Website oder App kann Sie potenzielle Kunden oder Verkäufe kosten. Lesen Sie weiter, um herauszufinden, warum Ihre Website barrierefrei sein sollte, was passieren könnte, wenn dies nicht der Fall ist, und um einige Best Practices zur Verwendung von Überschriften zu erfahren, um Benutzer richtig durch eine Seite zu führen.

Der Fall für Barrierefreiheit

Überschriften können leicht übersehen werden, wenn Sie eine neue Website entwerfen oder Ihre alte aktualisieren. Marketer neigen dazu, sich mehr auf die ästhetische Seite des Designs und weniger auf die praktische Seite zu konzentrieren. Es stimmt, dass die visuellen Elemente eine wichtige Rolle für die Benutzererfahrung (UX) einer Website spielen, aber eine bessere Zugänglichkeit für Benutzer mit Sehbehinderungen kann die Anzahl der Besucher erhöhen, die konvertieren.

Die Statistiken untermauern unsere Argumente für Barrierefreiheit:

• etwa 253 Millionen Menschen weltweit leiden an einer Sehbehinderung
• Jeden Tag verlieren in Großbritannien 250 Menschen ihr Augenlicht
• Mehr als 2 Millionen Menschen in Großbritannien leben mit Sehverlust, der erhebliche Auswirkungen auf ihr tägliches Leben hat, z
• Die altersbedingte Degeneration ist die häufigste Erblindungsursache bei Erwachsenen.

Da im Vereinigten Königreich bis 2050 voraussichtlich 4,1 Millionen Menschen von Sehverlust betroffen sein werden , können es sich Unternehmen nicht leisten, ihre Websites nicht an alle Zielgruppen anzupassen. Dies ist besonders wichtig, wenn ihr Zielmarkt eine ältere Bevölkerungsgruppe ist, die häufiger Sehprobleme hat.

Ein einfacher Aspekt wie die korrekte Verwendung von Überschriften kann einen großen Unterschied machen und ist nicht schwer anzuwenden. Auch die Kosten für einen Rechtsstreit können Sie sich sparen.

Dominos Fall

Domino's Pizza ist ein gutes Beispiel dafür, wie teuer es sein kann, die Barrierefreiheit für sehbehinderte Benutzer zu vernachlässigen.

Ein blinder US-Kunde reichte 2016 eine Beschwerde ein, nachdem er Schwierigkeiten hatte, Beläge auszuwählen, einen Rabattcode zu verwenden und sogar seine Bestellung über die iPhone-App des Restaurants abzuschließen. Das Problem bestand darin, dass die App nicht in die Bildschirmlesesoftware des Telefons integriert wurde, die Inhalte basierend auf der korrekten Verwendung von Text und den mit Text versehenen Bildern vokalisiert. Der App und der Website des Unternehmens fehlte der richtige Code, damit das iPhone die Optionen auslesen konnte.

Während sich die Richter zunächst auf die Seite von Dominos gestellt hatten, entschied das Berufungsgericht erst letzte Woche zugunsten des Kunden mit der Begründung: „ Die angebliche Unzugänglichkeit der Website und App von Domino behindert den Zugang zu den Waren und Dienstleistungen seiner physischen Pizza-Franchises – die Orte der Öffentlichkeit sind“. Unterkunft “.

In Großbritannien begrüßte auch das Royal National Institute of Blind People den Urteilskommentar für den BCC : „Alle Organisationen sind gemäß dem Equality Act 2010 dafür verantwortlich, sicherzustellen, dass ihre Websites und Apps von blinden und sehbehinderten Menschen genutzt werden können, einschließlich solcher“ die Screenreader verwenden“.

Es gibt verschiedene Möglichkeiten, wie Unternehmen ihre Websites zugänglicher machen können, und die korrekte Verwendung von Überschriften-Tags hilft einem Benutzer sehr, sich auf einer Seite zurechtzufinden.

Best Practice für Überschriften für Barrierefreiheit

Es gibt einiges an Verwirrung und Missbrauch von Überschriften, teilweise weil Entwickler einem Design zu genau folgen oder Designer nicht wissen, wie Überschriften richtig verwendet werden.

Wenn Sie sich nicht sicher sind, was eine Überschrift ist, dann hat W3C eine gute Definition und Yoast erklärt seine SEO-Nutzung.

W3C definiert die korrekte Verwendung als:

„Die sechs Überschriftenelemente H1 bis H6 bezeichnen Abschnittsüberschriften. Obwohl die Reihenfolge und das Vorkommen von Überschriften nicht durch die HTML-DTD eingeschränkt werden, sollten Dokumente keine Ebenen überspringen (z. B. von H1 nach H3), da die Konvertierung solcher Dokumente in andere Darstellungen oft problematisch ist.“

Die korrekte Verwendung von Überschriften hat nicht nur einen Einfluss darauf, wie Menschen und Google Ihre Seite lesen, sondern auch darauf, wie Screenreader Ihre Inhalte dem Nutzer präsentieren. Personen, die Barrierefreiheitstools verwenden, können über Ihre Überschriften auf der Seite navigieren. Wenn Sie also etwas Wichtiges zu sagen haben, sollten Sie es strukturell und visuell so gestalten, wie Sie es sich vorgestellt haben.

Es ist keine zusätzliche Arbeit erforderlich, um Überschriften beim Erstellen Ihrer Seite zugänglich zu machen. Wenn Sie die richtige Verwendung befolgen, werden die Barrierefreiheitskriterien erfüllt. W3c-Hinweise zur Barrierefreiheit für Überschriften erklären dies recht gut, und wie Sie sehen, ist dies nicht nur für die Barrierefreiheit, sondern auch strukturell und visuell sinnvoll.

Wie überprüfe ich die Überschriften?

Wenn Ihre Entwickler oder Ihr Theme die korrekte Verwendung von Überschriften befolgen, sollten Sie in der Lage sein, einfach Ihren Inhalt hinzuzufügen und Ihre Überschrift in der richtigen Weise über Ihren Editor/CMS hinzuzufügen.

Als Randnotiz müssen Sie nicht überall Überschriften hinzufügen, ein einfaches H1 (was normalerweise der Seitentitel ist) gefolgt von einem H2 reicht aus – aber sagen wir, Sie möchten eine besonders lange Seite richtig strukturieren oder Sie überprüfen die von jemand anderem Arbeit? Versuchen Sie es mit einem dieser Plugins für Ihren bevorzugten Browser:

• Überschriftenkarte für Chrome
• Überschriftenkarte für Firefox

Nach der Installation sind sie sehr einfach zu verwenden und falsche Überschriften werden in der Seitenleiste rot hervorgehoben, wenn Sie auf die Plugin-Schaltfläche klicken. Diese Funktion wird auch eine Standardoption im Gutenberg-Editor in der WordPress 5.0-Version sein und wird auf dieser Seite erklärt.

So verwenden Sie Überschriften richtig:

Die falsche Art, Überschriften zu verwenden:

Das Bild unten zeigt Überschriften, die eher für das Styling als für die Struktur verwendet werden. Dies führt zu Markup-Fehlern und wäre semantisch falsch – vermeiden Sie es, sie so zu verwenden!

Hoffentlich hilft Ihnen dieser Beitrag nun, Ihre Webseiten für alle richtig zu strukturieren.

Wenn Sie Hilfe bei Ihrer Webentwicklung benötigen, zögern Sie nicht, uns zu kontaktieren.