🚀 Feature: Tooltips und aria-labels bei Bedarf abweichen lassen

[gkollotzek]

Goals

In bestimmten Anwendungsfällen ist es hilfreich im aria-label noch weiteren Kontext geben zu können, der aber beim visuellen Tooltip nicht notwendig ist.

Background

Wir haben eine Liste von Filter-Badges, die geschlossen werden können. Der Tooltip-Text und das aria-label sind für alle Schließen-Buttons "Filter entfernen".

In einer BITV-Prüfung kam der Hinweis:
"Filter Entfernen" sollte den entsprechenden Filter im zugänglichen Namen enthalten zur besseren Unterscheidbarkeit.

Es ist nicht möglich einen Text beim Tooltip und einen anderen Text beim aria-label zu setzen. Das wäre in diesem Fall aber sehr hilfreich, so könnte im aria-label auch der entsprechende Filtername gesetzt werden. Für sehende Nutzer macht es keinen Sinn den Filter im Tooltip zu zeigen, da so auch der Tooltiptext sehr lang werden kann.

Proposal

Ermöglichen einen Text beim Tooltip und einen anderen Text beim aria-label zu setzen. So könnte im aria-label auch der entsprechende Filtername gesetzt werden.

[deleonio]

Hi @gkollotzek,

danke für die Inspiration. Wir prüfen die Machbarkeit.

[laske185]

Beim Badge ist der aria-label mit dem Titel kombiniert.

[Chrisdo82]

@deleonio @laske185
Ich habe es mir noch mal angeschaut und ich sehe in den Beispielen (v2 & v3) nicht, dass der Wunsch von oben schon geht. Das Zielbild ist ja, dass im Tooltip etwas anderes stehen kann, wie im aria-label vom Smart Button. Gemeint ist nicht der aria-label von der Badge.

Ich sehe auch nicht in der Doku, weder v3 noch v2, dass ich beim _smartButton ein _aria-label setzen kann. Falls es doch schon geht, dann wäre es super zu wissen wie.

[laske185]

Wir prüfen das Thema erneut, wie die Benamungen sein müssen.

[deleonio]

Hi @gkollotzek und @Chrisdo82,

ich hoffe, das passt für Euch: https://stackblitz.com/edit/vitejs-vite-ewakt7uu?file=src%2FApp.tsx

[Chrisdo82]

Hi @deleonio,

leider nicht. Das Ziel bzw. der Wunsch ist ja, dass das aria-label des Buttons vom Inhalt des Tooltips abweichen kann.

[deleonio]

Nein, weil das für die Sprachsteuerung nicht vom sichtbaren Label abweichen darf. Es wäre aber glaube neust noch aria-description möglich.

@gkollotzek Ist das überhaupt barrierefrei? (FYI - @cbraehmig) Wenn ja, bitte eine Markup-Skizze.

[gkollotzek]

Stimmt, der sichtbare Text müsste zumindest im aria-label enthalten sein. Also Statt "Filter xy entfernen" müsst es sowas wie "XY Filter entfernen" oder "Filter entfernen für XY". Finde die Idee mit aria-description bzw. aria-describedby (für die sichtbaren Filter namen) spannend. Ich hab morgen einen Termin mit unseren BF-Prüferinnen und spreche es da an :)

Danke dir für die schnelle Rückmeldung.

[deleonio]

wir arbeiten am ticket weiter #8608