Focus
Are your interactive elements designed for logical focus behaviour?
Why it’s important
- Charmaine has low vision and uses a screen reader to navigate the web. When a modal opens and doesn’t receive focus she may not even know it exists.
- Arun has a motor impairment that prevents him using a mouse.
Next steps
- Focus states cannot be the same as the hover states. However the hover state should be included with the focus styles.
- Check the thickness of lines used for a focus state. Lines smaller than 2px may be accessible, but will be hard to see. Try using a squint test to see how low vision users might be viewing your site.
- Focus states cannot just be a color change. You need a dedicated visual indicator(this link opens an external website). This could be an outline, a highlight, any sort of shape or pattern that is different from the hover state.
- Focus states are for drawing attention to the element. Avoid designing them to blend in with the UI.
- Work with developers for any interactions on the page that require JavaScript. Add invisible Content for screen reader users(this link opens an external website) to identify focus elements.
References
Resources
- Accessibility learnings: focus(this link opens an external website)
- Understanding focus state styles (GOV.UK)(this link opens an external website)