Example Widget: Inaccessible Custom Checkbox

Accessibility Issues

Keyboard support
Keyboard focus styling
Role information
Accessible name
State of checkbox

Example

Checkbox example on WebEdit

Pizza Toppings Green pepper Onion

Mushrooms

Spinach

HTML Source Code

CSS Source Code

Javascript Source Code

Audio Transcript

This slide shows a set of 4 checkboxes. The first 2 are standard HTML checkboxes and the next two are custom checkboxes made out of DIV elements, Javascript and CSS. The accessibility issues for these custom checkboxes include: Keyboard support so that screen reader and keyboard only users can interact with the checkbox. Keyboard focus styling so that keyboard only users can see that they are interacting with the checkbox. Role information on the custom widget being a checkbox. Accessible name identifying what the checkbox is about. Communicating the state of checkbox. As we view the source code you can see that the first two checkboxes are defined using the standard HTML input type checkbox. The last two checkbox are defined using DIV elements with event handlers and CSS to define the checked state using the psuedo technique of ::before based on the class name of "checked". The Javascript shows a only a click event handler for operation with only the mouse.