Visual Designer Responsibilities in Accessibility Roles and Responsibilities Mapping (ARRM)
This is an in-progress draft. We welcome your comments via GitHub or email from the links below under Help improve this page. You are also welcome to join the ARRM Community Group to contribute.
Role summary
Visual Design focuses largely on the look and feel of an application, as an end user would experience it, visually or otherwise. This includes specifying original design of interface elements and layout, choosing fonts and colors, and more. While UX design is focused on how something works, visual design is focused on how it looks and feels.
Key Deliverables include
- Style guides
- Page comps
- Design mockups
- Image files
- Etc.
Tasks include
- Visual styling
- Logos and branding
- Animation and iconography design
- Etc.
Example job titles for this role
Visual Designer, Web Designer, User Interface (UI) Designer, Graphic Designer.
Tasks to get started
Below is a list of tasks for visual designers to get started making your work more accessible to disabled people. If these design tasks aren’t met, your design can create barriers to users with disabilities.
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 | Level | Task |
|---|---|---|---|
| IMG-018 | 1.1.1 | A | Charts, graphs, infographics and other visual representations of information don't rely on color alone to convey information. |
| INP-017 | 2.4.7 | AA | Every element that receives keyboard focus is designed to display a visible focus indicator. |
| FRM-022 | 3.2.4 | A | Visual indicators are presented to support error messages when errors are returned. |
| FRM-031 | 3.3.2 | A | Instructions provided in forms are displayed in a clear and unambiguous way. |
| CSS-006 | 1.3.3 | A | Shape and location are never used as the only way to convey information and relationships between page components. |
| CSS-009 | 1.4.1 | A | Color is never used as the only way to convey information, context, indicate selection or the presence of errors. |
| CSS-010 | 1.4.1 | 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. |
| CSS-011 | 1.4.3 | AA | Regular-sized text is sufficiently contrasted against its background, with a luminosity ratio of at least 4.5:1. |
| CSS-012 | 1.4.3 | AA | Large-sized text is sufficiently contrasted against its background, with a luminosity ratio of at least 3:1. |
| CSS-013 | 1.4.4 | AA | Users can resize the text on the page up to 200% without any loss of content or functionality. |
| CSS-019 | 1.4.10 | AA | Displaying content on narrower screens or magnifying it does not cause multidirectional scrolling. |
| NAV-001 | 1.3.1 | A | Active objects and other calls to action are visually identifiable as such. |
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:
IMG-018: Charts, graphs, infographics and other visual representations of information don’t rely on color alone to convey information.
Primary Role: Visual Designer
“As the primary owner of this task, I will ensure I don’t use color alone when I’m creating a highly visual graphical representation of data (numbers, relationships between items, etc.) - for example a pie chart, line graph, bar graph or any other infographic that relies heavily on symbols or color.
I will work with the content author or stakeholder to ensure there’s an alternative way of perceiving the data and relationships between the data sets. This could be a matrix/ table, or bullet list, or simple text format.
The secondary owner here is the UX designer, who will assist me in ensuring there is space for both the visual representation (also known as “complex images”) on the page along with the text alternative, which should be adjacent to the visual design so it’s accessed easily.
At the same time, the visual representation is ideally not navigable by keyboard and screen reader, as it is likely not linear. A good practice is to make the visual - a pie chart, bar graph, line graph, etc. an image and add a short description to it to summarize it. Example: “Graph showing the most downloaded songs between January and December 2022”.
Then the text alternative for the data will provide full details.”
Secondary Role: UX Designer
The secondary owner of the task is the UX Designer. They design the page layout, functionality and interactions with the content on the web page or screen.
The UX designer should support the Visual Designer when they create both the visual representation of data and the text alternative. They ensure that all users can access both through navigation.
End user persona: Lexie, an online shopper who is colorblind
Lexie is colorblind and encounters barriers when shopping online. He has one of the most common visual disabilities that affect men: red and green color blindness. Lexie frequently shops online and sometimes encounters problems on websites and with apps where the color contrast of text and images is not adequate and where color alone is used to indicate required fields and sale prices.
When red and green color combinations are used, Lexie cannot distinguish between the two, since both look brown to him. It is also very difficult for him to make product choices when color swatches are not labeled with the name of the color.
Read Lexie’s full story and learn about other design tasks that benefit users like him.
Additional resources
- Use the Tips for Designing to get started.
- Use the Resources for Designers.