What is visible focus indication?
Visible focus indication is a key requirement for people who rely on or prefer keyboard navigation. This need for focus indication includes people with mobility challenges who use a variety of assistive technologies to navigate a web page or web application. It also applies to low vision and other users who use a combination of assistive technologies to perceive and use technology. In WCAG 2.0, the requirement for a perceivable focus was solidified by success criteria 2.4.7 Focus Visible level A. What was lacking in this early requirement was a specification as to how much of a focus indication was required. In an attempt to solve this ambiguity the W3C published WCAG 2.1 with success criteria 1.4.11 Non-text Contrast Level AA.
What changes are ahead in the WCAG 2.2 release?
While success criteria 1.4.11 Non-Text Contrast did establish needed content contrast guidelines, it also set a precedent that went against a long-standing community belief that default focus indication was insufficient. It now appears that a pending release of WCAG 2.2 may reverse this. In an attempt to make sense of all these requirements, I recently delivered a presentation covering the various success criteria that now makeup focus and contrast requirements for focusable objects, as well as a preview of what might appear in WCAG 2.2.
Presentation to the Austin Accessibility and Inclusive Design Meetup
(April 2020)
Microassist Accessibility Solutions
Inaccessible content, whether on websites, or within online training, applications, platforms, or documents creates barriers to information, prevents purchases and transactions, deters job applications, discourages other positive experiences with your brand, and is increasingly being viewed as violating the Americans with Disabilities Act. To discuss accessibility solutions for your organization, please Contact Our Accessibility Team.
External Links Referenced in Presentation
- Presentation Links: WCAG 2.0 – https://www.w3.org/TR/WCA
- WCAG 2.1 – https://www.w3.org/TR/WCAG21/
- WCAG 2.2 – https://www.w3.org/TR/WCAG22/
- WCAG 2.2: 5.1 New Features – https://www.w3.org/TR/WCAG22/#x5-1-new-features-in-wcag-2-2
- WCAG 2.2: 5.1 Focus Visible Enhanced – https://www.w3.org/TR/WCAG22/#focus-visible-enhanced
- WCAG 2.2: Understanding: https://www.w3.org/WAI/WCAG21/Understanding/focus-visible-enhanced.html#size-of-indicator
- WAI-ARIA Authoring Practices 1.1 – https://www.w3.org/TR/wai-aria-practices-1.1/
- WAI-ARIA Authoring Practices 1.1: 3.22 Tabs – https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
- G149: Using user interface components that are highlighted by the user agent when they receive focus – https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G149
- Authoring Tool Accessibility Guidelines (ATAG) – https://www.w3.org/WAI/standards-guidelines/atag/
- User Agent Accessibility Guidelines (UAAG) – https://www.w3.org/WAI/standards-guidelines/uaag/
- Border Without Focus: Active User Interface Components – https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#user-interface-components
- Non-Text By Example – http://at.microassisthosting.com/matraining/a11ymeetup2020/WCAG21nontext/index.html
- Default Focus Example – http://at.microassisthosting.com/matraining/a11ymeetup2020/defaultcontrast/index.html
- Chromium New Focus Blog – https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.htmlee
- Microsoft Chromium Blog – https://blogs.windows.comhttps://blogs.windows.com/msedgedev/2019/10/15/form-controls-microsoft-edge-chromium//msedgedev/2…
- Paul J Adam Test – http://pauljadam.com/demos/focusvisible.html
Subscribe to Accessibility in the News
Stay informed! Get your weekly update on digital accessibility standards, private and public sector trends, litigation, events, and more.