Be A Digital Ally:

Continued Exploration of WCAG 2.2 – Focus Appearance and Focus Not Obscured

February 16, 2023

slides: https://bit.ly/BADA216

Introductions

“Jay” McKay, MT-BC, ATP

Director of Community Programs

Melissa Green

Digital Accessibility Specialist

Agenda

BADA Overview

• Welcome
• Introductions
• What is Accessibility

WCAG 2.2

• Understand proposed WCAG 2.2 changes on users with disabilities
• Learn techniques for meeting revised success criteria

Housekeeping

Thank you for letting us be a part of your journey. 

• If you have questions, type them in the chat. At the end, there will be an opportunity to jump on the mic
• Accessibility features available:  if beyond Auto Captions, e.g., ASL please request in advance when registering for the next session. 
• Ask for help

​

Knowbility

• Founded in 1999
• Knowbility is a nonprofit whose mission is to create an inclusive digital world for people with disabilities
• Our community programs and advocacy work is supported by generous donors just like you

knowbility.org/donate

Community Programs

• AIR
• AccessU
• K12 Digital Accessibility
• Be A Digital Ally

​

Definition of Accessibility

For something to be accessible, people with disabilities must be able to access and utilize it as fully and independently as someone without a disability.

​

• Can they see & hear the content?
• Do they know where to go, what to do or what to expect?
• Can they independently navigate using their preferred tools?
• Can they independently compete tasks and explore all areas?
• Can they fully participate in an authentic manner?

​

w3.org - Accessibility Intro

AEM.cast.org - Designing for Accessibility with POUR

Importance of Inclusive Design

• 15% of the world’s population has some form of disability
• Many people may not consider themselves disabled as defined by WHO
• People without disabilities benefit from accessibility

WHO World Report on Disability 2011

What is Assistive Technology

• “Assistive technology enables and promotes inclusion and participation, especially of persons with disability, aging populations, and people with non-communicable diseases. The primary purpose of assistive products is to maintain or improve an individual’s functioning and independence, thereby promoting their well-being.“ - WHO

World Health Organization AT Fact Sheet

Examples of Assistive Technology

• Screen Reader
• Refreshable Braille Display
• Alternative Navigation Methods
• Keyboard Only
• Switch Use
• Voice

• Closed Captions
• Transcripts
• Magnification
• Dark Mode/High Contrast
• WebAIM examples

Assistive technology is any product, equipment, software or system used by people with disabilities to increase, maintain or improve functional capabilities.

ATIA.org - What is AT?

Accessibility is a Journey

​

​

“Do the best you can until you know better. Then when you know better, do better.” - Maya Angelou

WCAG

What are the Web Content Accessibility Guidelines (WGAG)?

• International standard with documents that explain how to make web content more accessible to people with disabilities
• They include principles in 4 areas Perceivable, Operable, Understandable, and Robust (P.O.U.R)
• Testable Success Criteria - where conformance testing are necessary
• Sufficient and Advisory Techniques that go beyond what is required allowing authors to better address the guidelines and usability

Adapted from WCAG 2.2 Candidate Recommendation Snapshot 06 September 2022

WCAG in Summary

“WCAG offers an actionable framework for creating or remediating websites and apps to be accessible. It is not abstract, but specific and technical, and is supported by documentation that identifies methods and techniques that would be considered to pass or fail the minimum accessibility expectations of each checkpoint.”

​

boia.org- history of WCAG

Who uses WCAG?

• Industry standard
• Section 508 referenced 2.0
• Proposed legislation would utilize WCAG 2.2

Is WCAG 2.2 approved/active?

• WCAG is developed through the W3C process.
• Working draft
• Wide review working draft
• Candidate recommendation (where 2.2 is currently)
• Proposed recommendation
• W3C recommendation (Web standard)

​

​

WCAG 2.2 – Focus Appearance and Focus Not Obscured

WCAG 2.2 Draft

Proposed Success Criteria

• Guideline 2.4 Navigable
• 2.4.11 Focus Appearance (AA)
• 2.4.12 Focus Not Obscured (Minimum) (AA)
• 2.4.13 Focus Not Obscured (Enhanced) (AAA)

​

• Guideline 2.5 Input Modalities
• 2.5.7 Dragging Movements (AA)
• 2.5.8 Target Size (Minimum) (AA)

​

​

• Guideline 3.2 Predictable
• 3.2.6 Consistent Help (A)

​

• Guideline 3.3 Input Assistance
• 3.3.7 Accessible Authentication (AA)
• 3.3.8 Accessible Authentication (Enhanced) (AAA)
• 3.3.9 Redundant Entry (A)

​

2.4.7 Focus Visible (A) Promoted from WCAG 2.1 AA

4.1.1 Parsing (A) Removed from WCAG 2

​

​

WCAG 2.2 Draft – Guideline 2.4

Proposed Success Criteria

• Guideline 2.4 Navigable
• 2.4.11 Focus Appearance (AA)
• 2.4.12 Focus Not Obscured (Minimum) (AA)
• 2.4.13 Focus Not Obscured (Enhanced) (AAA)

​

• Guideline 2.5 Input Modalities
• 2.5.7 Dragging Movements (AA)
• 2.5.8 Target Size (Minimum) (AA)

​

​

• Guideline 3.2 Predictable
• 3.2.6 Consistent Help (A)

​

• Guideline 3.3 Input Assistance
• 3.3.7 Accessible Authentication (AA)
• 3.3.8 Accessible Authentication (No Exception) (AAA)
• 3.3.9 Redundant Entry (A)

​

• 2.4.7 Focus Visible (A) Promoted from WCAG 2.1 AA

​

Guideline 2.4 Navigable

Provide ways to help users navigate, find content, and determine where they are.

Navigation

• Pages have clear titles and are organized using descriptive section headings
• There is more than one way to find relevant pages within a set of web pages
• Users are informed about their current location within a set of related pages
• There are ways to bypass blocks of content that are repeated on multiple pages
• The keyboard focus is visible, and the focus order follows a meaningful sequence
• The purpose of a link is evident, ideally even when the link is viewed on its own

​

Accessibility Principles - Navigable - W3C WAI

Navigation – Technologies and strategies

• Menus
• Search functions
• Keyboard navigation
• Seeing
• Hearing
• Seeing and hearing

Success Criteria for Guideline 2.4

• 2.4.1 Bypass Blocks (A)
• 2.4.2 Page Titled (A)
• 2.4.3 Focus Order (A)
• 2.4.4 Link Purpose (In Context) (A)
• 2.4.5 Multiple Ways (AA)
• 2.4.6 Headings and Labels (AA)
• 2.4.7 Focus Visible (A) [Changed]
• 2.4.8 Location (AAA)
• 2.4.9 Link Purpose (Link Only) (AAA)
• 2.4.10 Section Headings

​

• 2.4.11 Focus Appearance (AA) – PROPOSED
• 2.4.12 Focus Not Obscured (Minimum) (AA) – PROPOSED
• 2.4.13 Focus Not Obscured (Enhanced) (AAA) – PROPOSED

“Focus indicator”

Pixels that are changed to visually indicate when a user interface component is in a focused state.

Understanding WCAG 2.2 - W3C WAI

“User interface component”

Part of the content that is perceived by users as a single control for a distinct function

User Interface Elements - Usability.gov

“Encloses”

Solidly bounds or surrounds

Understanding WCAG 2.2 - W3C WAI

“Solidly”

Understanding WCAG 2.2 - W3C WAI

“CSS pixel”

Unit of measure for lengths and measurements in CSS

h1 {

font-size: 60px;

}

​

p {

font-size: 25px;

line-height: 50px;

}

“Perimeter”

Continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box, whichever is shortest.

Sara Soueidan - A guide to designing accessible, WCAG-compliant focus indicators

“Minimum bounding box”

Smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie.

Understanding WCAG 2.2 - W3C WAI

2.4.11 Focus Appearance (AA)

When the keyboard focus indicator is visible, one or both of the following are true:

1. The entire focus indicator meets all the following:
• encloses the user interface component or sub-component that is focused, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
• has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.

​

Understanding WCAG 2.2 - W3C WAI

2.4.11 Focus Appearance (AA) 2

2. An area of the focus indicator meets all the following:
• is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
• has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

​

2.4.11 Focus Appearance (AA) 3

When the keyboard focus indicator is visible, one or both of the following are true:

1. The entire focus indicator meets all the following…
2. An area of the focus indicator meets all the following…

​

​

W3C WAI - The entire focus indicator meets criteria

W3C WAI – Yellow block along short side meets criteria

2.4.11 Focus Appearance (AA) 4

Understanding WCAG 2.2 - W3C WAI

2.4.11 Focus Appearance (AA) 5

1. The entire focus indicator meets all the following:
• encloses the user interface component or sub-component that is focused, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
• has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.

​

W3C WAI - The entire focus indicator meets criteria

WebAIM Contrast Checker

Enter a foreground and background color in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or choose a color using the color picker. The Lightness slider can be used to adjust the selected color.

Color Contrast Analyser (TPGi)

TPGi’s free color contrast checker tool that allows you to easily determine the contrast ratio of two colors simply using an eyedrop tool.

2.4.11 Focus Appearance (AA) 6

2. An area of the focus indicator meets all the following:
• is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
• has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

​

W3C WAI – An area of the focus indicator meets criteria

2.4.11 Focus Appearance (AA) 7

Understanding WCAG 2.2 - W3C WAI

2.4.11 Focus Appearance (AA) 8

Exceptions:

• The focus indicator is determined by the user agent and cannot be adjusted by the author, or
• The focus indicator and the indicator's background color are not modified by the author.

Note: What is perceived as the user interface component or sub-component (to determine enclosure or size) depends on its visual presentation…

Note: Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.

Note: Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.

Editor's note: This Success Criterion is at risk.

​

​

2.4.11 Examples

• When links receive focus, an outline is displayed around the link that contrasts with the background adjacent to the link.
• When buttons receive focus, an outline is displayed within the button (around the text) that contrasts with the button’s background.
• When text fields receive focus, an outline is displayed around the field, indicating that the input has focus.
• When radio buttons receive focus, an outline is displayed around the control, indicating that the input has focus.

Understanding WCAG 2.2 - W3C WAI

2.4.12 Focus Not Obscured (Minimum) (AA)

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

2.4.12 Example

A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page the focused item is not hidden by the footer.

Understanding WCAG 2.2 - W3C WAI

2.4.12 Examples

Sticky elements: functionality and accessibility testing - GOV.UK

2.4.13 Focus Not Obscured (Enhanced) (AAA)

When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.

2.4.13 Examples

Sticky elements: functionality and accessibility testing - GOV.UK

Benefits

• Allow many who rely on a keyboard to operate the page by letting them visually determine the component on which keyboard operations will interact at any point in time. This includes people with low vision and/or mobility impairments, who may rely on keyboard emulators including speech input, sip-and-puff software, onscreen keyboards, scanning software, and a variety of assistive technologies and alternate keyboards.

​

• People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.

Understanding WCAG 2.2 - W3C WAI

Resources

• WCAG 2.2 Draft: Currently at the Candidate Recommendation stage, we expect WCAG 2.2 to be finalized in early 2023.
• What's New in WCAG 2.2 Draft: Explanation of the proposed new success criteria with examples.
• WCAG 2.2 Supporting Documents: Quick references, guides, and techniques for understanding and meeting WCAG 2.2
• WAI Resources: W3C WAI technical and educational resources.

Questions?

We love your feedback!

https://bit.ly/FebSurveyBADA

Next Session

​

​

See you in April!

https://knowbility.org/DigitalAlly

​

AccessU 2023

May 9-12, 2023

• Early Bird tickets on sale now!

​

knowbility.org/accessu

Thank You!

Knowbility.org/Donate