Startseite von Wix
Anmelden

Barrierefreiheit: ARIA-Attribute zu deinen benutzerdefinierten Webanwendungen hinzufügen

4 Min. Lesezeit
ARIA-Attribute bieten zusätzliche Informationen über die Semantik von Elementen für unterstützende Technologien wie Screenreader. Du kannst ARIA-Attribute zu allen benutzerdefinierten Elementen oder Anwendungen auf deiner Website hinzufügen.
ARIA-Attribute sind wichtig, da sie definieren, wie benutzerdefinierte Elemente und Anwendungen zugänglich gemacht werden können, wenn das mit dem HTML des Elements nicht möglich ist. 
Wichtig:
Diese Funktion ist für Benutzer mit benutzerdefinierten Anwendungen/Elementen gedacht, die ARIA-Attribute erfordern. Wenn du diese nicht auf deiner Website hast, musst du die ARIA-Attribute nicht bearbeiten.

ARIA-Attribute hinzufügen

Wir haben ARIA-Attribute für die meisten Elemente einer Website bereits fest programmiert. Wenn du jedoch benutzerdefinierte Anwendungen erstellt hast, möchtest du möglicherweise deine eigenen ARIA-Attribute für Barrierefreiheit hinzufügen.
Studio Editor
Wix Editor
Aktiviere den Dev-Modus (Velo by Wix) im Studio Editor, um Attribute zu Elementen hinzuzufügen. Mit Velo kannst du Programmierung hinzufügen, Datenbanken erstellen und mehr.
  1. Wähle auf der linken Seite des Editors Code  aus.
  2. Wähle die entsprechende App oder das Element aus und klicke auf das Symbol für Weitere Aktionen .
  3. Wähle Barrierefreiheit.
  4. Wähle Attribut hinzufügen.
  5. Wähle ein Attribut aus dem Aufklappmenü.
  6. Gib eine Bezeichnung ein/wähle die Stufe oder den Wert aus.
  7. Wähle Hinzufügen aus.
Screenshot des Panels für Barrierefreiheit eines Elements im Studio Editor. Der Mauszeiger klickt auf den Button „Attribute hinzufügen“.

Du kannst ARIA-Attribute zu folgenden Elementen hinzufügen:

Element
Zimmer
Lightbox
Label
Text 
Container-Box
label, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hidden
Streifen
label, tabindex, role [heading, status, alert], live, atomic, hidden, current
Repeater-Steuerelemente
label, role [heading, status, alert]
Text-Button
tabindex, pressed, expanded, haspopup
Wir arbeiten ständig an der Möglichkeit, weitere Elemente mit ARIA-Attributen zu versehen. [Kontaktiere uns, wenn du spezielle Fragen zu ARIA-Attributen hast.

Deine ARIA-Attribute bearbeiten

Nachdem du Attribute zu benutzerdefinierten Apps hinzugefügt hast, kannst du diese jederzeit über das Symbol für Barrierefreiheit bearbeiten und aktualisieren . Dieses Symbol wird automatisch zu Elementen hinzugefügt, mit denen du Attribute verbunden hast.

Um das Attribut zu bearbeiten:

  1. Wähle das Element/die Anwendung in deinem Editor aus.
  2. Wähle das Symbol für Barrierefreiheit  aus.
  3. Fahre mit der Maus über das entsprechende Attribut und wähle das Symbol für Weitere Aktionen  aus.
  4. Wähle Bearbeiten.
  5. Nimm die entsprechenden Änderungen vor und wähle Speichern.

Arten von ARIA-Attributen

Name des Attributs
Category
Tokens
tabindex

0, -1
Rolle

token: according to definition in primitive
aria-level

int
aria-live
Live
token: polite, assertive
aria-multiline 
Beschreibung
true, false
aria-multiselectable
Beschreibung
true, false
aria-pressed
Bundesstaat
true, false
aria-relevant
Live
token: all, additions, removals, text
aria-activedescendant
Beziehungen
ID_REF
aria-atomic
Live
true, false
aria-autocomplete
Beschreibung
true, false
aria-controls
Beziehungen
ID_REF
aria-current
Bundesstaat
step, page, true, false
aria-describedby
Beziehungen
ID_REF (space separated items)
aria-expanded

true, false
aria-haspopup
Beziehungen
dialog, menu, true, false
aria-hidden

true, false
aria-invalid
Bundesstaat
true, false
aria-label

string
aria-labelledby 
Beziehungen
ID_REF (space separated items)
Screenshot des Panels für Barrierefreiheit eines Elements im Studio Editor. Der Mauszeiger klickt auf den Button „Attribute hinzufügen“.