half-assedcessibility
We have 15 minutes so...
keyboard accessible
interactive components
first
<Button />
- Focusable regardless of tag type or disabled state�
- Keyboard clickable
�- Screen readers recognize it as a button (unless it has an href)
�- Screen readers can tell if it’s disabled
handleClickIntent()
<Input />�<Select />
<Checkbox />
<RadioGroup />
<TextArea />
- screen readers read labels (and fieldsets)�
- screen readers recognize checkboxes and radio buttons as such
- don’t get fancy with checkbox and radio inputs,
If you do, make sure you can toggle it with the keyboard.
- don’t get fancy with select dropdowns unless you know what you’re doing
at a bare minimum the arrow keys should select the prev/next item when focused
useAutoFocus()
<Modal />
- esc to close (please!)�
- autofocus first focusable element�
- restore focus�
- focus trapping�
- role='dialog'��- labelledBy
enableSmartFocusOutlines()
Contrast checkers
Contrast checkers
accessible-colors.com
usecontrast.com
webaim.org/resources/contrastchecker/
chrome.google.com/webstore/detail/wcag-contrast-checker/plnahcmalebffmaghcpcmpaciebdhgdf?hl=en
contrast-ratio.com
monsido.com/tools/contrast-checker
etc, etc, etc...
ChromeVox
ChromeVox
ChromeVox
Code from this talk available here