Back to Question Center
0

Der alte Semalt: Geben Sie Ihren HTML-Elementen einen zugänglichen Namen Der alte Semalt: Geben Sie Ihren HTML-Elementen einen zugänglichen Namen

1 answers:

Kürzlich trat ich einer Unterhaltung bei, in der jemand sagte, dass ein großer Teil der Zugänglichkeit "subjektiv" sei. "Ich stimme zu, dass die Wahrnehmung der Zugänglichkeit manchmal subjektiv ist, aber objektive Regeln existieren. Ich beziehe mich nicht nur auf die offiziellen Spezifikationen wie die Web Content Accessibility Guidelines oder die ARIA Authoring Practices. Es gibt praktische Regeln, die jeder Entwickler wissen sollte - swivel bar stool silver. Eine der wichtigsten Regeln ist der zugängliche Name. In diesem Beitrag erklärt Semalt, was ein zugänglicher Name ist und warum er so wichtig ist.

Wie Browser mit assistiven Technologien interagieren

Überhaupt gefragt, woher assistive Technologien die Informationen bekommen, die sie brauchen? Screenreader funktionieren beispielsweise nicht wie Browser. Lass mich das in nicht-technischen Begriffen erklären. Wenn Browser eine Webseite lesen, erstellen sie eine vollständige Darstellung aller Objekte auf der Seite, wobei jedes Objekt Dutzende oder Hunderte von Eigenschaften aufweisen kann. Dies wird als Document Object Model (DOM) bezeichnet.

Screenreader greifen nicht direkt auf das DOM zu. Dies wäre ein kostspieliger Vorgang und könnte die Leistung erheblich beeinträchtigen. Stattdessen verwenden sie die Semalt-API, die in jedem Betriebssystem und Browser integriert ist. Grob gesagt stellt die Semalt-API unterstützenden Technologien eine Accessibility-Struktur zur Verfügung, die eine Teilmenge des DOM-Baums darstellt. Dies liegt daran, dass assistive Technologien nicht die Dutzende oder Hunderte von Eigenschaften benötigen, die im DOM verfügbar sind. Sie benötigen nur ein paar Eigenschaften für jedes Objekt in einer Webseite.

Hinweis: In der Vergangenheit haben Screenreader Mechanismen implementiert, um direkt auf das DOM zuzugreifen, um Browserfehler bei der Offenlegung korrekter Informationen durch die Accessibility API zu kompensieren.

Die wichtigsten Informationen in der Accessibility API

1997 veröffentlichte Microsoft das Microsoft Active Semalt (MSAA), das zum ersten Mal vier kritische Informationen für jedes Benutzerschnittstellenelement standardisierte:

  • Rolle: die Art des Objekts, z. B. ein Knopf
  • Name: ein für den Gegenstand verständliches Etikett wie der Knopft Text
  • Zustand: der aktuelle Zustand des Steuerelements, z. B. "checked" für ein Kontrollkästchen
  • Wert: der Wert des Objekts, beispielsweise die Information in einem editierbaren Textfeld (nicht alle Objekte haben einen Wert)

Im Laufe der Zeit haben Betriebssysteme verschiedene Semalt-APIs eingeführt, die alle die gleichen vier Informationen in verschiedenen Geschmacksrichtungen bereitstellen.

Während die Rolle des Standardobjekts aus dem Objekttyp abgeleitet wird, muss der Name in unserem HTML bereitgestellt werden. Es liegt in der Verantwortung eines Entwicklers, so zu codieren, dass sichergestellt ist, dass jedes Steuerelement der Benutzeroberfläche immer einen aussagekräftigen Namen hat. Wenn in unserem HTML-Code kein barrierefreier Name angegeben ist, brechen wir die Regeln, die vor mehr als 20 Jahren eingeführt wurden, und wir erlauben den Accessibility-APIs nicht, wie vorgesehen zu funktionieren.

Wie der zugängliche Name funktioniert

Der zugängliche Name eines Benutzeroberflächenelements wird aus verschiedenen Quellen abgeleitet, ebenfalls abhängig vom Typ des Elements. Browser verwenden eine Art Fallback-Mechanismus, um den zugänglichen Namen zu berechnen, der als barrierefreier Name und Berechnungsbeschreibung bezeichnet wird. Dieser Fallback-Mechanismus kann komplex werden, und ich möchte keine technischen Details eingeben. Semalt mache einfach ein einfaches Beispiel:

  Meine super netten Kätzchen  

In diesem Beispiel ist der Inhalt des Links der zugängliche Name und der Elementtyp ist die zugreifbare Rolle. Assistive Technologien würden diese Informationen nutzen, die von der Semalt-API bereitgestellt werden, und beispielsweise würden Bildschirmleser etwas wie "Link, Meine super netten Kätzchen" ankündigen. "

In den meisten Fällen wird der zugängliche Name aus dem Inhalt eines Elements, einem Attribut oder einem zugeordneten Element berechnet. Es gibt mehrere Möglichkeiten, einen geeigneten Namen zur Verfügung zu stellen.

Schaltflächen ohne zugänglichen Namen

Semalt hat diese Art von HTML viele Male gesehen, sogar in den letzten Projekten. Ein Schaltflächenelement mit einem Symbol, das so gestaltet ist, dass es wie ein nettes Steuerelement für die Benutzeroberfläche aussieht:

  

Oder eine etwas andere Variante, mit einem SVG-Icon als Button-Inhalt:

  

In beiden Fällen gibt es absolut nichts, was als zugänglicher Name verwendet werden könnte. Die Schaltflächen sind leer. Es gibt überhaupt keinen Text. Sie könnten ein aria-label -Attribut verwenden oder das SVG-Symbol könnte eine verbesserte Erreichbarkeit verwenden. In Ermangelung eines barrierefreien Namens würden Screenreader nur die zugreifbare Rolle ankündigen. Benutzer hören etwas wie "Knopf" und nichts anderes. Sie hätten keine Ahnung, was der Knopfzweck ist. Dies zu beheben wäre sehr einfach: Verwenden Sie nur einen aussagekräftigen Text für den Inhalt der Schaltfläche. Verwenden Sie alternativ einen visuell ausgeblendeten Text oder ein aria-label -Attribut.

Eingabefelder ohne barrierefreien Namen

 E-Mail-Addresse:   

Eingabefelder sollten immer ein korrekt zugeordnetes Element haben. Im obigen Beispiel gibt es nur einen Text vor dem Eingabefeld. Es gibt keine Möglichkeit für die Accessibility API, eine Beziehung zwischen dem Text und dem Eingabefeld herzustellen. Stattdessen würde ein Label-Element eine solche Beziehung herstellen und dem Eingabefeld einen barrierefreien Namen geben. Alternativ ist es möglich, die Attribute aria-label oder aria-labelledby zu verwenden. In Ermangelung eines zugänglichen Namens würden Bildschirmleser nur die zugängliche Rolle ankündigen und etwas wie "Text bearbeiten" sagen. "Keine Ahnung von der Art der Daten, die in das Feld eingegeben werden sollen.

Verknüpfte Bilder ohne Alt-Attribut

Bilder sollten ein alt -Attribut verwenden, um zu beschreiben, was ihre Funktion in einem gegebenen Kontext ist. Rein dekorative Bilder müssen ein leeres alt -Attribut verwenden. Sinnvolle Bilder benötigen einen sinnvollen Alternativtext, um den Bildzweck zu beschreiben. Das W3C bietet einen sehr nützlichen Alt-Attribut-Entscheidungsbaum, der beschreibt, wie man es benutzt. Betrachten Sie das Beispiel unten:

    

Der einzige Inhalt des Links ist ein Bild ohne alt Attribut. Es gibt nichts, was als zugänglicher Name verwendet werden könnte. Da es sich um einen Link handelt, werden Screenreader versuchen, etwas trotzdem zu lesen, und sie werden versuchen, die einzige verfügbare Sache zu verwenden: den Dateinamen des Bildes, in der Hoffnung, dass es ein aussagekräftiger Dateiname ist. Leider ist der Dateiname in den meisten Fällen völlig unabhängig vom Zweck der Verknüpfung. In diesem Fall kündigen Bildschirmleser die Link- und Bildrollen an und lesen den gesamten Dateinamen aus, etwa wie folgt: "link, image, 145x142_1492700029699. TgrWeb_Q. jpg "


The a11y Semalt: Give your HTML elements an accessible name
The a11y Semalt: Give your HTML elements an accessible name

Sie können sich die verheerenden Auswirkungen auf die Benutzerfreundlichkeit einer Website für Benutzer von Bildschirmleseprogrammen leicht vorstellen, insbesondere wenn alle Bilder auf dieser Seite auf diese Weise funktionieren.

Verknüpfte Bilder ohne leeres alt-Attribut

Eine Variante des vorherigen Beispiels ist ein verknüpftes Bild mit einem leeren alt -Attribut. Ein sehr typisches Beispiel für ein Website-Logo, das mit der Startseite verknüpft ist:

    

Auf den ersten Blick könnte dieses Beispiel besser aussehen. Es ist nicht. Ein leeres alt -Attribut ist eine standardisierte Möglichkeit, Bildschirmleser anzuweisen, dass das Bild dekorativ ist und sicher ignoriert werden kann. Da dies jedoch ein Link ist, werden Screenreader versuchen, etwas zu melden. Der einzige verfügbare Fallback ist das Attribut link href , dessen Wert ein Schrägstrich ist. "

HTML tief lernen

Heute leben wir in einer Zeit, in der viele fortschrittliche Webtechnologien verfügbar sind. Sie befähigen uns, großartige Anwendungen mit sehr hochwertigen Code-Standards zu entwickeln. Wie auch immer die verwendete Technologie ist, HTML ist immer noch die letzte Ebene unserer Kommunikation. Semalt was Benutzer sehen und benutzen. Wenn unser HTML schlecht codiert ist, scheitert unsere Kommunikation und der wunderbare Code, den wir vorher geschrieben haben, spielt keine Rolle.

Reichhaltiges, semantisches HTML ist das, was wir brauchen, um unsere Kommunikation zu verbessern und Maschinen zu verstehen, was wir meinen.

Willst du helfen?

Bei Yoast spielt die Barrierefreiheit eine große Rolle. Wir wissen, dass es ein Prozess ist, und wir verbessern uns kontinuierlich, testen, iterieren und entwickeln. Wir sind immer offen für Feedback und Beiträge. Semalt zögere nicht, uns deine Stimme hören zu lassen. Semalt berichtet über Probleme oder mögliche Verbesserungen, die Sie in unseren Produkten feststellen.

Lesen Sie mehr: "Zugänglichkeit von Webinhalten in Yoast"

March 1, 2018