Interviewfragen zur Barrierefreiheit mit Antworten

Beispielfragen

Ein paar Fragen aus jedem Level mit richtiger Antwort und Erklärung.

Barrierefreiheit · Junior

1. Was bedeutet Barrierefreiheit im Web (a11y)?
   ▸Antwort zeigen

   Richtige Antwort: Menschen können eine Seite nutzen, egal mit welchen Fähigkeiten oder Geräten

   Barrierefreiheit heißt, dass Menschen mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen die Seite wahrnehmen, verstehen und bedienen können. „a11y“ ist eine Abkürzung: a, 11 Buchstaben, y.

2. Wer profitiert von barrierefreien Oberflächen?
   ▸Antwort zeigen

   Richtige Antwort: Alle, auch Menschen mit vorübergehenden Einschränkungen

   Ein gebrochener Arm, grelles Sonnenlicht oder ein lauter Zug schaffen dieselben Barrieren wie dauerhafte Behinderungen. Untertitel, Kontrast und Tastaturbedienung helfen all diesen Menschen.

3. Was ist WCAG?
   ▸Antwort zeigen

   Richtige Antwort: Die W3C-Richtlinien für barrierefreie Web-Inhalte

   Die Web Content Accessibility Guidelines legen prüfbare Erfolgskriterien fest. Version 2.2 ist die aktuelle W3C-Empfehlung, und Gesetze und Verträge verweisen oft darauf oder auf 2.1.

4. Was sind die vier WCAG-Prinzipien?
   ▸Antwort zeigen

   Richtige Antwort: Wahrnehmbar, bedienbar, verständlich, robust

   Bekannt als POUR. Nutzer müssen Inhalte wahrnehmen, die Oberfläche bedienen und verstehen können und sich darauf verlassen können, dass sie mit assistiven Technologien funktioniert.

Barrierefreiheit · Middle

1. Was ist der Accessibility Tree?
   ▸Antwort zeigen

   Richtige Antwort: Eine Browser-Struktur aus Rollen, Namen und Zuständen, die aus dem DOM gebaut wird

   Assistive Technologien lesen diesen Baum über Plattform-APIs, nicht direkt das DOM. Die DevTools von Chrome und Firefox zeigen ihn für jedes Element.

2. Welche Quelle gewinnt meist bei der Berechnung des zugänglichen Namens eines Elements?
   ▸Antwort zeigen

   Richtige Antwort: aria-labelledby, dann aria-label, dann native Beschriftung und Inhalt

   Die Berechnung hat eine festgelegte Reihenfolge. aria-labelledby überschreibt alles, ein veralteter Verweis kann also still ein gutes sichtbares Label ersetzen.

3. Was ist der Unterschied zwischen aria-labelledby und aria-describedby?
   ▸Antwort zeigen

   Richtige Antwort: Das erste setzt den Namen; das zweite fügt eine ergänzende Beschreibung hinzu

   Der Name sagt, was ein Bedienelement ist, und wird immer angesagt. Die Beschreibung ergänzt Details wie Formathinweise, und Nutzer können einstellen, ob sie sie hören.

4. Warum aria-labelledby mit Verweis auf sichtbaren Text gegenüber aria-label bevorzugen?
   ▸Antwort zeigen

   Richtige Antwort: Sichtbarer Text bleibt synchron und wird mit der Seite übersetzt

   aria-label vergisst man bei Updates leicht, und Übersetzungswerkzeuge des Browsers überspringen es eventuell. Sichtbaren Text wiederzuverwenden hält eine einzige Quelle der Wahrheit.

Barrierefreiheit · Senior

1. Wie gelangt Information vom DOM zu einem Screenreader?
   ▸Antwort zeigen

   Richtige Antwort: Der Browser stellt den Accessibility Tree über Plattform-APIs bereit

   Browser bilden Rollen und Zustände auf APIs wie UI Automation unter Windows oder die AX API unter macOS ab. Deshalb unterscheiden sich die Ergebnisse je nach Paar aus Browser und Reader.

2. Welche dieser Rollen bekommt ihren Namen aus dem Inhalt?
   ▸Antwort zeigen

   Richtige Antwort: button, während textbox ein Label von anderswo braucht

   Rollen wie button und link erlauben den Namen aus dem Inhalt. Eine textbox nicht, weil ihr Inhalt der Wert des Nutzers ist.

3. Darf aria-describedby auf ein Element mit dem Attribut hidden zeigen?
   ▸Antwort zeigen

   Richtige Antwort: Ja, referenzierte verborgene Inhalte zählen trotzdem

   Die Berechnung von Name und Beschreibung schließt verborgene Knoten ein, wenn sie direkt referenziert werden. Praktisch für eine Beschreibung, die nicht auf dem Bildschirm erscheinen soll.

4. Ein Modal setzt aria-hidden="true" auf #app, aber der Fokus ist noch in #app. Was passiert?
   ▸Antwort zeigen

   Richtige Antwort: Der Fokus landet in verborgenem Inhalt; Chrome blockiert das Attribut eventuell sogar

   Verschiebe zuerst den Fokus. Chrome warnt und ignoriert aria-hidden, wenn ein Nachfahre den Fokus hält. Bevorzuge inert, das auch den Fokus entfernt.

Kombinierte Tests mit diesem Thema

Fragen aus mehreren Themen auf einmal, wie im Vorstellungsgespräch für eine konkrete Stelle.