You are here:
NYPL Design Toolkit
Version: 0.1.36NYPL Design Toolkit
- About This Toolkit
- Buttons And Menus
- Color Accessibility Table
- Color Reference
- Forms
- Layout
- General Microformats
- SVG Index
- Tables And Data
- Visible Focus
Resources
- Landmark roles & Regions
- Skip Links
- Development Checklist
- Glossary
- NYPL User Experience & Visual Design Project Index
- Visible Focus
Examples
- Discovery home
- Discovery search results
- Discovery detail page
- Discovery request page
- Discovery request form
- Discovery request confirmation page
Visible Focus
Considerations
- At a minimum we should never use outline: 0, which removes default focus indicators.
- Visible focus should work and be tested on smaller viewports as well.
- The team could consider setting different focus styles for certain elements. For example changing the background color of inline links on focus.
- If we refine the color of the focus indicator, it should have a contrast of 3:1 with the background, see the Standards section for more information on that.
Standards
WCAG 2.0, 2.4.7 Focus Visible
This is the success criteria requiring visible focus.
- WCAG Article: Focus Visible: Understanding SC 2.4.7
WCAG 2.1, 1.4.11 Non-text Contrast
WCAG 2.1 set a contrast ratio minimum of 3:1 for user interface components.
Reminder, you can test contrast ratios with tools like WebAIM’s Color Contrast Checker.
- WCAG 2.1 Non-text contrast
- WCAG 2.1 article Understanding Success Criterion 1.4.11: Non-text Contrast
Resources
Additional resources which may be of interest.
- Paciello article around backwards compatibility :focus-visible and backwards compatibility
- Deque article with general intro to focus indicators Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators