Links mit ARIA verstecken

Stand der Screenreader-Unterstützung in 2016

Eine Tabtaste umzingelt von vielen doppelten Links

Manchmal müssen (oder sollten) Inhalte vor Screenreadern versteckt werden, die am Bildschirm sichtbar sind. In diesem Beitrag geht es um redundante Links, die mit tabindex=“-1“ zwar im Browser nicht mehr fokussierbar werden, aber dennoch für Screenreader zugänglich bleiben. Die ARIA-Spezifikation sieht zwei Möglichkeiten vor, solche Links auch vor Screenreadern zu verstecken:

  1. Mit aria-hidden=“true“ soll ein Element samt Kindelemente und enthaltener Text vor Screenreadern versteckt werden.
  2. Mit role=“presentation“ (ARIA 1.0) bzw. role=“none“ (ARIA 1.1) soll die Semantik des Elements unterdrückt werden, aber Kindelemente und enthaltener Text für Screenreader zugänglich bleiben.

zum Beitrag »

Landmarks mit ARIA und HTML

Stand der Screenreader-Unterstützung in 2016

Luftaufnahme von Feldern die mit Landmarks beschriftet sind.

Im letzten Herbst habe ich im Beitrag Mehr als nur Semantik über Nutzungsszenarien für die HTML5-Elemente mit einer Rolle eines Landmarks geschrieben. Seinerzeit hatte ich die Beispiele mit Internet Explorer und dem Screenreader JAWS vorgestellt. Obwohl inzwischen die Unterstützung von Landmarks im Internet Explorer kaum zu beanstanden ist, so ist die Unterstützung für Landmarks immer noch uneinheitlich in den verschiedenen Browser-Screenreader-Kombinationen.

zum Beitrag »

Kollaboratives Intranet

Anforderungen an das Autorenwerkzeug

Eine Menschenmenge bewegt sich in Richtung eines Intranet-Schildes; eine Hälfte der Menschenmenge benutzt die Treppe, die andere Hälfte benutzt eine Rolltreppe.

Als ich neulich eingeladen war, die Vorstellung mehrerer Bewerber für die Umsetzung eines kollaborativen Intranets vor dem Hintergrund der Barrierefreiheit mit zu bewerten, war ich über zwei Aspekte überrascht. Zum einen wurde von den Bewerbern zu oft angenommen, dass es nur ein begrenztes Redakteursteam gäbe, und zum anderen wurde zu oft angenommen, dass Menschen mit Behinderungen keine Inhalte zum Intranet beitragen würden. Damit waren die betroffenen Bieter selbstverständlich aus dem Rennen raus. Erst recht konnten die Anbieter nicht in Erwägung gezogen werden, die keine konkreten Informationen zur Barrierefreiheit im Frontend sagen konnten.

zum Beitrag »

Links unterstreichen

Wie Nutzer sich selbst helfen können

Mehrere Linktexte in verschiedenen Größen und Farben; ein Strichmännchen mit Pinsel und Farbeimer unterstreicht diese Links

Betriebssysteme und Browser bieten diverse Einstellungen zur Optimierung der visuellen Darstellung von Webseiten. Neben Schriftgröße und Schriftart kann auch die Unterstreichung von Links und vieles mehr eingestellt werden. Wenn diese Voreinstellungen nicht oder nur teilweise funktionieren, kann darüber hinaus ein eigenes Stylesheet eingebunden werden.

zum Beitrag »

Studie zu Alternativtexten

Teils klare und teils subjektive Anforderungen

Collage aus 30 Einzelbildern mit Text: "Was ist wichtig???"

Im letzten Herbst hat Sarah Kitza, Studentin an der TU Dortmund, Screenreadernutzer dazu aufgerufen, sich an einer Umfrage zur Gestaltung von Alternativtexten zu beteiligen. Hintergrund war ihre Masterarbeit, in der sie untersuchen sollte, inwieweit Alternativtexte für Grafiken automatisch eingesetzt werden können. Dabei sollten die Bedürfnisse blinder Nutzer besonders berücksichtigt werden. Das Ergebnis ist eine Pflichtlektüre für jeden Online-Redakteur.

zum Beitrag »

Barrierefreies Multimedia – Teil 3

Audiodeskription

Auschnitt der Website "amara.org" mit Ansicht des Online Videobearbeitungstools wie z. B. Keyboard Control Buttons und Video Player. Logo Audiodeskription.

Die Audiodeskription für einen Film zu verfassen bedeutet große Verantwortung. Ich möchte dem Autor gerecht werden und muss gleichzeitig entscheiden, welche der vielen visuellen Informationen in der kurzen Zeit zu vermitteln sind.

zum Beitrag »

Barrierefreies Multimedia – Teil 2

Auswahl eines Videos

Schriftzug: "Fathers Day, ein Film von Daniel Tenne"

Der Grundstein für ein barrierefreies Video mit Untertiteln und Audiodeskription ist das Video selbst. Der Anspruch ist natürlich, jedes Video barrierefrei gestalten zu können. Trotzdem habe ich mich diese Woche auf die Suche nach dem perfekten Beispiel gemacht.

zum Beitrag »

ARIA-Widgets 1 bis 4

Dynamische Webinhalte zugänglich gestalten

Auszug aus Codeschnipseln und Schriftzug:" Aria Widgets"

Letzte Woche habe ich zwei neue Beiträge über zugängliche Widgets auf https://www.barrierefreies-webdesign.de veröffentlicht. Die Widgets sind tastaturbedienbar und mit Accessible Rich Internet Applications (ARIA) angereichert. Da es relativ wenige getestete ARIA-Beispiele in deutscher Sprache gibt und die typischen Ressourcen entweder nur Teilaspekte behandeln oder bei der Zugänglichkeit eher oberflächlich bleiben, möchte ich diesen Bereich der Website weiter ausbauen.

zum Beitrag »

Alternative Texte

Die nicht triviale Kunst der Bildbeschreibungen auf den Grund gehen

Portrait von Sarah Kitza mit drei unterschiedlichen Alternativtexten: "Sarah Kitza", "Junge Frau" und " Junge Frau mit langen, braunen Haaren. Zusätzlich der Schriftzug: TU - Technische Universität Dortmund.

Jedes Jahr erreichen mich ein Dutzend Anfragen von StudentInnen zum Thema barrierefreies Webdesign. Selten war ich von der Gründlichkeit so beeindruckt wie bei der anstehenden Masterarbeit von Sarah Kitza. In einer sogenannten Expertenbefragung haben wir die Formulierung von Alternativtexten für Grafiken umfassend besprochen und daraus hat sie jetzt einen Fragebogen entwickelt, den ich unbedingt bewerben möchte.

zum Beitrag »