Checkbox used as expandable control

[Heydon]

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>