Documentatie: toegankelijkheid van expandable helper text

nl-design-system / rvo

Work in Progress: RVO Design System based on the NL Design System architecture. Rijksdienst voor Ondernemend Nederland / rvo.nl

https://rvo.nl/roos/

European Union Public License 1.2

2 stars 1 forks source link

Open Robbert opened 9 months ago

Robbert commented 9 months ago

[ ] uitleg over hoe het niet moet:
- [ ] niet uitleg in form label plaatsen
[ ] uitleg over welke HTML wel goed is (<details>, of <button aria-expanded="true">, of <button aria-haspopup="...">, of <button popover>?)
[ ] hoe koppel je de uitleg via aria-describedby?
[ ] uitleggen waarom een tooltip een anti-pattern is (obscures content, displays on hover, etc)
[ ] link naar relevante WCAG regels

rianrietveld commented 9 months ago

Relevante extra's als je toch een tooltip wilt:

Groote aanklikbare gebied icoon: WCAG AA 2.5.8
Kleurcontrast icoon: tenminste 3:1 tov achtergrond, check ook dark mode
Accessible name icoon: niet alle namen "help" noemen oid, maar meer betekenisvol en niet voor alles hetzelfde (klik hier effect)

Bij nadelen ook: icoontje openklikken vergt extra handeling en kan een hogere cognitieve belasting zijn.

Yolijn commented 7 months ago

Voorstel: verplaats dit issue naar discussions om input uit de community op te halen

Robbert commented 4 months ago