search

julia-stevens / the-client-website

Ontwerp en maak een website voor een opdrachtgever en bespreek het resultaat tijdens de Sprint Review
https://julia-stevens.github.io/the-client-website/
MIT License
0 stars 0 forks source link

Aria label open/sluit ... #8

Closed KoopReynders closed 1 month ago

KoopReynders commented 1 month ago

https://github.com/julia-stevens/the-client-website/blob/7f8e5e1d8716b878eced6e68dd58d38beef80484/index.html#L15

Waarom is het aria label hier nodig?

julia-stevens commented 1 month ago

https://github.com/julia-stevens/the-client-website/blob/a47de40fd0b51804ad3c6629942580c191021ce7/index.html#L16

Ik heb deze a vervangen voor een input met checkbox. Aangezien hier een hamburger menu in komt, heb ik geen label toegevoegd. Daarom heb ik wel een aria-label toegevoegd, zodat een screen reader dit kan voorlezen

Commit: a47de40fd0b51804ad3c6629942580c191021ce7

Is dit op deze manier beter/juist geschreven? @KoopReynders

KoopReynders commented 1 month ago

Ja .. nou ... goede vraag!

Hier zijn 2 dingen om over na te denken voor dit element/functionaliteit:

  1. Wat is de knop, wat moet het doen? Is het een formulier waarbij data moet worden gepost? Of is het een "link" in de breedste zin van het woord, ga je ergens naar toe als je er op klikt? Dit bepaalt of je een <input> (met form element) of een <a> nodig hebt.
  2. Hoe weet iemand die met een screenreader browst en/of alleen de html gebruikt wat de knop doet? Als het een link is, zorg er dan voor dat de link text beschrijvend is, dan heb je geen aria-label nodig. Voor meer info en best practices hierover kan je bijvoorbeeld dit artikel lezen: https://usability.yale.edu/web-accessibility/articles/links Als het een formulier is dan kun je met de juist attributen voor een <input> voldoende informatie geven voor bv een screenreader.