search

frameless / strapi

https://loket.digitaal.utrecht.nl/
2 stars 0 forks source link

Onnodige "arialabeledby" -label + aria-live #689

Open savitris opened 1 month ago

savitris commented 1 month ago

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: Screenshot 2024-04-30 at 11 16 10

Succes Criteria: 1.3.1 4.1.2

AliKdhim87 commented 1 month ago

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 commented 2 weeks ago

@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 commented 2 weeks ago

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

AliKdhim87 commented 2 weeks ago

@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: https://github.com/downshift-js/downshift/issues/1539

AliKdhim87 commented 2 weeks ago

Het lijkt erop dat het een probleem is met Safari.

savitris commented 2 weeks ago

@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.