Accessibility 101:
Focus
Accessibility
What is focus?
What is focus?
- A browser's awareness of which on-screen control is currently receiving input from the keyboard, clipboard or other means.
- Link / button
- Checkbox / radio button
- Input field
- Custom control
Who does it help?
Who does it help?
- Switch users
- movement trackers
- puff & suck pipes
- buttons (head/foot/arm)
- etc.
- Keyboard users
- screen reader enabled
- arthritis / RSI / injury
- mouse not working
- shortcuts
* screen readers also have own "focus/cursor" for reading
How can you see/use it?
How can you see/use it?
- Browser default style
- Web page styles
- Announced by screen reader
- Tab
- Shift + Tab
- Space / Enter
* Safari requires Option + Tab unless you change settings
Try it out!
- Go to your favourite site and see if you can navigate using only the keyboard.
- What works?
- What doesn't work?
* it doesn't have to be BBC
Design
- Don't rely on the default style
- Include styles for interactive elements hover, focus, active and visited/used states
- Decide if hover and focus could/should look the same
- Annotate the order focus should follow
- Make it clear to the developer and tester what should happen
Development
- Ensure all interactive/actionable elements can receive focus
- Use taborder="0" or "-1" to include or exclude elements from focus order
- Use HTML order to define focus order
- Make sure other page styles do not obscure the focus style (LVFHA)
- Define :focus style
- Identify controls that could/should behave as a single element
- Ensure you don't trap the user
Testing
- Try to do everything using only a keyboard
- Which elements
- Visibility
- Order
- Traps
Accessibility