Formulare einer Tabelle mit verschiedenen Funktionen organisieren

[Matthias Scharwies]

Servus!

Hallo Gunnar,

danke für die Hinweise zur Barrierefreiheit, aria-sort hatte ich sogar bereits hinzugefügt, aber aria-describedby kannte ich noch nicht.

In diesem Zusammenhang hätte ich noch eine Frage: HTML-Elemente, die entweder leer sind oder keine eindeutige Bezeichnung enthalten (weil es sich beim Inhalt z.B. um eine SVG handelt), sollen ja für Screenreader trotzdem sinnvoll interpretierbar sein. Nun habe ich da schon von mehreren Möglichkeiten gehört, z.B. die Attribute aria-label oder title zu benutzen oder ein span-Element einzufügen, das dann per CSS-Klasse visually hidden ist.

Welche von diesen drei Möglichkeiten ist denn nun eigentlich die geeignetste?

Schwer zu sagen:

• Barrierefreiheit/Webseiten_zugänglich_gestalten#WAI-ARIA

Fazit: Idealerweise keine divs, sonder die semantisch passenden Elemente.

[EDIT] Bei einem SVG entweder

• ein title oder metadesc-Element - beides ist zugänglich
• ein role-Attribut z.B. role="decoration" ^[1]
• als img ein alt-Attribut
• …

ich sollte die Fragen vorher lesen! 😉

[/EDIT]

Herzliche Grüße

Matthias Scharwies

---

1. https://css-tricks.com/accessible-svgs/ ↩︎