Kleine Anpassungen mit großer Auswirkung auf die Barrierefreiheit Ihrer Website

Für Anfänger kann Barrierefreiheit einschüchternd sein. Bei all den guten Absichten der Welt ist die Lernkurve für die Entwicklung konformer, vollständig zugänglicher Websites und Apps riesig. Es ist auch schwierig, die richtige Beratung zu finden, da es sich um eine sich ständig verändernde und zunehmend überfüllte Landschaft handelt.

Ich habe diesen Beitrag verfasst, um Ihnen einige Tipps zu kleinen Dingen zu geben, die einen großen Unterschied machen können, während sie Ihren Entwicklungsprozess hoffentlich nicht zu sehr beeinträchtigen.

Tauchen wir ein!

Dokumentstruktur und Semantik

Es wird Sie wahrscheinlich nicht überraschen, dass die strukturierte, semantische Organisation Ihres HTML einen großen Unterschied macht. Screenreader verlassen sich auf ein gut strukturiertes Dokument, um einer kohärenten Erzählung folgen zu können. Stellen Sie also sicher, dass Sie die Elemente, die die HTML5-Spezifikation vorsieht, responsiv und effektiv nutzen.

Wenn Sie unsicher sind, wie Sie Ihre Arbeit richtig markieren, schauen Sie sich Ressourcen wie HTML5 Doctor, Code Academy und natürlich CSS-Tricks an. Sie können sich auch Artikel wie „Writing HTML with accessibility in mind“ und „Semantic Structure“ ansehen, um in die richtige Richtung zu gelangen.

Betrachten wir drei spezifische Dinge, die helfen können, ein gut strukturiertes und semantisches Dokument sicherzustellen.

Verwenden Sie ein einziges <main>-Element

Ein gutes Beispiel für den Aufbau einer verantwortungsvollen, semantischen Dokumentenstruktur ist die Verwendung eines einzigen <main>-Elements. Dies sollte als Wegweiser für die wichtigsten Inhalte der Seite für Ihren Benutzer dienen.

Fügen Sie ihm eine ID hinzu und bieten Sie einen Sprunglink in Ihrem Haupt-<header> wie folgt an

<header role="banner">
  <h1>Your main page title</h1>
    <a href="#main-content">Skip to the main content</a>
 </header>
    
<!-- Further down the document -->
<main id="main-content">
  <!-- Put your main body of content in here and other really important stuff -->
</main>

Dieser kleine Trick wird Ihren Screenreader-Nutzern enorm helfen, da sie direkt zu Ihren wichtigen Inhalten springen können und die schicken Teile überspringen. Das ist aus demselben Grund auch großartig für Tastaturnutzer.

Eine weitere nette Geste ist, dem Sprunglink einen :focus-Stil hinzuzufügen, der ihn sichtbar macht. Versuchen Sie, auf GitHub.com mit der Tabulatortaste zu navigieren. Ziemlich raffiniert, oder?

Verwenden Sie Elemente angemessen

Nun, <button>-Elemente sind eine echte Plage beim Stylen, oder? Das bedeutet aber nicht, dass Sie Ihre JavaScript-Events an ein <div> oder ein <a href="#"> anhängen sollten. Denn wenn Sie einen <button> verwenden, erhalten Sie Tastaturereignisse kostenlos. Sie helfen auch Screenreader-Nutzern, da das Element korrekt angekündigt wird. Schauen Sie sich dieses Beispiel an

document.getElementsByTagName('button')[0].addEventListener('click', evt => {
  alert('Oh, hey there!');
});

Wenn ein Benutzer diesen Button fokussiert und die Enter-Taste drückt, wird dieses Ereignis ausgelöst. Das erleichtert Ihnen und dem Benutzer das Leben. Lohnt sich, oder?

Siehe den Pen Button click example von Andy Bell (@hankchizljaw) auf CodePen.

Sorgen Sie für eine korrekte Überschriftenhierarchie

Es ist sehr üblich, dass Screenreader-Nutzer eine Seite anhand der Überschriftenstruktur navigieren. Das bedeutet, wir sollten ihnen helfen und eine schöne Hierarchie für sie schaffen. Werfen wir einen Blick auf einen Standard-Blogbeitrag

<main id="main-content">
  <article>
      <!-- The page title is up in the main <header> in this instance -->
      <h2>My awesome blog post</h2>
      <p>Vestibulum id ligula porta felis euismod semper.</p>
      <p>Vestibulum id ligula porta felis euismod semper.</p>

      <h3>A sub-section of this post</h3>
      <p>Vestibulum id ligula porta felis euismod semper.</p>

      <h4>A sub-section of the sub-section</h4>
      <p>Vestibulum id ligula porta felis euismod semper.</p>
  </article>
</main>

Mit diesem Beispiel kann der Benutzer zum Anfang von „Mein toller Blogbeitrag“ navigieren und dann problemlos zu Unterabschnitten und verschachtelten Unterabschnitten springen. Sie können auch zurück nach oben springen. Es ist einfach eine nette Möglichkeit, ihnen den Konsum der von Ihnen erstellten Inhalte so einfach wie möglich zu machen.

Es kann empfohlen werden, dass eine Seite ein einziges <h1>-Element hat, auch wenn die W3C HTML5-Spezifikation besagt, dass Sie mehrere haben können. Ich persönlich stimme der Verwendung eines einzigen <h1> zu, aber Sie können mehrere haben, solange Sie eine schöne Struktur und Hierarchie befolgen. Das ist hier der Schlüssel.

Stellen Sie den richtigen Farbkontrast sicher

Um WCAG 2.0 AA-konform zu sein, benötigen Sie ein Kontrastverhältnis von 4,5:1 für normalen Text. Das betrifft Ihre Absätze, Buttons, Navigation usw. Für größeren Text, wie Überschriften, benötigen Sie ein Verhältnis von 3:1. Ich würde sagen, das sollte Ihr Minimum sein, da es mit Tools wie Tota11y, Contrast und dem WebAim Kontrastprüfer unglaublich einfach zu erreichen ist. Sie können immer noch viel Farbbalance und Variation in Ihrem Design erzielen.

Der Grund, warum Kontrast so wichtig ist, liegt darin, dass es so viele Umweltvariationen gibt, die Sie wahrscheinlich gar nicht berücksichtigen, wie z. B. helles Sonnenlicht und schlecht belichtete Displays. Hinzu kommt eine Sehbeeinträchtigung oder, sagen wir, eine Migräne, und Sie verursachen potenziell Probleme für Ihre Benutzer.

Die richtige Kontrastierung wird einen großen, positiven Effekt auf ein breites Spektrum Ihrer Benutzer haben.

Verantwortungsvolle Textbeschriftungen

Wir alle haben eine Liste von Elementen mit einem nicht aussagekräftigen, aber visuell ansprechenden „Mehr“-Button erstellt, oder? Mehr was aber? Wir müssen hier verantwortungsvoller sein und etwas Kontext liefern.

Eine Möglichkeit, dies zu erreichen, ist die visuelle Verbergung beschreibenden Textes mit CSS und die Verbergung des nicht beschreibenden Textes vor Screenreadern. Es ist verlockend, display: none; zu verwenden, aber Screenreader können Elemente ignorieren, bei denen dies gesetzt ist, also müssen wir kreativer sein. Ich benutze so etwas wie diesen kleinen Helfer

.visually-hidden { 
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px);
  white-space: nowrap;
  position: absolute;
}

Mit diesem CSS können wir etwas wie das tun

<a href="/link-to-your-page">
  <!-- This is hidden from a screen reader, but visible visually -->
  <span aria-hidden="true">More</span>

  <!-- This is visible to a screen reader, but visually hidden -->
  <span class="visually-hidden">Continue reading: "Your post title here"</span>
</a>

Ein sehender Benutzer sieht nur „Mehr“ und ein Screenreader-Benutzer hört „Weiterlesen: ‚Ihr Posttitel hier‘“. Beide Benutzertypen sind glücklich.

Sie können das oben Erwähnte auch erreichen, indem Sie ein aria-label im <a>-Tag verwenden. Dies überschreibt den Text darin für einen Screenreader

<a href="/link-to-your-page" aria-label="Continue reading: 'Your post title here'">
  More
</a>

Kleine Typografie-Anpassungen mit großer Wirkung

Es ist immer erwähnenswert, dass Menschen mit Sehbehinderungen oder Lernschwierigkeiten versuchen könnten, Ihre Inhalte zu lesen, daher können einige kleine Anpassungen Ihrer Typografie weit reichen.

Ein Textkörper wie ein Artikel sollte mindestens 16px (oder eine entsprechende Einheit) groß sein. Es lohnt sich auch, Ihre line-height auf etwa 1,5 zu erhöhen. Der Abstand zwischen den Zeilen kann Lesern mit Legasthenie helfen, Ihre Inhalte besser zu verstehen. Die Kombination aus Größe und Abstand ist auch großartig für ältere und/oder kurzsichtige Menschen. Auch kleine Zusammenfassungen und Randnotizen sollten mindestens 12px (oder eine entsprechende Einheit) groß sein. Alles, was kleiner ist, schließt Benutzer aus, die Schwierigkeiten beim Lesen haben.

Ein weiterer Trick ist, Schlüsselwörter und Phrasen hervorzuheben, wenn Ihr Inhalt recht komplex ist. Dies kommt nicht nur Benutzern zugute, die Inhalte etwas langsamer verarbeiten, sondern hilft auch Menschen, die gerne einen Artikel überfliegen, so wie ich.

Zuletzt in diesem Abschnitt rate ich Ihnen, vorsichtig mit Ihrer Font-Auswahl zu sein. Fonts mit komplexen Ligaturen und dekorativen Elementen können sehr ablenkend sein, also beschränken Sie die Verwendung solcher Fonts vielleicht nur auf wichtige, große Überschriften. Es wurde auch empfohlen, dass serifenlose Schriften für Legastheniker besser sind. Lesen Sie diesen Artikel für mehr darüber und andere Tipps zur Textformatierung.

Verbessern Sie die Tastaturunterstützung

Es gibt ein paar kleine Anpassungen, die Sie vornehmen können, um Benutzern zu helfen, die hauptsächlich ihre Tastatur zur Navigation auf Ihrer Website verwenden.

Nehmen wir an, Sie haben einen kleinen Button, der ein Dialogfeld anzeigt, wenn Sie darauf klicken. Sie sollten ein Ereignis für die Escape-Taste anhängen, das es ausblendet. Hier ist ein Beispiel-Snippet

document.addEventListener('keyup', (evt) => {
  if(evt.keyCode === 27) {
    // Run whatever code hides your dialogue
  }
});

Siehe den Pen Escape key demo von Andy Bell (@hankchizljaw) auf CodePen.

Eine weitere Anpassung, die Sie für unsere tastaturnavigierenden Freunde vornehmen können, ist, ihnen den Fokus nicht zu verbergen. Browser stellen uns kostenlose Fokus-Zustände mit outline zur Verfügung. Ich weiß, dass es hässlich aussehen kann, aber verdammt nützlich für Tastaturnutzer ist. Wenn Sie diesen blauen Schein loswerden wollen, verstehe ich das – aber bitte verwenden Sie den :focus-Pseudo-Selektor, um ihm stattdessen eine offensichtliche Zustandsänderung hinzuzufügen. Hier ist ein Beispiel

.your-element {
  background: red;
}

.your-element:focus {
  outline: none; /* Reset the default */
  box-shadow: 0 0 0 3px black; /* A very obvious state change */
}

Verlassen Sie sich nicht nur auf Farbe, um Zustandsänderungen zu kommunizieren

Beenden wir mit einem wirklich wichtigen Punkt. Farbe sollte nicht allein verwendet werden, um Zustandsänderungen zu kommunizieren. Nehmen wir dieses Szenario als Beispiel

Sie haben einen Button, der ein Formular absendet. Sie haben ein nettes JavaScript geschrieben, das ihn grau werden lässt, während die Daten gesendet werden. Dann wird er entweder grün oder rot, je nachdem, was der Status ist.

Für einen Farbenblinden ist das ein Albtraum. Für ihn hat sich die Farbe des Buttons vielleicht kaum genug geändert, um sie zu bemerken, sodass er vielleicht immer wieder klickt und frustriert ist. Das ist nicht ideal.

Lassen Sie uns also anstatt sich auf Farbe zu verlassen, dies mit einer Statusmeldung ergänzen, die den Zustand des Buttons als Reaktion unterstützt.

Siehe den Pen Enhanced state change communication demo von Andy Bell (@hankchizljaw) auf CodePen.

Dieses Beispiel ist eine großartige Möglichkeit, dem Benutzer schnell mitzuteilen, dass sich etwas geändert hat, und die Verwendung von Farbe, Text und Symbolen kommuniziert diese Änderung deutlich. Das Deaktivieren des Buttons während der Verarbeitung der Antwort ist ebenfalls eine große Hilfe für den Benutzer.

Zusammenfassend

Diese kleinen Tipps sollten für Ihre Benutzer einen großen Unterschied machen, und ich hoffe, Sie tauchen in Ihre Projekte ein und implementieren einige davon.

Sie sollten auch weiterhin über Barrierefreiheit lernen. Ich empfehle, Leuten wie Heydon Pickering, Scott O’Hara, Laura Kalbag und Rob Dobson auf Twitter zu folgen. Ich empfehle Ihnen auch, sich Ressourcen wie Inclusive Components und das A11y Project anzusehen.

Je größer Ihr Wissen wird, desto besser werden Ihre Websites und Produkte für ein viel größeres Publikum sein. Das kann nur gut sein, oder?