WCAG Summary and Breakdown

Introduction

Welcome to my Web Content Accessibility Guidelines summary and breakdown. Here all the criteria of the WCAG 2.1 will be broken down into an easily navigable list with clear explanations along with their conformance levels. Links to the individual criteria pages from w3.org will be provided.

Most federal/government contracts and VPATs call for WCAG 2.0 Level AA compliance, yet at this stage companies need to push for 2.1 compliance if they are moving into remediation. If a company wants to be Level AA compliant, that means that they must satisfy all of the Level A and Level AA criteria. Level AAA is understood by the W3C as being practically impossible to achieve, and they are meant for very specific cases, but beig able to conform to as many AAA criteria as possible is a nice to have if not burdensome to the company.

1. Perceivable

Information and user controls must be presented in a way that all users can perceive.

1.1 - Text Alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

1.1.1 - Non-Text Content - Level A

All non-text content presented to a user has a text alternative that serves an equivalent purpose, with the following exceptions:

1.2 - Time-based Media

Provide alternatives for time-based media.

1.2.1 - Audio-only and Video-only prerecorded - Level A

For audio-only prerecorded content, am alternative for time-based media is provided that gives the user equivalent information to the audio-only content. Pre-recorded video content must have an alternative method of description and an audio-based track that provides equivalent information with what is shown in the video.

1.2.2 - Captions - Level A

Captions are provided for all pre-recorded audio content in synchronized media unless the audio is built as an alternative for text content and is clearly labeled as such.

1.2.3 - Audio description or media alternative (prerecorded) - Level A

Audio descriptions or time-based media alternatives are provided for pre-recorded video content and synchronized media, unless the video is a media alternative for text based content and is clearly labeled as such.

1.2.4 - Captions (Live) - Level AA

Captions are provided for all live audio content in synchronized media.

1.2.5 - Audio descriptions (prerecorded) - Level AA

Audio description is provided for all prerecorded video content in synchronized media.

1.2.6 - Sign Language (prerecorded) - Level AAA

Sign language interpretation is provided for all audio content in synchronized media.

1.2.7 - Extended audio description (Prerecorded) - Level AAA

Where pauses in the audio track of prerecorded video are insufficient to allow for audio description, extended audio description is provided for all synchronized media. Extended audio description is where the prerecorded content is paused and edited in places where an audio description narrator can give themselves enough time to fully describe the content

1.2.8 - Media alternatives (prerecorded) - Level AAA

Descriptions or alternatives to time-based media are provided for all prerecorded synchronized media and all prerecorded video-only content.

1.2.9 - Audio-only (Live) - Level AAA

An alternative for time-based media that gives a user equivalent information to live audio content is provided.

1.3 - Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

1.3.1 - Info and Relationships - Level A

Information, structure, and relationships can be programmatically determined or are available in text forms. Examples include required input fields being marked with a color but also utilizing the required attribute or text indicator like an asterisk, optional fields being called out in text instructions before users navigate into the text fields, appropriate table header structures used for tabular content, using headings and text formatting to define content structure.n

1.3.2 - Meaningful Sequence - Level A

When the sequence in which content is presented can directly affect its meaning, a correct meaningful sequence is programmatically discernible; headings are used in the correct order to not break understanding. Only one h1 on the page, content is ordered with the heading level increasing depending on how focused the content becomes. Heading levels are not skipped or used solely as decoration/text formatting elements.

1.3.3 - Sensory Characteristics - Level A

Instructions provided for operating or understanding content or controls do not rely solely on sensory characteristics such as shape, size, color, screen location, orientation, or sound. For example, do not say "To continue, click the big blue button at the bottom right of the screen."

1.3.4 - Orientation - Level AA

Content is not restricted to being displayed in only Portrait or Landscape orientation unless the experience orientation is deemed essential. A user should be able to use an app or site in either orientation unless switching orientation breaks the overall fundamental experience. Examples of locked orientation experiences that are essential would be displaying a bank check, a piano app, displaying slides, etc.

1.3.5 - Identify Input Purpose - Level AA

The purpose of any input field collecting data about the user can be programmatically determined. Inputs are labeled clearly and user agents and assistive technology can understand the purpose of the inputs so that they may be understood through screen readers and controlled via speech and autofill functions.

1.3.6 - Identify Purpose - Level AAA

The purpose of user interface components, icons, and regions can be programmatically determined, allowing for assistive tech to replace them with perceivable elements for a user that needs them.

1.4 - Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

1.4.1 - Use of Color - Level A

Color is not used as the only means to convey information, prompting a response, highlighting an action, etc. Examples would be only using a color to indicate an error, using different colors to call out data in a chart or table , or only using color labels on user controls without additional text labeling.

1.4.2 - Audio Control - Level A

If any audio plays for more than 3 seconds on a webpage, controls are present to allow a user to mute/turn off the audio or control the volume independently of the system audio.

1.4.3 - Color Contrast (Minimum) - Level AA

Text and images of text are presented to the user with a contrast ratio of at least 4.5:1, except for text and images of text involved with branding/logos, disabled user controls, pure decoration, or large text. Large text and images of text must have a color contrast of at least 3:1.

1.4.4 - Resize Text - Level AA

Except for images of text and captions, text can be scaled up to 200% without assistive technology without losing context or functionality.

1.4.5 - Images of Text - Level AA

Text is used to convey information instead of images of text except for when the image of text can be customized by the user for their requirements, or if the image of text is essential to the core operation of the feature or site, or is a logo or part of branding.

1.4.6 - Color Contrast (enhanced) - Level AAA

Text and Images of Text have a contrast ratio of at least 7:1 except for when incidental text is part of an inactive or disabled user control, are pure decoration or invisible, are part of a logo/branding, or are large scale text or images of text, which would then have a contrast ratio of at least 4.5:1.

1.4.7 - Low or No Background Audio - Level AAA

Any prerecorded audio-only content that contains primarily foreground speech, is not part of an audio RECAPTCHA challenge, is not an earCon or audio logo, and is not musical expression has at least one of the following conditions met:

No Background

audio contains no background sounds.

Turn Off

background sounds can be turned off.

20db

Background sounds are at least 20 decibels lower than the foreground speech, except for sounds that last 1-2 seconds.

1.4.8 - Visual Presentation - Level AAA

For the visual presentation of blocks of text, controls are provided to adjust the following attributes:

• Foreground and background colors can be changed.
• Width is no more than 80 characters.
• Text is not center justified, aligned to both the left and right margins.
• Line Spacing/leading is at least 1.5 spaces within paragraphs, and paragraph spacing is at least 1.5x larger than line spacing.
• Text can be resized up to 200% and reflow so a user does not have to scroll horizontally to read all of the content.

1.4.9 - Images of Text (No Exception) - Level AAA

Images of text are only used for pure decoration, or where a presentation of text is essential for the images being conveyed. Logos/branding are considered essential.

1.4.10 - Reflow - Level AA

Content can be presented without loss of function or context/readability and without two-dimensional scrolling when zoomed in 400%, or 320 CSS pixels wide. Content should reflow into single column layout allowing the user to scroll in only one dimension to read the text fully. Content that requires two dimensions for usage or meaning is the exception, such as diagrams, images, games, charts, presentations, videos, and interfaces that require keeping scrollbars visible while manipulating content.

1.4.11 - Non-Text Contrast - Level AA

Active user interface components or component s not controlled by the user agent/browser and graphical elements that are required to understand the content except for when the element is essential have a contrast ratio of 3:1 against the adjacent colors.

1.4.12 - Text Spacing - Level AA

In experiences that support the following text properties, no loss of function or readability occurs when the following properties are set:

• Line Height/Line Spacing set to at least 1.5x font size.
• Spacing paragraphs to at least 2x the font size.
• Letter Spacing/Tracking set to at least 0.12x the font size.
• Word Spacing set to at least 0.16x the font size.

1.4.13 - Content on Hover or Focus - Level AA

When content becomes visible or hidden when receiving or losing cursor hover or keyboard focus, the following are true, with the exception of when the presentation is controlled by the browser/user agent:

Dismissible

A method is available to dismiss the content without changing hover or keyboard focus unless new content communicates an input error or does not obscure/block any underlying content.

Hoverable

If cursor hover triggers the new content, then the cursor can be moved over the new content without it being dismissed.

Persistent

The new content remains visible until hover or focus trigger is removed, the user dismisses it, or when the new content is no longer relevant.

2. Operable

User interface components and controls must be operable.

2.1 - Keyboard Accessible

make all functionality available from a keyboard

2.1.1 - Keyboard - Level A

All functionality is operable through a keyboard interface without requiring specific timings for individual keystrokes. Path-dependent user input, such as handwriting entry, are exceptions to this criteria. Keyboard functionality allows for multiple assistive tech methods to function with content and interaction.

2.1.2 - No Keyboard Trap - Level A

If keyboard focus can be moved to an object or control using a keyboard interface, then focus must be able to be moved away from that component using just the keyboard interface. If any additional modified key inputs are required to move focus away from a component, such as arrow or modified tab key input, the user is informed of the controls and escape methods.

2.1.3 - Keyboard (No Exception) - Level AAA

All functionality of the content is operable through a keyboard and no specific timings are required for individual keystrokes.

2.1.4 - Character Key Shortcuts - Level A

If a keyboard shortcut is implemented within the content that uses only a letter, including uppercase and lowercase letters, punctuation, and special symbols, then at least one of the following is true:

Turn Off

User is given the ability to turn off the shortcut.

Remap

User is given the ability to remap the shortcut.

Active Only on Focus

The shortcut is only functional when the component is focused

2.2 - Enough Time

Providing users enough time to read and interact with content.

2.2.1 - Timing Adjustable - Level A

For each time limit that is set by the content, at least one of the following is true:

Turn Off

The user is allowed to turn off the time limit before encountering it.

Adjust

The user is allowed to adjust the time limit before encountering it over a wide range up to 10x the original limit.

Extend

The user is informed of when time is about to expire and is given a simple control to extend the limit when pressed within 20 seconds of the alert, and time extension can extend up to 10x the original limit.

Real Time Exception

The timing is required as part of a real-time event, such as an auction, and an alternative to the timing event is possible.

Essential Exception

Timing is essential to the content and extending the limit would invalidate the activity.

20-hour exception

The time limit is longer than 20 hours.

2.2.2 - Pause, Stop, Hide - Level A

For any moving, blinking, scrolling, or auto-updating information, the user must be given a control to pause, or hide the content if it starts automatically, lasts more than 5 seconds, and is presented in parallel with other content, unless pausing, stopping, or hiding the content invalidates the activity. Auto-updating content must be allowed to be paused, stopped, or hidden by a user control if it starts automatically and is presented in parallel with other content unless the auto-updating content is essential.

2.2.3 - No Timing - Level AAA

Timing is not an essential part of the functionality or presentation of the content, except for real time events and non-interactive synchronized media.

2.2.4 - Interruptions - Level AAA

Interruptions can be postponed or suppressed by the user except when the event is an emergency.

2.2.5 - Re-Authenticating - Level AAA

When an authenticated event expires, the user can continue without losing their data when re-authenticating.

2.2.6 - Time Outs - Level AAA

users are warned about periods of user inactivity that would result in data loss, unless the time period of inactivity that triggers the loss is at least 20 hours.

2.3 - Seizures and Physical Reactions

Do not design content in a way that causes seizures or physical reactions.

2.3.1 - 3 Flashes or Below Threshold - Level A

Pages and content do not contain any objects or elements that flash 3 times in 1 second.

2.3.2 - Three Flashes - Level AAA

Pages do not contain anything that flashes more than 3 times a second.

2.3.3 - Animation from Interactions - Level AAA

Motion and animation triggered by interaction can be disabled unless the animation is essential to the content.

2.4 - Navigable

Provide ways to help users navigate, find content, and determine where they are. Information presented in a linear order makes content navigable by screen reader and keyboard users, plus more understandable to users with cognitive impairments.

2.4.1 - Bypass Blocks - Level A

Users are given ways to bypass repeated blocks of content that appear on multiple webpages. This allows for users who navigate sequentially through content to jump to the main content easier and not get bogged down having to navigate through navigation banners, advertising, etc. Skip links at the top of the page, skip links at the top of long blocks of content, HTML 5 and aria landmarks/regions are ways to satisfy this criteria.

2.4.2 - Page Title - Level A

HTML pages have page titles that describe their topic or purpose. Page Titles quickly and efficiently allow users to identify whether or not the page is relevant to their needs. Keeping page titles consistent with the link text for navigation links used to direct users to the page is preferred.

Best practices include keeping each page title unique and making the unique page title come first in the title string followed by the constant part of the overall page titling for the whole website, such as brand name. This allows for the unique page title to appear first when read aloud by a screen reader, and allows for the page title to appear in a tab for easier reading and finding by the visually impaired.

2.4.3 - Focus Order - Level A

When a user can navigate a webpage sequentially and the sequence of navigation affects the meaning or operation of the content, focusable elements receive focus in a logical order that preserves meaning/operability. Logical progression of focus order helps keyboard and screen reader users create a mental map of the webpage and the content within it, and the linear progression should make sense and not jump users around the page.

2.4.4 - Link Purpose in Context - Level A

The purpose of each link in a webpage can be determined through the link text alone or from the link text paired with programmatically discernible content. Meaningful link text helps users determine whether or not they want to follow that link. Links should all be unique unless they navigate the user to the same destination. Aria can be used to describe links further if content preceding the link explains the link purpose/destination. Don't use "Click Here," "Learn More," etc.

2.4.5 - Multiple Ways - Level AA

More than one way is available to locate a page in a set of webpages, except when a page is a result of or a step in the navigation process. A Search feature, site map, navigation links between interconnected pages or the whole site, breadcrumbs, or a table of contents.

2.4.6 - Headings and Labels - Level AA

Headings and labels describe topic or purpose of the content. Provide descriptive headings and labels and make sure they are programmatically determined

2.4.7 - Focus Visible - Level AA

Any keyboard operable user interface has the keyboard focus indicator visible. Use native elements so that browsers automatically know how to display the cursor focus, use CSS to create a highly visible focus indicator,, and do not hide the focus indicator.

2.4.8 - Location - Level AAA

Information about the user's location within a set of webpages is available. This can be done by showing a sequential list of links for all of the pages in a series of steps through a website, or by using breadcrumb navigation.

2.4.9 - Link Purpose (Link Only) - Level AAA

Users are able to understand the purpose of a link through the text alone. Links need to be understood when focused out of context, such as when using a screen reader to jump through every link on a page. This ensures users are informed as to whether or not they want to navigate to the linked content.

2.4.10 - Section Headings - Level AAA

Section headings are used to organize the content of a page. If a document or site can be broken up with structured headings, it helps users navigate through long pieces of information and retain more of that information through the structure. Providing heading elements at the beginning of each section of content will satisfy this criteria if it is able to be done.

2.4.12 - Focus Appearance (Minimum) - Level AA

When a UI component has focus, the focus indicator:

• Encloses the visual presentation of the component
• Has a contrast ratio of at least 3:1 with the surrounding pixels in focused and unfocused states
• Has a contrast ratio of at least 3:1 with adjacent colors

Exceptions include:

• If the focus indicator is determined by the user agent and cannot be changed by the user
• The focus indicator or the indicator background are not modified by the content creator
• An area of the focus indicator meets the following:
  • At least as large as the area of a 1 CSS pixel thick perimeter of the unfocused 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
  • And has a contrast ratio of at least 3:1 against the same pixels in the unfocused state
  • And has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

Where a user interface component has active sub-components, if a sub-component receives a focus indicator, these requirements can be applied to the sub-component instead.

2.4.12 - Focus Appearance (Enhanced) - Level AAA

When a user interface component displays a visible keyboard focus indicator, all of the following are true:

Minimum Area

The focus indication area is equal or grater to the longest side of the bounding rectangle times 2 CSS pixels.

Focus Contrast

The color change for the active control focus has at least a 3:1 ratio with the unselected control color.

Contrast or Thickness

The focus indication area has at least a 3:1 contrast ratio with all adjacent colors for the minimum area or grater, or at least has a thickness of 2 CSS pixels.

2.5 Pointer Accessible

All functionality should be accessible via pointer input devices, for example, via a mouse pointer, a finger interacting with a touch screen, an electronic pencil/stylus, or a laser pointer.

2.5.1 - Pointer Gestures - Level A

All functionality that uses multipoint or path based gestures for operation can also be operated with a single pointer. without a path based gesture, unless the multipoint or path gesture is essential. This only applies to web content that interprets pointer actions and does not apply to actions used by assistive technology.

2.5.2 - Pointer Cancellation - Level A

For functionality that can be operated with a single pointer, at least one of the following is true:

No down event

The down event does not execute any part of the function.

Abort/Undo

Completion of the function is on the up event and a mechanism is provided to abort the function before completion or undo the function after completion.

Up Reversal

The Up Event reverses any outcome of the preceding Down Event.

Essential

Completing the function on the down event is essential.

Note: Functions that emulate a keyboard or numeric keypad key press are considered essential. This criteria only applies to web content that interprets pointer actions and not to gestures used with assistive technology.

2.5.3 - Label and Name - Level A

User interface components with labels comprised of text or images of text name contains the text that is represented visually. The name must match the label or the text that appears visually, so a user using voice commands can clearly say which control they'd like to to activate to navigate to, and to eliminate any confusion when attempting to understand a control or interact with it using a screen reader.

2.5.4 - Motion Actuation - Level A

Functionality that can be operated by device or user motion can also be operated by user input controls. Response to the motion activation can be disabled to prevent accidental actuation, unless:

Supported Interface

The motions used to operate functionality are through an accessibility supported interface.

Essential

The motion is essential for the function and disabling it would invalidate the activity.

2.5.5 - Target Size - Level AAA

Target size for pointer inputs should be at minimum 44px by 44px except when:

Equivalent

The target is available through an equivalent link or control on the same page that is at least 44px by 44px.

In-line

The target is in a sentence or a block of text.

user Agent Control

The size of the control is determined by the user agent/browser and not by us.

Essential

A particular presentation of the target is essential to the information being conveyed.

2.5.6 - Concurrent Input Mechanisms - Level AAA

Users should be able to switch input mechanisms at any point should the user determine that certain tasks and interactions are more easily accomplished by using an alternative input mechanism. Content must not limit the user's interaction to any particular input mechanism unless the restriction is essential, or is required to ensure the security of the content or to respect user settings.

2.5.7 - Dragging Movements - Level AA

Any functionality that uses a dragging movement can also be performed with a single pointer without a dragging gesture, unless the act of dragging is essential to the functionality. This only applies to web content that interprets pointer actions, not to functionality used to operate browsers/user agents or assistive technology.

3. Understandable

Information and the operation of user interface must be understandable.

3.1 - Readable

Make content readable and understandable.

3.1.1 - Language of Page - Level A

The language of a webpage can be programmatically determined. This is done by setting the lang attribute on the main html tag of the page and using the correct language identifier for the overall page language.

3.1.2 - Language of Parts - Level AA

Text that is presented in another language different from the main language of the page is also set correctly using the lang attribute within a span around the text so screen readers can read the text in the correct language when encountered. Proper names, technical terms, words of an indeterminate language, or and words or phrases that are part of the vernacular of immediately surrounding text are excluded from this criteria.

3.1.3 - Unusual Words - Level AAA

A mechanism is available for users to learn about and understand text used in an unusual or restricted way, such as idioms and jargon. Linking the first instance of the word or phrase to a description list or glossary satisfies this criteria, or providing inline explanations, and providing an online dictionary to aid in understanding.

3.1.4 - Abbreviations - Level AAA

There is a way for users to understand the definitions or expansions of abbreviations when they appear in a webpage. This is accomplished by using either the abbr HTML element in the first instance of the abbreviation, or providing an explanation directly inline with the first instance.

3.1.5 - Reading Level - Level AAA

If text content becomes more advanced than a lower secondary education level, excluding proper names and titles, supplemental content or a version that has the content rewritten in a lower secondary education level is available.

3.1.6 - Pronunciation - Level AAA

Users have a way of learning the pronunciation of words when the words are ambiguous in the context and pronunciation is not known. Providing a text glossary with pronunciation techniques, audio files to hear the pronunciation, and allowing diacritical marks to be toggled on and off are some techniques for satisfying this criteria.

3.2 - Predictable

Make webpages appear and operate in predictable ways.

3.2.1 - On Focus - Level A

When an object in a webpage receives focus, it does not initiate a change of context. Functionality should be predictable, and jumping a user around through content or context automatically after they have focused on an element breaks this predictability.

3.2.2 - On Input - Level A

When a user changes the value or enters information into an input, context must not automatically change unless the user has been informed of the context change before they interact with the component.

3.2.3 - Consistent Navigation - Level AA

Navigational mechanisms that appear on Webpages that repeat within a set of webpages occur in the same relative order unless otherwise changed by the user. Consistent presentation is important to allow users to gain familiarity with the use of a webpage and the location of repeated content, such as navigation bars/links, consistent user controls, etc. Users may change the order of the presentation through site preferences so it is presented in a way that's most usable by them.

3.2.4 - Consistent Identification - Level AA

Components that have the same functionality throughout a set of webpages are identified consistently and do not change context or name. Consistent labeling helps users understand the content and operate the site easier and reduces cognitive load.

3.2.5 - Change on Request - Level AAA

Changes of context are initiated only when the user requests them or a mechanism is available for a user to turn off these changes. Automatic context changes cause confusion for all assistive tech users and creates unpredictability across the entire website, so users must be able to control context changes.

3.3 - Input Assistance

Help users avoid and correct mistakes.

3.3.1 - Error Identification - Level A

If an input error is automatically detected, the error is identified and described to the user in text.

3.3.2 - Labels and Instructions - Level A

Labels or instructions are provided when content requires user input.

3.3.3 - Error Suggestion - Level AA

If an input error is automatically detected, and suggestions for correction are known, then those suggestions are provided to the user unless it would jeopardize the security or purpose of the content. Provide text descriptions about the fields or inputs with the error, and make sure to indicate which inputs are required in the user flow.

3.3.4 - Error Prevention (Legal, Financial, Data) - Level AA

For any webpages that have users making legal commitments, modify or deal with user financial data, edit user inputted data or databases, one of the following must be true:

Reversible

Submissions are reversible.

Checked

User input is checked for errors and users have the opportunity to correct them.

Confirm

A mechanism is provided to allow users to review, edit, and confirm their input before submission.

Users must be given the opportunity to avoid errors that may result in serious consequences, such as ordering non-refundable tickets, anything that causes serious legal or financial hardship, or causing massive loss of user data within a database.

3.3.5 - Help - Level AAA

Context sensitive help is available. This allows users with disabilities to not make mistakes while also not losing their place in the context of the content they are interacting with, or allows them to quickly learn how to interact within content without losing their place.

3.3.6 - Error Prevention (All) - Level AAA

For webpages that require the user to input and submit information, one of the following is true:

Reversible

Submissions are reversible.

Checked

User input is checked for errors and users have the opportunity to correct them.

Confirm

A mechanism is provided to allow users to review, edit, and confirm their input before submission.

4. Robust

Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies.

4.1 - Compatibility

Maximize compatibility with current and future user agents, including assistive technologies.

4.1.1 - Parsing - Level A

For content built with markup languages like HTML, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and IDs are unique. If browsers or other user agents cannot completely parse and understand the content, screen readers and other assistive technologies will not be able to accurately parse and display the content to the user.

4.1.2 - Name, Role, Value - Level A

For all interactive user components, roles can be programmatically determined, states, properties and values that can be set by the user can be programmatically set, and notifications of changes to these components are made available to the user agent. Assistive technologies will be able to announce value changes and properly identify the role and state of components to users. Buttons, links, headings, input controls are appropriately identified. Collapsed, expanded states, value amounts, etc. are identified.

4.1.3 - Status Messages - Level AA

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. This is a guideline to implement Aria roles and status announcements when a user completed a task. Examples:

Search button

User hits a Search button and screen reader announces "5 search results returned" without user having to navigate to the status message.

Cart

Adding items to a cart would automatically have a screen reader announce and update the cart item total, allowing user to know that they've successfully added items to the cart without having to navigate to the Cart icon/button to hear the amount.

Progress/Busy

When a process is enabled that puts up a Loading or Busy throbber or graphic, the screen reader automatically announces the role of the alert or announces progress bar status.

Form Submission

After user submits a form, text appears that states "Form Successfully submitted" and the screen reader announces this automatically.

Errors

After incorrect form submission, text appears explaining that there are 4 errors on the page, and the screen reader announces this.

Ultimately, this will apply to any and all status messages that appear as text on the screen during user interaction. Aria-Live needs to be used to ensure that text status in web content is adequately expressed to a screen reader user.

Resources

• WCAG 2.1 from the W3C
• Understanding, Conformance, and Usability Testing