search

smashingmagazine / redesign

Reporting bugs and weird issues on the shiny new Smashing Magazine.
https://next.smashingmagazine.com
41 stars 2 forks source link

Checkbox used as expandable control #291

Open Heydon opened 6 years ago

Heydon commented 6 years ago

To reproduce

  1. Go to https://www.smashingmagazine.com/membership/signup/member
  2. Running a screen reader, such as VoiceOver, focus the "Ah what is CVV again?" control
  3. It is identified as a checkbox

This was reported by a screen reader to me as being confusing, because there is no indication that the checkbox is for opening an expandable section.

To fix

Make the checkbox control a button and toggle its expanded state. This will prompt screen readers to say "Ah what is CVV again? Toggle button, collapsed" (unexpanded state) and "Ah what is CVV again? Toggle button, expanded" (expanded state).

Unexpanded state

<button aria-expanded="false">Ah what is CVV again?</button>

Expanded state

<button aria-expanded="true">Ah what is CVV again?</button>