Onnodige "arialabeledby" -label + aria-live

[savitris]

Pagina: PDC Online Loket Homepagina

Probleem: De Searchbar heeft een aria-label en een arialabeledby label (downshift-18-label).

Potentiële oplossing:
Alleen de aria-label is genoeg om te hebben.

Extra: Voeg toe aria-live="polite" zodat de Screenreader gebruiker updates in een beter tempo kan ontvangen (van de item suggesties).

Gerelateerde afbeelding:

Succes Criteria:
1.3.1
4.1.2

[AliKdhim87]

Ik heb de zoekbalk aangepast zodat alleen het aria-labelledby attribuut behouden blijft. Dit zorgt voor een duidelijke koppeling met het label, wat de toegankelijkheid verbetert voor gebruikers van assistive technologies.

Op basis van de implementatie van de zoekbalk lijkt het niet noodzakelijk om het aria-live="polite" attribuut toe te voegen. Het aria-live attribuut wordt doorgaans gebruikt om assistive technologies te informeren dat de inhoud binnen een element dynamisch kan veranderen en aan de gebruiker moet worden aangekondigd.

In ons geval lijkt de autocomplete-functionaliteit al goed gestructureerd met passende rollen en attributen, zoals role="listbox", role="option", en aria-selected, die voldoende informatie bieden aan assistive technologies over de dynamische wijzigingen in de autocomplete-lijst.

[savitris]

@AliKdhim87
De aria-labelledby="downshift-382-label" wordt niet gelezen. Waar komt de waarde downshift-382-label vandaan?
Op dit moment, ook al is er een aria-labelledby, wordt er nog steeds van uitgegaan dat de component geen toegankelijke tekst (Accessible Name) bevat.

[Robbert]

Gebruik liever aria-labelledby dan aria-label, voor betere Google Translate support.

[AliKdhim87]

@savitris Met betrekking tot het lezen van de aria-labelledby="downshift-382-label" attribuut, welke browser heb jij gebruikt? De waarde van de aria-labelledby wordt automatisch gegenereerd door het downshift-pakket. Als je de Safari-browser gebruikt, lijkt het erop dat deze een bug heeft: downshift-js/downshift#1539

[AliKdhim87]

Het lijkt erop dat het een probleem is met Safari.

• VoiceOver in Safari on macOS cannot interact with combobox downshift-js/downshift#1181
• https://forums.developer.apple.com/forums/thread/706788

[savitris]

@savitris Met betrekking tot het lezen van de aria-labelledby="downshift-382-label" attribuut, welke browser heb jij gebruikt? De waarde van de aria-labelledby wordt automatisch gegenereerd door het downshift-pakket. Als je de Safari-browser gebruikt, lijkt het erop dat deze een bug heeft: downshift-js/downshift#1539

@AliKdhim87 Helaas zie ik het probleem ook op Chrome, Edge en Firefox.