WCAG 2.2 Accessibility Techniques
| WCAG | Technique | Description |
| 1.1.1 | a | Image alt attribute All interface images have a populated alt attribute. Decorative images have a null alt attribute (alt=””). Content images are the responsibility of the content author. |
| 1.1.1 | b | Alternative text for background images Background images have a visually hidden text alternative that is editable in the CMS. |
| 1.1.1 | c | Icon fonts Icon font characters are inside an element with aria-hidden=”true”. |
| 1.2.1 | a | Transcripts for audio-only or video-only content Audio and video is content delivered via a hosting service such as YouTube, and transcripts are the responsibility of the content author. |
| 1.2.1 | b | Alternative text for ambient videos Ambient videos have a visually hidden text alternative that is editable in the CMS. It begins with the word “Video:” |
| 1.2.2 | a | Captions for audio content in video Video is content delivered via a hosting service such as YouTube, and captions are the responsibility of the content author. |
| 1.2.3 | a | Captions or transcripts for non-audio content in video Video is content delivered via a hosting service such as YouTube, and audio descriptions are the responsibility of the content author. |
| 1.2.4 | a | Captions for live audio content in video Video is content delivered via a hosting service such as YouTube, and live captions are the responsibility of the content author. |
| 1.2.5 | a | Captions for non-audio content in video Video is content delivered via a hosting service such as YouTube, and audio descriptions are the responsibility of the content author. |
| 1.3.1 | a | Headings All text that functions as a heading uses <h1> – <h6> tags. Every page has an <h1> and there is only one <h1> per page. The <h1> on the home page is “Home” and is visually hidden. There are no blank headings. |
| 1.3.1 | b | Sequential headings The use of <h1> – <h6> tags is sequential. A heading level is never skipped (e.g. <h2> followed by <h4>). Since many headings are entered as content, they are the responsibility of the content author. |
| 1.3.1 | c | Table column headers Tables have at least one <th> for every column and/or row. Since tables are entered as content, they are the responsibility of the content author. |
| 1.3.1 | d | Table display mode Tables should use display: table, except when a table is transformed into a list, in which case it must be changed to a different display mode and the table tag should also have role=”presentation”. |
| 1.3.1 | e | Current item Any item within a list, menu, or pagination bar that is styled differently to indicate it is the current item should have aria-current=”true”. |
| 1.3.2 | a | Visual order The visual appearance of elements on pages follow the order they exist in the HTML. |
| 1.3.3 | a | Sensory characteristics No interface element is referenced solely based on its visual characteristics. This is primarily the responsibility of the content author. |
| 1.3.4 | a | Orientation Change Pages are not restricted to one orientation, and all content and functionality is available in both orientations. |
| 1.3.5 | a | Autocomplete The autocomplete attribute is present on login and user profile forms, for the field types listed in the Input Purposes for User Interface Components section of the WCAG spec. |
| 1.4.1 | a | Color alone Color alone is not used to identify differences in elements. There is always a second cue such as shape, size, or text. |
| 1.4.2 | a | Audio controls Auto-playing audio has controls to pause, stop, and change the volume. |
| 1.4.3 | a | Contrast All text has a color contrast ratio of 4.5:1 for large text and 3:1 for normal text, except when it is a logo, purely decorative, or inactive. |
| 1.4.4 | a | Resize text All font sizing is set in relative units (%, em, or rem). |
| 1.4.4 | b | Meta viewport tag The meta viewport tag does not contain the attributes maximum-scale=1.0 or user-scalable=no, which disable page zoom. |
| 1.4.5 | a | Images of text Images of text are never used except in logos, icons, and other branded imagery, and in these exceptions there is alternative text. Because these images can be entered as content, they are primarily the responsibility of the content author. |
| 1.4.10 | a | Responsive design Pages are responsive down to a width of 320 CSS pixels. No horizontal scrolling is required except for tables and maps. |
| 1.4.10 | b | Sticky elements Any elements that “stick” to the viewport during scroll do not cover the entire viewport height, tested by using 400% zoom on a viewport set to 1280 x 720 px. |
| 1.4.11 | a | Non-text contrast Form fields, interface icons, and non-decorative content graphics have a minimum 3:1 contrast ratio compared to their adjacent color. Differences in state (on/off, selected/unselected, checked/unchecked) have a minimum 3:1 contrast ratio compared to one another. |
| 1.4.11 | b | Windows high contrast Form fields, interface icons, and non-decorative content graphics follow the theme colors when high contrast is on, tested using the High Contrast Black and High Contrast White themes. |
| 1.4.12 | a | Text spacing When letter spacing, word spacing, line spacing, and paragraph spacing is increased to the maximum defined in this criterion, no text is clipped or overlaps adjacent elements. |
| 1.4.13 | a | ESC to dismiss The ESC key closes dropdown menus, tooltips, and other elements that appear on hover or focus. |
| 1.4.13 | b | Pointer move The pointer can be moved onto any content that appears on hover or focus, such as a tooltip. |
| 2.1.1 | a | Focusable elements All interactive elements can receive keyboard focus and be executed with the Enter key, either by using a natively focusable element such as <a> or <button>, or adding the tabindex=”0″ attribute plus scripting. |
| 2.1.1 | b | Hiding content All content that is visually hidden is not focusable with the keyboard, by using display: none or visibility: hidden. |
| 2.1.1 | c | Hover and scroll-triggered content All content that becomes visible on hover or scroll also becomes visible on focus. Also, the content is hidden using a method that makes it readable by assistive technology without any action. |
| 2.1.1 | d | Focus loops Any element that disables the page behind it maintains focus inside it using a loop, until it is closed by the user. |
| 2.1.1 | e | Modal overlays When a modal overlay is opened, focus moves to the overlay container and returns to the element that opened the overlay when it is closed. |
| 2.1.1 | f | AJAX-loaded content When there is a button that loads additional content without a page refresh (such as search results), focus moves to the first new item loaded instead of leaving focus on the button. |
| 2.1.1 | g | Tree menus When there is a menu item with a link to expand & collapse the next level of menu (usually an arrow or +/-), this link is focusable separately from the text link, and pressing Enter executes it. |
| 2.1.1 | h | Tabs Tabs use the ARIA roles tablist, tab, and tabpanel. The active tab has aria-selected=”true”. Each tab panel has an aria-labelledby attribute pointing to the ID of its associated tab. All tabs can receive keyboard focus by using the tab key. Inactive tab panels are visually hidden to assistive technology. |
| 2.1.1 | i | Components We will follow these examples from the ARIA Authoring Practices Guide if they are used in the design:
Accordion
Alert
Breadcrumb
Carousel
Dialog Modal
Disclosure (Show/Hide)
|
| 2.1.2 | a | Keyboard trap No plugins are used that cause a keyboard trap. |
| 2.1.4 | a | Character key shortcuts No shortcuts that use a single character key are present. |
| 2.2.1 | a | Time limits No tasks require completion within time limits. |
| 2.2.2 | a | Stopping movement Auto-rotating carousels are permanently stopped when any element within the carousel receives focus or is clicked. Ambient videos have a pause button that stops the video. |
| 2.3.1 | a | Flashing content No content flashes more than 3 times per second. |
| 2.4.1 | a | HTML5 tags The HTML5 tags <header>, <footer>, <main>, and <nav> are used. |
| 2.4.1 | b | ARIA landmarks The ARIA landmark roles banner, contentinfo, main, navigation, and search are used, and a unique ARIA label is used on multiple instances of navigation. |
| 2.4.1 | c | ARIA landmarks in hidden elements For any ARIA landmark elements that are visually hidden until the user opens them, the ARIA landmark role appears on a container element around the button that triggers the opening. |
| 2.4.1 | d | Skip to Content link A “Skip to content” link is the first focusable element on the page, it becomes visible on focus, and it links to the main content of the page. |
| 2.4.2 | a | Title All pages have a <title> tag whose value is unique and matches the page’s H1. |
| 2.4.3 | a | Focus order The focus order of elements on pages follows the order they exist in the HTML. |
| 2.4.4 | a | Empty links and buttons All links and buttons contain text or an image with an alt attribute. |
| 2.4.4 | b | Title attributes Title attributes do not appear on any links. For images, the alt attribute is used instead. |
| 2.4.4 | c | Non-specific link text Links with generic text like “learn more” or “view all” have an aria-label attribute that provides clarity on the link’s destination, or are contained in an <li> or <p> with text content that provides the clarity. |
| 2.4.4 | d | Adjacent duplicate links Adjacent elements that link to the same place, like an image and heading, have a single <a> that uses CSS to increase the link’s area. |
| 2.4.5 | a | Multiple ways Sites contain both navigation and search, or navigation and a sitemap. |
| 2.4.6 | a | Descriptive headings and labels Since headings and labels are entered as content, they are the responsibility of the content author. |
| 2.4.7 | a | Visual focus indicator Any element in focus has a visual indicator. A custom indicator style is used that meets a minimum 3:1 contrast ratio against its adjacent color. The hover state for the element is not applied when in focus. |
| 2.4.11 | a | Focus behind sticky elements If focus moves behind a sticky element, the page scrolls to ensure focus remains visible |
| 2.5.1 | a | Touch events Any elements that respond to touch events, such as swipeable carousels and tables, have an alternate way to perform the same function using buttons. |
| 2.5.2 | a | Down events The mousedown and touchstart events are not used to execute functionality. |
| 2.5.3 | a | Label in name When aria-label or aria-labelledby is used on form fields, buttons, or links to provide a clearer label, its value begins with the visible label text. |
| 2.5.4 | a | Motion actuation No functionality uses the device accelerometer or gyroscope. |
| 2.5.7 | a | Dragging movements No action requires dragging |
| 2.5.8 | a | Click target size Non-inline clickable elements are at least 24 x 24 pixels |
| 3.1.1 | a | Language The <html> tag has a lang attribute. It is lang=”en” if the site is in English. |
| 3.1.2 | a | Language changes Words or phrases in other languages than English have a tag wrapping them with the lang attribute indicating the language. When this appears in content, it is the responsibility of the content author. |
| 3.2.1 | a | Change of context on focus When an element receives focus, focus is not moved away from the element and the page is not refreshed. |
| 3.2.2 | a | Change of context on value change When a form field’s value is changed, focus is not moved away from the element and the page is not refreshed. |
| 3.2.3 | a | Consistent navigation Menu items appear in the same order each time they are shown. |
| 3.2.4 | a | Consistent labeling Multiple instances of buttons and links that perform the same function have the same text. When this appears in content, it is the responsibility of the content author. |
| 3.2.6 | a | Consistent help Contact information is presented in the same location on all pages. |
| 3.3.1 | a | Alert and error handling When a global form error or confirmation message appears on a page, a status message is implemented. This functionality is the responsibility of the CMS. |
| 3.3.1 | b | Error field identification Form error messages contain the name of the fields in error. This functionality is the responsibility of the CMS. |
| 3.3.1 | c | Confirmation When a form is submitted, a confirmation that the submission was successful is presented. This functionality is the responsibility of the CMS. |
| 3.3.2 | a | Form labels All form fields have a <label> associated with the field using the “for” attribute. |
| 3.3.2 | b | Fieldsets Groups of checkboxes or radio buttons are contained in a <fieldset> with a <legend>. |
| 3.3.3 | a | Error suggestions Error messages list fields that are required but empty, and fields that have incorrect values or formatting. In each case, the allowable values or formatting are listed. This functionality is the responsibility of the CMS. |
| 3.3.4 | a | Validation For forms that modify or delete information, input validation is performed on the submission. This functionality is the responsibility of the CMS. |
| 3.3.7 | a | Redundant entry Form fields previously entered by the user in a process are auto-populated. |
| 3.3.8 | a | Password autocomplete Password fields use the autocomplete attribute |
| 4.1.1 | a | HTML validation Pages do not have duplicate IDs or unclosed tags. |
| 4.1.2 | a | ARIA expanded Elements that toggle the expanding & collapsing of another element have the aria-expanded attribute, which is toggled between “true” and “false” when executed. The element that is being expanded & collapsed immediately follows the toggle in the HTML. |
| 4.1.2 | b | Progressively enhanced form fields Form fields that have been visually hidden and replaced with another element for greater styling control receive keyboard focus, not their replacement element or their label. |
| 4.1.3 | a | Status messages The container around status messages has aria-atomic=”true” and aria-live=”assertive” and it is present on page load. Status messages are used for global form error messages, form confirmation messages, and an updated number of results when filters are used. |