If it’s interactive, it needs a focus style
Speaker: Eric Bailey
Twitter: @ericwbailey
Links style
- focus, active, visited, hover
CSS rules
form: focus-within- Highlight tables that are highlighted.
a:focus-visible (pseudoclass) Verify in caniuse.com
The web is more than mouse and keyboard!
- Browser sniffing still happens.
Resources:
- https://noti.st/ericwbailey/TcMJFP/if-it-s-interactive-it-needs-a-focus-style
The following notes were taken by: Quimana Boots
- Is it beautiful? Is it useful?
- The web is NOT print and should not be treated as such
- Focus styles
- affordances
- give multiple affordances
- Use CSS to overwrite default hover states
- All states should be distinct
- Identify and activate
- Don’t shift the layout
- CHECK HIGH CONTRAST MODE
- New ways to focus
- Focus-within and focus-visible
- Focus-visible
- Activate, don’t identify
- Concerns
- repeating mistakes of browser sniffing
- sharing PII without knowing how it will be used
- Bad design decisions made in good faith
- Being forced into an AT-onlly companion experience
- Embrace the Unknown
- Good UX meets user where they are
- https://noti.st/ericwbailey