Tasks Involved in Accessibility in Accessibility Roles and Responsibilities Mapping (ARRM)
Introduction
The following accessibility tasks offer a starting point for assigning responsibilities for digital accessibility to appropriate roles.
For each task, the tables identify which role typically has primary, secondary, and contributor responsibilities. For more information on levels, see Ownership levels.
Each task also includes the WCAG success criterion it relates to.
Important notes:
- This resource does not set requirements to meet WCAG.
- This is not a definitive list of accessibility tasks.
- Some tasks support accessibility beyond what WCAG requires.
This information is also available to download as a CSV file.
Images and Graphs
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| IMG-001 | 1.1.1 Non-text Content (A) | Informative alternate text is provided for images (i.e. not "spacer" or image file name). | Content Authoring | User Experience (UX) Design | none |
| IMG-002 | 1.1.1 Non-text Content (A) | Informative images are described with a clear and meaningful text equivalent (alt attribute or other equivalent means). | Content Authoring | none | none |
| IMG-003 | 1.1.1 Non-text Content (A) | Purely decorative images are provided with null alt attribute values (or other equivalent means). | Front-End Development | Content Authoring | none |
| IMG-004 | 1.1.1 Non-text Content (A) | Null alt attribute values are used for images that are already described in text in adjacent page content. | Front-End Development | Content Authoring | none |
| IMG-005 | 1.1.1 Non-text Content (A) | Adjacent linked images and text links pointing the same URL are combined into single links. | Front-End Development | User Experience (UX) Design | none |
| IMG-006 | 1.1.1 Non-text Content (A) | Alt text used for images of text include all relevant text found in the image. | Content Authoring | none | none |
| IMG-007 | 1.1.1 Non-text Content (A) | Informative images are marked up as foreground images, and not embedded as part of the CSS. | Front-End Development | Content Authoring | none |
| IMG-008 | 1.1.1 Non-text Content (A) | The purpose or function of complex images is accurately described in text. | Content Authoring | User Experience (UX) Design | none |
| IMG-009 | 1.1.1 Non-text Content (A) | The purpose or function of complex images is conveyed using a text description, via an alt attribute. | Front-End Development | Content Authoring | User Experience (UX) Design |
| IMG-010 | 1.1.1 Non-text Content (A) | The full explanation of complex images is accurately described in text. | Content Authoring | none | none |
| IMG-011 | 1.1.1 Non-text Content (A) | A mechanism that conveys the way through which the full explanation of complex images is defined. | User Experience (UX) Design | none | none |
| IMG-012 | 1.1.1 Non-text Content (A) | The full explanation of complex images is provided through the longdesc attribute (or other equivalent means). | Front-End Development | none | none |
| IMG-013 | 1.1.1 Non-text Content (A) | Images primarily conveying function use alternative text to describe their purpose, rather than what they look like. | Content Authoring | User Experience (UX) Design | none |
| IMG-014 | 1.1.1 Non-text Content (A) | Text alternatives of static and linked images do not replicate any information that is already being conveyed by screen reader technology. | Content Authoring | Front End Development | none |
| IMG-015 | 1.1.1 Non-text Content (A) | Text alternatives of dynamically updated images are simultaneously updated as the images change. | Front-End Development | User Experience (UX) Design | Content Authoring |
| IMG-016 | 1.1.1 Non-text Content (A) | Alternate means of accessing CAPTCHA information are provided, such as audio CAPTCHA, logical question, or other equivalent means. | Business Analysis | User Experience (UX) Design | none |
| IMG-017 | 1.1.1 Non-text Content (A) | Images which do not convey information are defined as decorative. | Content Authoring | none | none |
| IMG-018 | 1.4.1 Use of Color (A) | Charts, graphs, infographics and other visual representations of information don't rely on color alone to convey information. | Visual Design | User Experience (UX) Design | none |
| IMG-019 | 1.4.5 Images of Text (AA) | Text content that conveys information is not part of images. | User Experience (UX) Design | Visual Design | Content Authoring |
| IMG-020 | 1.4.5 Images of Text (AA) | Text that is placed on top of an image is handled semantically through HTML and CSS instead. | Front-End Development | User Experience (UX) Design | none |
| IMG-021 | 1.4.5 Images of Text (AA) | Unless a particular presentation of text is essential to the information being conveyed, all images that contain text are only used for purely decorative purposes. | Visual Design | User Experience (UX) Design | none |
| IMG-022 | 1.4.9 Images of Text (No Exception) (AAA) | With the exception of logos, all images that contain text are only used for purely decorative purposes. | Visual Design | Content Authoring | none |
Semantic Structure
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| SEM-001 | 1.3.1 Info and Relationships (A) | Informative content is provided through HTML markup. | Front-End Development | User Experience (UX) Design, Content Authoring | none |
| SEM-002 | 1.3.1 Info and Relationships (A) | HTML elements are used according to the HTML specification. | Front-End Development | User Experience (UX) Design | none |
| SEM-003 | 1.3.1 Info and Relationships (A) | Navigation groupings are marked up using HTML list or nav elements (or other equivalent means). | Front-End Development | User Experience (UX) Design | none |
| SEM-004 | 1.3.1 Info and Relationships (A) | Header sections are marked up using HTML header elements (or other equivalent means). | Front-End Development | User Experience (UX) Design | none |
| SEM-005 | 1.3.1 Info and Relationships (A) | The main section of a page is marked up using a HTML main element (or other equivalent means). | Front-End Development | User Experience (UX) Design | none |
| SEM-006 | 1.3.1 Info and Relationships (A) | The footer of the page is marked up using a HTML footer element (or other equivalent means). | Front-End Development | User Experience (UX) Design | none |
| SEM-007 | 1.3.1 Info and Relationships (A) | Content that is complementary to the main section is marked up using HTML aside elements (or other equivalent means). | Front-End Development | User Experience (UX) Design | none |
| SEM-008 | 1.3.1 Info and Relationships (A) | HTML elements are used based on the semantics they provide, not based on what they look like. | Front-End Development | User Experience (UX) Design | none |
| SEM-009 | 1.3.1 Info and Relationships (A) | Decorative elements are embedded through the CSS presentation layer (or other equivalent means). | Front-End Development | Content Authoring | none |
| SEM-010 | 1.3.1 Info and Relationships (A) | All scripting behaviors are handled through JavaScript. | Front-End Development | none | none |
| SEM-011 | 1.3.1 Info and Relationships (A) | Elements that act as headings are marked up as such. | Front-End Development | User Experience (UX) Design | none |
| SEM-012 | 1.3.1 Info and Relationships (A) | Headings follow a hierarchical sequence without skipping any levels. | Content Authoring | User Experience (UX) Design | none |
| SEM-013 | 1.3.1 Info and Relationships (A) | Headings are marked up using h1 to h6 elements or other equivalent means. | Front-End Development | User Experience (UX) Design, Content Authoring | none |
| SEM-014 | 1.3.1 Info and Relationships (A) | Page contains a level 1 heading that describes the page content. | Front-End Development | User Experience (UX) Design, Content Authoring | none |
| SEM-015 | 1.3.1 Info and Relationships (A) | Whitespace or pre-formatted text is not used to render content to appear as multiple columns or tabular information. | Front-End Development | none | none |
| SEM-016 | 1.3.1 Info and Relationships (A) | Use of native, semantic HTML elements are prioritized over other methods. | Front-End Development | User Experience (UX) Design | none |
| SEM-017 | 1.3.2 Meaningful Sequence (A) | The source code (or DOM) order matches the suggested visual order of the design. | Front-End Development | User Experience (UX) Design | none |
| SEM-018 | 2.4.1 Bypass Blocks (A) | iFrames displaying content are provided with a clear, informative title attribute value. | User Experience (UX) Design | Content Authoring | none |
| SEM-019 | 2.4.2 Page Titled (A) | Page title text matches the level 1 heading text. | Content Authoring | none | none |
| SEM-020 | 2.4.2 Page Titled (A) | Pages are described using unique and descriptive page title values. | Content Authoring | none | none |
| SEM-021 | 2.4.3 Focus Order (A) | The tab order logically and predictably follows the expected interaction order of the visual design. | Front-End Development | User Experience (UX) Design | none |
| SEM-022 | 2.4.6 Headings and Labels (AA) | Heading text meaningfully describes the content's topic or purpose. | Content Authoring | none | none |
| SEM-023 | 2.4.6 Headings and Labels (AA) | The main heading of the page describes the content of the page. | Content Authoring | none | none |
| SEM-024 | 4.1.1 Parsing (Obsolete and removed) (A) | Source code is properly nested, according to its specification. | Front-End Development | none | none |
| SEM-025 | 4.1.1 Parsing (Obsolete and removed) (A) | Source code elements are provided with complete start and end tags (or are self-closed) according to specification. | Front-End Development | none | none |
| SEM-026 | 4.1.1 Parsing (Obsolete and removed) (A) | ID attribute values assigned to elements are unique. | Front-End Development | none | none |
| SEM-027 | 4.1.1 Parsing (Obsolete and removed) (A) | Elements do not contain duplicate attributes. | Front-End Development | none | none |
| SEM-028 | 4.1.2 Name, Role, Value (A) | iFrames are given a title that describes their content or purpose. | User Experience (UX) Design | Content Authoring | none |
| SEM-029 | 4.1.2 Name, Role, Value (A) | iFrames are implemented using title attribute values that describe their content or purpose. | Front-End Development | Content Authoring | none |
Input Modalities
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| INP-001 | 1.4.13 Content on Hover or Focus (AA) | Additional content triggered by focus or hover that covers other information can be dismissed by the user. | User Experience (UX) Design | Front-End Development | none |
| INP-002 | 1.4.13 Content on Hover or Focus (AA) | Additional content triggered by pointer hover does not disappear when trying to move the pointer over it. | User Experience (UX) Design | Front-End Development | none |
| INP-003 | 1.4.13 Content on Hover or Focus (AA) | Additional content triggered by hover or focus stays visible until purposefully un-triggered, dismissed, or is no longer valid. | User Experience (UX) Design | Front-End Development | none |
| INP-004 | 2.1.1 Keyboard (A) | All actionable elements can be reached, using only the keyboard. | Front-End Development | User Experience (UX) Design | none |
| INP-005 | 2.1.1 Keyboard (A) | All active elements can be triggered, using only the keyboard. | Front-End Development | User Experience (UX) Design | none |
| INP-006 | 2.1.1 Keyboard (A) | Device-specific programmatic event handlers are not used as the only way to trigger interactions. | Front-End Development | none | none |
| INP-007 | 2.1.1 Keyboard (A) | Behaviors for hover and focus states are planned and included with the design assets. | User Experience (UX) Design | Visual Design | none |
| INP-008 | 2.1.1 Keyboard (A) | Keyboard focus states are planned for every active element. | User Experience (UX) Design | Visual Design | none |
| INP-009 | 2.1.1 Keyboard (A) | Keyboard focus is not applied to non-active or static elements. | Front-End Development | User Experience (UX) Design | none |
| INP-010 | 2.1.1 Keyboard (A) | Custom active elements replicate all inherent keyboard behaviors of native active HTML elements. | Front-End Development | User Experience (UX) Design | none |
| INP-011 | 2.1.1 Keyboard (A) | Non-interactive elements are not assigned JavaScript event handlers. | Front-End Development | none | none |
| INP-012 | 2.1.2 No Keyboard Trap (A) | Users can navigate away from all active elements, using only the keyboard. | Front-End Development | none | none |
| INP-013 | 2.1.3 Keyboard (No Exception) (AAA) | All actionable elements can be reached using only the keyboard without requiring specific timings for individual keystrokes. | User Experience (UX) Design | Front-End Development | none |
| INP-014 | 2.1.4 Character Key Shortcuts (A) | Single-key keyboard shortcuts can be disabled or remapped, unless they are only active on keyboard focus. | User Experience (UX) Design | none | none |
| INP-015 | 2.4.3 Focus Order (A) | Users can tab through active elements in an order that reflects the intended interaction order of the design. | Front-End Development | User Experience (UX) Design, Visual Design | none |
| INP-016 | 2.4.3 Focus Order (A) | Tabindex attributes are not assigned positive integer values. | Front-End Development | none | none |
| INP-017 | 2.4.7 Focus Visible (AA) | Every element that receives keyboard focus is designed to display a visible focus indicator. | Visual Design | User Experience (UX) Design | none |
| INP-018 | 2.4.7 Focus Visible (AA) | Every element that receives keyboard focus displays a visible focus indicator. | Front-End Development | Visual Design | none |
| INP-019 | 2.5.1 Pointer Gestures (A) | Non-essential multipoint, path- or gesture-based functions have single-pointer alternatives. | User Experience (UX) Design | none | none |
| INP-020 | 2.5.2 Pointer Cancellation (A) | Non-essential single-pointer functionality is not triggered on down events, unless the functionality can be canceled, undone, or reversed. | User Experience (UX) Design | Front-End Development | none |
| INP-021 | 2.5.3 Label in Name (A) | Text or images of text that is usually included in a user interface control is part of its accessible name. | Content Authoring | User Experience (UX) Design | none |
| INP-022 | 2.5.4 Motion Actuation (A) | All non-essential motion-related functionalities have alternative user interface controls that allow for equivalent actions. | User Experience (UX) Design | none | none |
| INP-023 | 2.5.4 Motion Actuation (A) | All non-essential motion-related functionality can be turned off to prevent accidental actuation. | User Experience (UX) Design | none | none |
| INP-024 | 2.5.7 Dragging Movements (AA) | All functionality requiring dragging movements can also be operated using single-pointer alternatives. | User Experience (UX) Design | none | none |
| INP-025 | 2.5.8 Target Size (Minimum) (AA) | Any programmatic grouping of controls has a target area of at least 24 by 24 CSS pixels. | Front-End Development | Visual Design | User Experience (UX) Design |
| INP-026 | 3.2.2 On Input (A) | Keyboard focus does not move automatically from one form control to the next. | User Experience (UX) Design | Front End Development | none |
Form Interactions
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| FRM-001 | 1.3.1 Info and Relationships (A) | Text labels are marked up using the label element or other equivalent means. | Front-End Development | none | none |
| FRM-002 | 1.3.1 Info and Relationships (A) | Text labels and form controls are programmatically associated (using the FOR and ID attributes, or equivalent means). | Front-End Development | User Experience (UX) Design | none |
| FRM-003 | 1.3.1 Info and Relationships (A) | Submit buttons in forms rely on a submit input type, a button element, or other equivalent means. | Front-End Development | none | none |
| FRM-004 | 1.3.1 Info and Relationships (A) | Related form controls are programmatically associated using fieldset and legend elements or other equivalent means. | Front-End Development | User Experience (UX) Design | none |
| FRM-005 | 1.3.1 Info and Relationships (A) | Long option lists in select elements are grouped semantically (using the optgroup element, or other equivalent means). | Front-End Development | User Experience (UX) Design | none |
| FRM-006 | 1.3.1 Info and Relationships (A) | Common group label text is informative, meaningful and provides context for the grouping. | Content Authoring | User Experience (UX) Design | none |
| FRM-007 | 1.3.1 Info and Relationships (A) | Instructions and messages are programmatically conveyed to assistive technologies. | Front-End Development | User Experience (UX) Design | none |
| FRM-008 | 1.3.1 Info and Relationships (A) | Use of native HTML controls are prioritized over other methods. | Front-End Development | none | none |
| FRM-009 | 1.3.1 Info and Relationships (A) | Required fields are programmatically conveyed as such to assistive technologies. | Front-End Development | User Experience (UX) Design | none |
| FRM-010 | 1.3.1 Info and Relationships (A) | Instructions on how to use forms are programmatically conveyed to assistive technologies. | Front-End Development | User Experience (UX) Design | none |
| FRM-011 | 1.3.2 Meaningful Sequence (A) | Information that is relevant to a form does not appear after the submit button. | User Experience (UX) Design | none | none |
| FRM-012 | 1.3.5 Identify Input Purpose (AA) | Data entry fields are designed to autofill previously entered user information when that information is available. | User Experience (UX) Design | Front-End Development | none |
| FRM-013 | 1.3.5 Identify Input Purpose (AA) | Data entry fields using the autocomplete attribute for previously entered information are set to the appropriate value. | Front-End Development | User Experience (UX) Design | none |
| FRM-014 | 1.3.6 Identify Purpose (AAA) | The purpose of user interface components, icons, and regions is implemented using markup languages, in a way that can be programmatically determined. | Front-End Development | User Experience (UX) Design | none |
| FRM-015 | 2.4.3 Focus Order (A) | Keyboard focus is dynamically moved to the error message when errors are returned. | Front-End Development | User Experience (UX) Design | none |
| FRM-016 | 2.4.6 Headings and Labels (AA) | The purpose of the form control is clearly described in text. | Content Authoring | User Experience (UX) Design | none |
| FRM-017 | 2.5.6 Concurrent Input Mechanisms (AAA) | The content is designed in a way that does not restrict input modalities available. | User Experience (UX) Design | Front-End Development | none |
| FRM-018 | 3.2.1 On Focus (A) | Changes of context are not initiated automatically as user interface components receive focus. | User Experience (UX) Design | Front-End Development | none |
| FRM-019 | 3.2.2 On Input (A) | Event handlers are not used to automatically trigger a change of context upon input that would otherwise require explicit user action unless previously communicated. | Front-End Development | User Experience (UX) Design | none |
| FRM-020 | 3.2.2 On Input (A) | Form interactions are not designed to include automatic changes of context upon input that would otherwise require explicit user action unless previously communicated. | User Experience (UX) Design | Front-End Development | none |
| FRM-021 | 3.2.4 Consistent Identification (A) | Error messages and alerts are visually displayed across the site in a consistent manner. | User Experience (UX) Design | Visual Design | none |
| FRM-022 | 3.2.4 Consistent Identification (A) | Visual indicators are presented to support error messages when errors are returned. | Visual Design | User Experience (UX) Design | none |
| FRM-023 | 3.3.1 Error Identification (A) | Inline error messages are displayed next to their related form controls. | User Experience (UX) Design | none | none |
| FRM-024 | 3.3.1 Error Identification (A) | Error messages are grouped as a list at the top of the form. | User Experience (UX) Design | Visual Design | none |
| FRM-025 | 3.3.2 Labels or Instructions (A) | Radio buttons and checkbox labels are positioned to the right of their respective form controls (for left-to-right languages). | User Experience (UX) Design | none | none |
| FRM-026 | 3.3.2 Labels or Instructions (A) | Related form controls and their respective labels are grouped together visually. | User Experience (UX) Design | Visual Design | none |
| FRM-027 | 3.3.2 Labels or Instructions (A) | Instructions are in close visual proximity to their related controls. | User Experience (UX) Design | none | none |
| FRM-028 | 3.3.2 Labels or Instructions (A) | Form controls are coded to have persistent visual labels. | Front-End Development | User Experience (UX) Design | Visual Design |
| FRM-029 | 3.3.2 Labels or Instructions (A) | Form controls are designed to have persistent visual labels. | User Experience (UX) Design | Visual Design | none |
| FRM-030 | 3.3.2 Labels or Instructions (A) | Clear text-based instructions are provided on how to use the form controls. | Content Authoring | User Experience (UX) Design | Visual Design |
| FRM-031 | 3.3.2 Labels or Instructions (A) | Instructions provided in forms are displayed in a clear and unambiguous way. | Visual Design | User Experience (UX) Design | none |
| FRM-032 | 3.3.2 Labels or Instructions (A) | Placeholder text is not used in lieu of regular text label elements. | User Experience (UX) Design | none | none |
| FRM-033 | 3.3.3 Error Suggestion (AA) | Error messages returned provide clear instructions on how to fix them. | Content Authoring | User Experience (UX) Design | none |
| FRM-034 | 3.3.2 Labels or Instructions (AA) | Instructions intending to prevent errors are provided in text and available. | Front-End Development | User Experience (UX) Design | Content Authoring |
| FRM-035 | 3.3.3 Error Suggestion (AA) | Text-based instructions are provided to help users correct errors. | User Experience (UX) Design | Content Authoring, Visual Design | none |
| FRM-036 | 3.3.4 Error Prevention (Legal, Financial, Data) (AA) | Users are provided with means to prevent and correct form errors when legal, financial, or data information is involved. | User Experience (UX) Design | Business Analysis | none |
| FRM-037 | 3.3.4 Error Prevention (Legal, Financial, Data) (AA) | When legal, financial, or data information is involved, confirmation screens are provided prior to any final form submission. | User Experience (UX) Design | Business Analysis | Front-End Development |
| FRM-038 | 3.3.5 Help (AAA) | Context-sensitive help text is available. | User Experience (UX) Design | Content Authoring | none |
| FRM-039 | 3.3.6 Error Prevention (All) (AAA) | Users are provided with means to prevent and correct form errors. | User Experience (UX) Design | Business Analysis | none |
| FRM-040 | 3.3.7 Redundant Entry (A) | Except when it is essential for users to re-enter information in the same session, previously entered information is made available through auto-population or user selection. | User Experience (UX) Design | Front-End Development | |
| FRM-041 | 3.3.8 Accessible Authentication (Minimum) (AA) | Cognitive function tests that do not rely on object recognition or personal content must provide an alternative non-cognitive method or an assistive mechanism. | User Experience (UX) Design | Front-End Development | Business Analysis |
| FRM-042 | 3.3.9 Accessible Authentication (Enhanced) (AAA) | A cognitive function test during authentication is not required unless an alternative non-cognitive method or an assistive mechanism is provided. | User Experience (UX) Design | Front-End Development | Business Analysis |
CSS and Presentation
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| CSS-001 | 1.1.1 Non-text Content (A) | Icon fonts used to convey information are provided with a text equivalent. | User Experience (UX) Design | Content Authoring | none |
| CSS-002 | 1.1.1 Non-text Content (A) | The meaning of icon fonts is determined programmatically using the aria-label attribute (or other equivalent means). | Front-End Development | Content Authoring | none |
| CSS-003 | 1.1.1 Non-text Content (A) | Icon fonts whose default accessible name do not represent what the icon is, are overwritten using an aria-hidden attribute (or other equivalent means). | Front-End Development | none | none |
| CSS-004 | 1.1.1 Non-text Content (A) | Background images identified as decorative are implemented as such. | Front-End Development | Visual Design | none |
| CSS-005 | 1.3.1 Info and Relationships (A) | CSS pseudo-selectors such as :before and :after are not used to integrate informative content. | Front-End Development | none | none |
| CSS-006 | 1.3.3 Sensory Characteristics (A) | Shape and location are never used as the only way to convey information and relationships between page components. | Visual Design | User Experience (UX) Design | Content Authoring |
| CSS-007 | 1.3.3 Sensory Characteristics (A) | Users relying on High Contrast themes don't lose information as a result of doing so. | Front-End Development | Visual Design | none |
| CSS-008 | 1.3.4 Orientation (AA) | Content is viewable in both portrait and landscape orientation, unless a particular orientation is essential. | User Experience (UX) Design | Visual Design | none |
| CSS-009 | 1.4.1 Use of Color (A) | Color is never used as the only way to convey information, context, indicate selection or the presence of errors. | Visual Design | User Experience (UX) Design | Content Authoring |
| CSS-010 | 1.4.1 Use of Color (A) | For a link that is not underlined and in a paragraph text, its text color is sufficiently contrasted by providing a luminosity ratio of at least 3:1 against its surrounding text. | Visual Design | none | none |
| CSS-011 | 1.4.3 Contrast (Minimum) (AA) | Regular-sized text is sufficiently contrasted against its background, with a luminosity ratio of at least 4.5:1. | Visual Design | none | none |
| CSS-012 | 1.4.3 Contrast (Minimum) (AA) | Large-sized text is sufficiently contrasted against its background, with a luminosity ratio of at least 3:1. | Visual Design | none | none |
| CSS-013 | 1.4.4 Resize Text (AA) | Users can resize the text on the page up to 200% without any loss of content or functionality. | Visual Design | Front End Development | User Experience (UX) Design |
| CSS-014 | 1.4.4 Resize Text (AA) | CSS techniques are used to ensure that content doesn't overflow, overlap or get truncated as a result of increasing the text size. | Front-End Development | Visual Design | User Experience (UX) Design |
| CSS-015 | 1.4.5 Images of Text (AA) | CSS background sprites don't include images of text, unless equivalent text alternatives are also provided as part of the HTML. | Front-End Development | Content Authoring, Visual Design | none |
| CSS-016 | 1.4.6 Contrast (Enhanced) (AAA) | Regular-sized text is sufficiently contrasted against its background, with a luminosity ratio of at least 7:1. | Visual Design | none | none |
| CSS-017 | 1.4.6 Contrast (Enhanced) (AAA) | Large-sized text is sufficiently contrasted against its background, with a luminosity ratio of at least 4.5:1. | Visual Design | none | none |
| CSS-018 | 1.4.10 Reflow (AA) | The design makes it possible for end users to enlarge the text so that it reflows into a single column without any loss of information or functionality. | Visual Design | User Experience (UX) Design | none |
| CSS-019 | 1.4.10 Reflow (AA) | Displaying content on narrower screens or magnifying it does not cause multidirectional scrolling. | Visual Design | Front-End Development | User Experience (UX) Design |
| CSS-020 | 1.4.11 Non-text Contrast (AA) | All non-text user interface components and graphical objects are sufficiently contrasted against their background, with a luminosity ratio of at least 3:1. | Visual Design | none | none |
| CSS-021 | 1.4.12 Text Spacing (AA) | Adjusting spacing between letters, words, or paragraphs, or adjusting line height does not cause a loss of content or functionality. | Visual Design | Front-End Development | none |
| CSS-022 | 2.4.7 Focus Visible (AA) | The CSS outline property of objects that receive keyboard focus are not set to zero or none. | Front-End Development | Visual Design | none |
| CSS-023 | 2.4.11 Focus Not Obscured (Minimum) (AA) | Elements that receive keyboard focus are at least partially visible in the viewport, without being covered by other content. | User Experience (UX) Design | Front-End Development | Visual Design |
| CSS-024 | 2.4.12 Focus Not Obscured (Enhanced) (AAA) | Elements that receive keyboard focus are fully visible within the viewport, without being covered by other content. | User Experience (UX) Design | Front-End Development | Visual Design |
| CSS-025 | 2.4.13 Focus Appearance (AAA) | The keyboard focus indicator is clearly visible and has a minimum area equivalent to a 2 CSS pixel thick border around the focused element, except situations where no visible change is required. | Visual Design | User Experience (UX) Design, Front-End Development | |
| CSS-026 | 2.4.13 Focus Appearance (AAA) | The focus indicator has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states. | Visual Design | none | none |
| CSS-027 | 2.5.5 Target Size (Enhanced) (AAA) | Unless the interactive element is part of a sentence or a block of text, its size must be at least 44 x 44 pixels. | Visual Design | none | none |
| CSS-028 | 2.5.8 Target Size (Minimum) (AA) | A minimum height and width of 24 CSS pixels is provided for each interactive target that is not an inline link or control. | Visual Design | none | none |
| CSS-029 | 2.5.8 Target Size (Minimum) (AA) | For any control that is less than 24 by 24 CSS pixels, add padding so that the target area is at least 24 by 24 CSS pixels. | Visual Design | none | none |
| CSS-030 | 2.5.8 Target Size (Minimum) (AA) | Controls with the same functionality or destination are combined within a single target area that is at least 24 by 24 CSS pixels. | User Experience (UX) Design | Visual Design | Front-End Development |
Navigation
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| NAV-001 | 1.3.1 Info and Relationships (A) | Active objects and other calls to action are visually identifiable as such. | Visual Design | none | none |
| NAV-002 | 1.3.3 Sensory Characteristics (A) | Instructions are conveyed through more than shape, size, position, or sound alone. | Content Authoring | User Experience (UX) Design | none |
| NAV-003 | 1.4.1 Use of Color (A) | Additional visual and/or textual cues are provided when color is used to convey information. | User Experience (UX) Design | Visual Design, Content Authoring | none |
| NAV-004 | 2.2.1 Timing Adjustable (A) | Users are notified when time limits are about to expire. | User Experience (UX) Design | Business Analysis | none |
| NAV-005 | 2.2.1 Timing Adjustable (A) | Options to extend, or even turn off time limits are provided. | User Experience (UX) Design | Business Analysis | none |
| NAV-006 | 2.2.2 Pause, Stop, Hide (A) | Users are given means to pause, stop or hide content that automatically updates. | User Experience (UX) Design | none | none |
| NAV-007 | 2.2.4 Interruptions (AAA) | Users are provided with means to turn off all updates, except in case of emergencies. | User Experience (UX) Design | none | none |
| NAV-008 | 2.2.5 Re-authenticating (AAA) | Users are provided with means to re-authenticate sessions without loss of data. | User Experience (UX) Design | none | none |
| NAV-009 | 2.4.1 Bypass Blocks (A) | Users can bypass blocks of content using skip links or similar mechanisms. | User Experience (UX) Design | none | none |
| NAV-010 | 2.4.1 Bypass Blocks (A) | Skip links (and similar mechanisms) for main content and navigation are provided at the most effective location in the interface (such as the very first tab stop). | User Experience (UX) Design | none | none |
| NAV-011 | 2.4.1 Bypass Blocks (A) | The functionality and expected destination of skip links and similar mechanisms is clearly defined. | User Experience (UX) Design | Content Authoring | none |
| NAV-012 | 2.4.1 Bypass Blocks (A) | Skip links and similar mechanisms point to the expected destination. | Front-End Development | User Experience (UX) Design | none |
| NAV-013 | 2.4.3 Focus Order (A) | All active elements receive focus in a logical and predictable order that is prescribed by the visual presentation. | Front-End Development | User Experience (UX) Design | User Experience (UX), Design Visual Design |
| NAV-014 | 2.4.3 Focus Order (A) | A logical and predictable focus order is defined for complex interactions. | User Experience (UX) Design | none | none |
| NAV-015 | 2.4.3 Focus Order (A) | Objects that are not actionable are not part of the tabbing order. | Front-End Development | User Experience (UX) Design | none |
| NAV-016 | 2.4.3 Focus Order (A) | Focus is sent back to the initiating point when modal dialogs and controls are dismissed. | Front-End Development | User Experience (UX) Design | none |
| NAV-017 | 2.4.3 Focus Order (A) | Event handlers do not unexpectedly send the focus somewhere else on the page. | Front-End Development | none | none |
| NAV-018 | 2.4.4 Link Purpose (In Context) (A) | Link text and alternate text for images, when used as links, describe the destination or purpose of the link. | Content Authoring | none | none |
| NAV-019 | 2.4.4 Link Purpose (In Context) (A) | Links are marked up using the anchor element and have a valid href attribute value (or use other equivalent means). | Front-End Development | none | none |
| NAV-020 | 2.4.5 Multiple Ways (AA) | Multiple mechanisms are provided for wayfinding, such as navigation menus, breadcrumbs, search features, site map, progress bar, steps, etc. | User Experience (UX) Design | none | none |
| NAV-021 | 2.4.8 Location (AAA) | Indications are provided to help users identify their current location within the site. | User Experience (UX) Design | Visual Design | none |
| NAV-022 | 2.4.9 Link Purpose (Link Only) (AAA) | The purpose of each link can be identified in its immediate context, or from the link text alone. | Content Authoring | User Experience (UX) Design | none |
| NAV-023 | 2.4.10 Section Headings (AAA) | Content is logically organized using section headings. | Content Authoring | User Experience (UX) Design | Front-End Development |
| NAV-024 | 3.2.1 On Focus (A) | Setting the focus to a new element doesn't automatically trigger a context change, such as content updates or the opening of new windows. | User Experience (UX) Design | Front-End Development | none |
| NAV-025 | 3.2.2 On Input (A) | Interacting with input controls or other equivalent elements doesn't automatically trigger a change of context, unless the user has been notified ahead of time. | User Experience (UX) Design | Front-End Development | none |
| NAV-026 | 3.2.3 Consistent Navigation (AA) | Navigation mechanisms are repeated consistently throughout the site or application in the same relative order. | User Experience (UX) Design | Visual Design | none |
| NAV-027 | 3.2.4 Consistent Identification (AA) | Navigational graphics and icons used throughout the site or application are designed to always serve the same function and or meaning. | Visual Design | User Experience (UX) Design | none |
| NAV-028 | 3.2.4 Consistent Identification (AA) | The accessible name of user interface components used across the site or application are defined consistently. | Content Authoring | User Experience (UX) Design | none |
| NAV-029 | 3.2.4 Consistent Identification (AA) | Users can consistently distinguish between links internal to a page and links going to different locations. | Visual Design | none | none |
| NAV-030 | 3.2.5 Change on Request (AAA) | Links that open new windows visually indicate they will do so. | User Experience (UX) Design | Visual Design | none |
| NAV-031 | 3.2.5 Change on Request (AAA) | Links that open new windows indicate they will do so, either as part of the link text, or using aria-label or equivalent means. | Front-End Development | Content Authoring | none |
| NAV-032 | 3.2.6 Consistent Help (AAA) | Help mechanisms are repeated consistently throughout the site or application in the same relative order. | User Experience (UX) Design | Visual Design | none |
Data Tables
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| TAB-001 | 1.3.1 Info and Relationships (A) | Tables are only to be used to lay out tabular information or data. | Front-End Development | User Experience (UX) Design | none |
| TAB-002 | 1.3.1 Info and Relationships (A) | Table row and/or column headers provide context for data within the table. | User Experience (UX) Design | none | none |
| TAB-003 | 1.3.1 Info and Relationships (A) | Data table structure is appropriate for the data being included. | User Experience (UX) Design | none | none |
| TAB-004 | 1.3.1 Info and Relationships (A) | Tabular data and corresponding header cells for that data are part of the same table. | Front-End Development | User Experience (UX) Design | none |
| TAB-005 | 1.3.1 Info and Relationships (A) | Header cells for rows are marked up using THEAD elements. | Front-End Development | none | none |
| TAB-006 | 1.3.1 Info and Relationships (A) | Header cells for columns are marked up using TH elements. | Front-End Development | none | none |
| TAB-007 | 1.3.1 Info and Relationships (A) | The relationship between table header rows and table header columns with data cells in simple data tables is provided through the SCOPE attributes. | Front-End Development | User Experience (UX) Design | none |
| TAB-008 | 1.3.1 Info and Relationships (A) | The relationship between table header rows and table header columns with data cells in complex data tables is provided through the HEADERS and ID attributes. | Front-End Development | User Experience (UX) Design | none |
| TAB-009 | 1.3.1 Info and Relationships (A) | Caption elements are used to associate caption information with data tables. | Front-End Development | none | none |
| TAB-010 | 1.3.1 Info and Relationships (A) | Large, complex data tables are broken into smaller, simpler data tables (when possible). | User Experience (UX) Design | Visual Design, Content Authoring | none |
| TAB-011 | 1.3.1 Info and Relationships (A) | Unrelated data is not included in the same data table. | User Experience (UX) Design | Content Authoring | none |
| TAB-012 | 1.3.1 Info and Relationships (A) | Tables are not used for layout purposes. | Front-End Development | none | none |
| TAB-013 | 1.3.1 Info and Relationships (A) | Tables are not used to layout lists. | Front-End Development | none | none |
| TAB-014 | 1.3.1 Info and Relationships (A) | Caption elements, aria-labelledby attributes or other equivalent means are used to explain the structure of data tables. | Front-End Development | none | none |
| TAB-015 | 1.3.1 Info and Relationships (A) | A meaningful description of the structure of data tables is provided. | Content Authoring | User Experience (UX) Design | none |
| TAB-016 | 1.3.2 Meaningful Sequence (A) | The programmatic order of the table content matches the intended reading order, so not to affect its meaning. | Front-End Development | User Experience (UX) Design | none |
| TAB-017 | 2.4.6 Headings and Labels (AA) | All data table header cells are identified. | User Experience (UX) Design | Front-End Development | none |
Animation and Movement
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| ANM-001 | 1.2.1 Audio-only and Video-only (Prerecorded) (A) | Text transcripts are provided for prerecorded audio-only files. | Content Authoring | User Experience (UX) Design | none |
| ANM-002 | 1.2.1 Audio-only and Video-only (Prerecorded) (A) | Text transcripts are provided for prerecorded video-only files. | Content Authoring | User Experience (UX) Design | none |
| ANM-003 | 1.2.1 Audio-only and Video-only (Prerecorded) (A) | Links to transcript files are provided in close proximity to the audio-only files. | User Experience (UX) Design | none | none |
| ANM-004 | 1.2.1 Audio-only and Video-only (Prerecorded) (A) | The relationship between multimedia files and their associated transcript is clearly communicated through content sequence or focus order. | User Experience (UX) Design | Front-End Development | none |
| ANM-005 | 1.2.1 Audio-only and Video-only (Prerecorded) (A) | Copy on the page identifies when video content has no sound. | User Experience (UX) Design | Content Authoring | none |
| ANM-006 | 1.2.1 Audio-only and Video-only (Prerecorded) (A) | When appropriate, further information about the multimedia file is provided in proximity to the multimedia file. | User Experience (UX) Design | none | none |
| ANM-007 | 1.2.2 Captions (Prerecorded) (A) | Synchronized captions are provided for all prerecorded video content. | Content Authoring | User Experience (UX) Design | none |
| ANM-008 | 1.2.2 Captions (Prerecorded) (A) | Captions do not skip dialogues or important sounds. | Content Authoring | none | none |
| ANM-009 | 1.2.2 Captions (Prerecorded) (A) | Multimedia player controls are provided to turn captions on or off. | User Experience (UX) Design | none | none |
| ANM-010 | 1.2.3 Audio Description or Media Alternative (Prerecorded) (A) | Text transcripts report all significant information from the audio track. | Content Authoring | none | none |
| ANM-011 | 1.2.3 Audio Description or Media Alternative (Prerecorded) (A) | Text transcripts or audio descriptions report all significant information from the visual track. | Content Authoring | none | none |
| ANM-012 | 1.2.4 Captions (Live) (AA) | Synchronized captions are provided for all live video content. | Content Authoring | none | none |
| ANM-013 | 1.2.4 Captions (Live) (AA) | Captions for live audio content are generated using real-time text transcription services. | Content Authoring | User Experience (UX) Design | none |
| ANM-014 | 1.2.5 Audio Description (Prerecorded) (AA) | Prerecorded videos have audio descriptions that captures all significant information from the visual track. | Content Authoring | none | none |
| ANM-015 | 1.2.5 Audio Description (Prerecorded) (AA) | Controls to toggle audio descriptions features are provided as part of the media player controls. | User Experience (UX) Design | none | none |
| ANM-016 | 1.2.5 Audio Description (Prerecorded) (AA) | Multimedia player controls are provided to access a version of the video with audio description. | User Experience (UX) Design | none | none |
| ANM-017 | 1.2.6 Sign Language (Prerecorded) (AAA) | Sign language interpretation is provided for all prerecorded audio content in synchronized media. | Content Authoring | User Experience (UX) Design | none |
| ANM-018 | 1.2.7 Extended Audio Description (Prerecorded) (AAA) | Extended audio description is provided for all prerecorded synchronized video content when pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video. | Content Authoring | User Experience (UX) Design | none |
| ANM-019 | 1.2.8 Media Alternative (Prerecorded) (AAA) | Text alternatives are provided for all prerecorded audio and video files. | Content Authoring | User Experience (UX) Design | none |
| ANM-020 | 1.2.8 Media Alternative (Prerecorded) (AAA) | Brief descriptions summarizing multimedia content are provided in close proximity to the audio and video files. | User Experience (UX) Design | Content Authoring | none |
| ANM-021 | 1.2.9 Audio-only (Live) (AAA) | Live transcripts are provided for all audio content happening in real-time. | Content Authoring | User Experience (UX) Design | none |
| ANM-022 | 1.4.2 Audio Control (A) | Multimedia player controls are provided to turn sound on and off. | User Experience (UX) Design | none | none |
| ANM-023 | 1.4.2 Audio Control (A) | Volume controls for page-level multimedia files are independent from general computer audio controls. | Front-End Development | User Experience (UX) Design | none |
| ANM-024 | 1.4.2 Audio Control (A) | Volume controls for page-level multimedia files are visually located at the top of the page. | User Experience (UX) Design | none | none |
| ANM-025 | 1.4.2 Audio Control (A) | Audio content that automatically starts on page load lasts no longer than 3 seconds. | Front-End Development | User Experience (UX) Design | none |
| ANM-026 | 1.4.2 Audio Control (A) | Prerecorded or live video content is not set to auto-play. | User Experience (UX) Design | none | none |
| ANM-027 | 1.4.7 Low or No Background Audio (AAA) | Prerecorded audio-only background sounds can be controlled by the user. | User Experience (UX) Design | Front-End Development | none |
| ANM-028 | 1.4.7 Low or No Background Audio (AAA) | Prerecorded audio-only speeches contain no background sound, or if they do, must be at least 20 decibels lower than the foreground speech content. | Content Authoring | none | none |
| ANM-029 | 2.1.1 Keyboard (A) | Multimedia player controls can be fully operated using only the keyboard. | Front-End Development | User Experience (UX) Design | none |
| ANM-030 | 2.2.2 Pause, Stop, Hide (A) | Multimedia player controls are provided to pause or play the multimedia file. | User Experience (UX) Design | none | none |
| ANM-031 | 2.2.3 No Timing (AAA) | Timing is not an essential part of the event or activity presented by the content. | User Experience (UX) Design | Content Authoring | Business Analysis |
| ANM-032 | 2.2.6 Timeouts (AAA) | Users are warned that more than 20 hours of inactivity could lead to data loss. | User Experience (UX) Design | Content Authoring | none |
| ANM-033 | 2.3.1 Three Flashes or Below Threshold (A) | Content on the screen does not flash or blink more than three times in any one-second period, or the flash is below the general flash and red flash thresholds. | Visual Design | none | none |
| ANM-034 | 2.3.2 Three Flashes (AAA) | Content on the screen does not flash or blink at a rate that is higher than three times in any one-second period. | Visual Design | none | none |
| ANM-035 | 2.3.3 Animation from Interactions (AAA) | Animation features that create the illusion of movement are defined so that users can disable them. | User Experience (UX) Design | Front-End Developement | none |
| ANM-036 | 2.3.3 Animation from Interactions (AAA) | Animation features that create the illusion of movement support prefers-reduced-motion (or other equivalent means). | Front-End Development | User Experience (UX) Design | none |
| ANM-037 | 4.1.2 Name, Role, Value (A) | Information conveyed by multimedia player controls are programmatically announced through assistive technologies. | Front-End Development | User Experience (UX) Design |
Static Content
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| SCT-001 | 1.1.1 Non-text Content (A) | Emoticons, emojis, ASCII art, and other non-markup language constructs are supported with equivalent text alternatives and conveyed to assistive technologies. | User Experience (UX) Design | Content Authoring | Front-End Development |
| SCT-002 | 1.3.1 Info and Relationships (A) | Emoticons, emojis, ASCII art, and other non-markup language constructs are not used as the only way to structure content or convey information. | User Experience (UX) Design | Front-End Development | none |
| SCT-003 | 1.3.1 Info and Relationships (A) | Proper markup is used to render emphasized, bolded text and other stylistic or presentational effects. | Front-End Development | none | none |
| SCT-004 | 1.3.1 Info and Relationships (A) | Proper markup is used to structure quotes, blockquotes and citations. | Front-End Development | Content Authoring | none |
| SCT-005 | 1.3.1 Info and Relationships (A) | Heading markup is only used for text which acts as a section heading. | Front-End Development | User Experience (UX) Design | none |
| SCT-006 | 1.3.1 Info and Relationships (A) | Heading markup is not used for formatting effects. | Front-End Development | none | none |
| SCT-007 | 1.3.1 Info and Relationships (A) | The headings used in a page provide a logical outline for the document. | Content Authoring | User Experience (UX) Design | none |
| SCT-008 | 1.3.2 Meaningful Sequence (A) | The intended reading order of the content remains logical when CSS and images are turned off. | Front-End Development | User Experience (UX) Design | none |
| SCT-009 | 1.3.2 Meaningful Sequence (A) | The source code order reflects the intended reading order of the document. | Front-End Development | User Experience (UX) Design | none |
| SCT-010 | 1.3.3 Sensory Characteristics (A) | Objects that rely on shape to be properly perceived are supported with additional text information. | User Experience (UX) Design | Visual Design | Content Authoring |
| SCT-011 | 1.3.3 Sensory Characteristics (A) | Objects that rely on size to be properly perceived are supported with additional text information. | User Experience (UX) Design | Visual Design | Content Authoring |
| SCT-012 | 1.3.3 Sensory Characteristics (A) | Objects that rely on visual location to be properly perceived are supported with additional text information. | User Experience (UX) Design | Visual Design | Content Authoring |
| SCT-013 | 1.3.3 Sensory Characteristics (A) | Objects that rely on orientation to be properly perceived are supported with additional text information. | User Experience (UX) Design | Visual Design | Content Authoring |
| SCT-014 | 1.3.3 Sensory Characteristics (A) | Objects that rely on sound to be properly perceived are supported with additional text information. | User Experience (UX) Design | Content Authoring | none |
| SCT-015 | 1.4.5 Images of Text (AA) | Mathematical formulas are marked up using MathML. | Front-End Development | Content Authoring | none |
| SCT-016 | 1.4.8 Visual Presentation (AAA) | Text content in design assets such as content blocks is left-aligned in left-to-right languages. | Visual Design | User Experience (UX) Design | none |
| SCT-017 | 1.4.8 Visual Presentation (AAA) | Fully justified text can easily be changed to ragged right text with a simple action. | User Experience (UX) Design | Front-End Development | none |
| SCT-018 | 3.1.1 Language of Page (A) | The primary language used in the document is properly identified using the lang attribute. | Front-End Development | none | none |
| SCT-019 | 3.1.1 Language of Page (A) | The language definition of the document uses the correct value for language and locale. | Content Authoring | none | none |
| SCT-020 | 3.1.2 Language of Parts (AA) | Content passages that differ from the default are identified with the correct value for language and locale. | Content Authoring | Front-End Development | none |
| SCT-021 | 3.1.3 Unusual Words (AAA) | Unusual words, phrases, and abbreviations are organized into a glossary. | User Experience (UX) Design | Content Authoring | none |
| SCT-022 | 3.1.3 Unusual Words (AAA) | Unusual words found in the content are linked to their definitions in a glossary. | User Experience (UX) Design | Content Authoring | none |
| SCT-023 | 3.1.4 Abbreviations (AAA) | Abbreviations are programmatically associated with their definition. | Front-End Development | none | none |
| SCT-024 | 3.1.5 Reading Level (AAA) | Content is written in plain language using everyday words, to help users with different literacy levels and access needs. | Content Authoring | none | none |
| SCT-027 | 3.1.5 Reading Level (AAA) | Ideas conveyed through text are supported with illustrations or other visuals. | Visual Design | User Experience (UX) Design, Content Authoring | none |
| SCT-028 | 3.1.5 Reading Level (AAA) | Content is displayed and structured in a way that makes it easier to read. | User Experience (UX) Design | Visual Design | none |
| SCT-029 | 3.1.6 Pronunciation (AAA) | Ambiguous words are supported by a mechanism that helps users identify their specific pronunciation. | User Experience (UX) Design | Front-End Development | Content Authoring |
Dynamic Interactions
| ID / Status | WCAG SC | Task | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|
| DYN-001 | 2.4.11 Focus Not Obscured (Minimum) (AA) | Fixed-position content does not fully cover focused elements. | User Experience (UX) Design | Front-End Development | Visual Design |
| DYN-002 | 2.4.12 Focus Not Obscured (Enhanced) (AA) | Fixed-position content does not cover any part of focused elements. | User Experience (UX) Design | Front-End Development | Visual Design |
| DYN-003 | 4.1.3 Status Messages (AA) | Status messages are announced by assistive technologies without affecting the focus. | User Experience (UX) Design | Front-End Development | none |
| DYN-004 | 4.1.3 Status Messages (AA) | Status, toast, or similar messages are programmatically determined through WAI-ARIA roles or properties, so they can be presented to assistive technology users without receiving focus. | Front-End Development | User Experience (UX) Design | none |