User Experience (UX) Designer Responsibilities in Accessibility Roles and Responsibilities Mapping (ARRM)
Role summary
UX Designers can potentially cover numerous related areas, from conceptualizing the user journey to partial Front-end Development. For the purposes of this resource, UX Design is defined by its core responsibilities, such as information architecture, creating wireframes (low fidelity screen mockups), and creating prototypes that define interactions.
- Key deliverable examples:
- User journeys, wireframes, prototypes, interaction guidelines, and information architecture
- Tasks include:
- User workflow / process maps, designing user experiences, user task and workflow mapping, creating, and maintaining user personas
- Example job titles for this role:
- User Experience (UX) Designer, Product Designer, Web Designer, and Service Designer
Tasks to get started
Below is a list of tasks for UX Designers to get started making your work more accessible to disabled people. If these design tasks aren’t met, your designs can create barriers to users with disabilities.
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.
You can also get the full list of Tasks Involved in Accessibility as a web page with other roles, or download the CSV file.
| ID | WCAG SC | Task |
|---|---|---|
| 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. |
| IMG-019 | 1.4.5 Images of Text (AA) | Text content that conveys information is not part of images. |
| SEM-018 | 2.4.1 Bypass Blocks (A) | iFrames displaying content are provided with a clear, informative title attribute value. |
| SEM-028 | 4.1.2 Name, Role, Value (A) | iFrames are given a title that describes their content or purpose. |
| 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. |
| 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. |
| 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. |
| INP-007 | 2.1.1 Keyboard (A) | Behaviors for hover and focus states are planned and included with the design assets. |
| INP-008 | 2.1.1 Keyboard (A) | Keyboard focus states are planned for every active element. |
| 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. |
| 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. |
| INP-019 | 2.5.1 Pointer Gestures (A) | Non-essential multipoint, path- or gesture-based functions have single-pointer alternatives. |
| 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. |
| INP-022 | 2.5.4 Motion Actuation (A) | All non-essential motion-related functionalities have alternative user interface controls that allow for equivalent actions. |
| INP-023 | 2.5.4 Motion Actuation (A) | All non-essential motion-related functionality can be turned off to prevent accidental actuation. |
| INP-024 | 2.5.7 Dragging Movements (AA) | All functionality requiring dragging movements can also be operated using single-pointer alternatives. |
| INP-026 | 3.2.2 On Input (A) | Keyboard focus does not move automatically from one form control to the next. |
| FRM-011 | 1.3.2 Meaningful Sequence (A) | Information that is relevant to a form does not appear after the submit button. |
| 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. |
| FRM-017 | 2.5.6 Concurrent Input Mechanisms (AAA) | The content is designed in a way that does not restrict input modalities available. |
| FRM-018 | 3.2.1 On Focus (A) | Changes of context are not initiated automatically as user interface components receive focus. |
| 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. |
| FRM-021 | 3.2.4 Consistent Identification (A) | Error messages and alerts are visually displayed across the site in a consistent manner. |
| FRM-023 | 3.3.1 Error Identification (A) | Inline error messages are displayed next to their related form controls. |
| FRM-024 | 3.3.1 Error Identification (A) | Error messages are grouped as a list at the top of the form. |
| 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). |
| FRM-026 | 3.3.2 Labels or Instructions (A) | Related form controls and their respective labels are grouped together visually. |
| FRM-027 | 3.3.2 Labels or Instructions (A) | Instructions are in close visual proximity to their related controls. |
| FRM-029 | 3.3.2 Labels or Instructions (A) | Form controls are designed to have persistent visual labels. |
| FRM-032 | 3.3.2 Labels or Instructions (A) | Placeholder text is not used in lieu of regular text label elements. |
| FRM-035 | 3.3.3 Error Suggestion (AA) | Text-based instructions are provided to help users correct errors. |
| 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. |
| 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. |
| FRM-038 | 3.3.5 Help (AAA) | Context-sensitive help text is available. |
| FRM-039 | 3.3.6 Error Prevention (All) (AAA) | Users are provided with means to prevent and correct form errors. |
| 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. |
| 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. |
| 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. |
| CSS-001 | 1.1.1 Non-text Content (A) | Icon fonts used to convey information are provided with a text equivalent. |
| CSS-008 | 1.3.4 Orientation (AA) | Content is viewable in both portrait and landscape orientation, unless a particular orientation is essential. |
| 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. |
| 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. |
| 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. |
| NAV-003 | 1.4.1 Use of Color (A) | Additional visual and/or textual cues are provided when color is used to convey information. |
| NAV-004 | 2.2.1 Timing Adjustable (A) | Users are notified when time limits are about to expire. |
| NAV-005 | 2.2.1 Timing Adjustable (A) | Options to extend, or even turn off time limits are provided. |
| NAV-006 | 2.2.2 Pause, Stop, Hide (A) | Users are given means to pause, stop or hide content that automatically updates. |
| NAV-007 | 2.2.4 Interruptions (AAA) | Users are provided with means to turn off all updates, except in case of emergencies. |
| NAV-008 | 2.2.5 Re-authenticating (AAA) | Users are provided with means to re-authenticate sessions without loss of data. |
| NAV-009 | 2.4.1 Bypass Blocks (A) | Users can bypass blocks of content using skip links or similar mechanisms. |
| 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). |
| NAV-011 | 2.4.1 Bypass Blocks (A) | The functionality and expected destination of skip links and similar mechanisms is clearly defined. |
| NAV-014 | 2.4.3 Focus Order (A) | A logical and predictable focus order is defined for complex interactions. |
| 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. |
| NAV-021 | 2.4.8 Location (AAA) | Indications are provided to help users identify their current location within the site. |
| 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. |
| 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. |
| NAV-026 | 3.2.3 Consistent Navigation (AA) | Navigation mechanisms are repeated consistently throughout the site or application in the same relative order. |
| NAV-030 | 3.2.5 Change on Request (AAA) | Links that open new windows visually indicate they will do so. |
| NAV-032 | 3.2.6 Consistent Help (AAA) | Help mechanisms are repeated consistently throughout the site or application in the same relative order. |
| TAB-002 | 1.3.1 Info and Relationships (A) | Table row and/or column headers provide context for data within the table. |
| TAB-003 | 1.3.1 Info and Relationships (A) | Data table structure is appropriate for the data being included. |
| TAB-010 | 1.3.1 Info and Relationships (A) | Large, complex data tables are broken into smaller, simpler data tables (when possible). |
| TAB-011 | 1.3.1 Info and Relationships (A) | Unrelated data is not included in the same data table. |
| TAB-017 | 2.4.6 Headings and Labels (AA) | All data table header cells are identified. |
| 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. |
| 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. |
| ANM-005 | 1.2.1 Audio-only and Video-only (Prerecorded) (A) | Copy on the page identifies when video content has no sound. |
| 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. |
| ANM-009 | 1.2.2 Captions (Prerecorded) (A) | Multimedia player controls are provided to turn captions on or off. |
| ANM-015 | 1.2.5 Audio Description (Prerecorded) (AA) | Controls to toggle audio descriptions features are provided as part of the media player controls. |
| ANM-016 | 1.2.5 Audio Description (Prerecorded) (AA) | Multimedia player controls are provided to access a version of the video with audio description. |
| 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. |
| ANM-022 | 1.4.2 Audio Control (A) | Multimedia player controls are provided to turn sound on and off. |
| ANM-024 | 1.4.2 Audio Control (A) | Volume controls for page-level multimedia files are visually located at the top of the page. |
| ANM-026 | 1.4.2 Audio Control (A) | Prerecorded or live video content is not set to auto-play. |
| ANM-027 | 1.4.7 Low or No Background Audio (AAA) | Prerecorded audio-only background sounds can be controlled by the user. |
| ANM-030 | 2.2.2 Pause, Stop, Hide (A) | Multimedia player controls are provided to pause or play the multimedia file. |
| ANM-031 | 2.2.3 No Timing (AAA) | Timing is not an essential part of the event or activity presented by the content. |
| ANM-032 | 2.2.6 Timeouts (AAA) | Users are warned that more than 20 hours of inactivity could lead to data loss. |
| 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. |
| 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. |
| 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. |
| SCT-010 | 1.3.3 Sensory Characteristics (A) | Objects that rely on shape to be properly perceived are supported with additional text information. |
| SCT-011 | 1.3.3 Sensory Characteristics (A) | Objects that rely on size to be properly perceived are supported with additional text information. |
| SCT-012 | 1.3.3 Sensory Characteristics (A) | Objects that rely on visual location to be properly perceived are supported with additional text information. |
| SCT-013 | 1.3.3 Sensory Characteristics (A) | Objects that rely on orientation to be properly perceived are supported with additional text information. |
| SCT-014 | 1.3.3 Sensory Characteristics (A) | Objects that rely on sound to be properly perceived are supported with additional text information. |
| SCT-017 | 1.4.8 Visual Presentation (AAA) | Fully justified text can easily be changed to ragged right text with a simple action. |
| SCT-021 | 3.1.3 Unusual Words (AAA) | Unusual words, phrases, and abbreviations are organized into a glossary. |
| SCT-022 | 3.1.3 Unusual Words (AAA) | Unusual words found in the content are linked to their definitions in a glossary. |
| SCT-028 | 3.1.5 Reading Level (AAA) | Content is displayed and structured in a way that makes it easier to read. |
| SCT-029 | 3.1.6 Pronunciation (AAA) | Ambiguous words are supported by a mechanism that helps users identify their specific pronunciation. |
| DYN-001 | 2.4.11 Focus Not Obscured (Minimum) (AA) | Fixed-position content does not fully cover focused elements. |
| DYN-002 | 2.4.12 Focus Not Obscured (Enhanced) (AA) | Fixed-position content does not cover any part of focused elements. |
| DYN-003 | 4.1.3 Status Messages (AA) | Status messages are announced by assistive technologies without affecting the focus. |
Case study: How to use the tasks
A good way to get familiar with the tasks is to do a short case study. Think about how you might tackle the task in your role. Then, think of how meeting this task impacts an end user.
Task
NAV-024: Setting the focus to a new element doesn’t automatically trigger a context change, such as content updates or the opening of new windows.
Primary Role: UX Designer
“As the primary owner of this task, I will add annotations to my design document(s). They will identify which elements on the page receive keyboard focus.
I will include this instruction for Front-end developers: implement the interactive elements in a way that, when the element receives focus, it doesn’t automatically trigger a context change on the page.”
Secondary Role: Visual Designer
The secondary owner of the task is the Visual Designer. They may have designed content to appear on the screen once a button receives focus and is selected.
Explain the behaviour and functionality that you intend as the UX Designer and primary owner. For example, if the button receives focus, it shouldn’t automatically show the content. It should be user-controlled; the user needs to select the button for it to display.
Collaborating on the design together ensures that it’s optimized for multiple end users.
End user persona: Lakshmi, a senior accountant member who is blind
Lakshmi is blind and uses a screen reader (speech-to-text software) and keyboard to navigate web pages. She uses websites daily for research and financial transactions. This design task ensures she isn’t confused by an unexpected behaviour, i.e., when her keyboard focus lands on a button for the first time and content is announced automatically or the button automatically opens another page.
The intent of the task is to ensure that functionality is predictable as visitors navigate their way through a document.
This task helps people with visual disabilities, cognitive limitations, and motor impairments by reducing the chance that a change of context will occur unexpectedly.
Read Lakshmi’s full story and learn about other design tasks that benefit users like her.
Additional resources
- Use the Tips for Designing to get started
- See the WAI Tutorials for common web components and how to make them accessible