Important note: This Wiki page is edited by participants of the EOWG. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.
Visual Designer Responsibilities Mapping
Parent document: https://www.w3.org/WAI/EO/wiki/ARRM_Project_-_Accessibility_Roles_and_Responsibilities_Mapping
Contents
Visual Design
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
Visual Design and Accessibility User Stories
Checkpoint:
KBD-010: Every element that receives keyboard focus is designed to display a visible focus indicator.
Role Assignment Scenario
Decisions on the visual presentation of the site are, by definition, something done by the visual designer (Primary). In some cases, business may have provided branding or other corporate style guidelines (Contributor) to maintain consistency with other related product.
Business is unlikely involved in selecting screen elements and design. The list of interactive elements requiring design are provided by the UX designer, often in wireframes, to the visual designer. The visual designer then defines their presentation in a product style guidelines or high fidelity comps. Since visible focus indicators are purely presentation, content authors are not involved. With this information the front-end developer can fully implement the interactive elements, including visible focus.
End user scenario: Alex, reporter with repetitive stress injury
Alex has worked as a reporter for more than 20 years and has developed a repetitive strain injury that makes it painful to use a mouse and to type for extended periods of time.
Alex’s employer has built several custom workarounds that provide keyboard support for his use of the company’s internal Content Management System with the intention to implement improved keyboard support to benefit all users on the next release of the software. In this case, having a visible focus outline displayed when elements are in focus during keyboard navigation is essential.
Visual Design Checkpoints – Starter List
| ID | WCAG SC | Conformance Level | Content Type | Checkpoint | Main Role | Role Ownership | ||
|---|---|---|---|---|---|---|---|---|
| Primary | Secondary | Contributor(s) | ||||||
| IMG-018 | 1.1.1 | A | Images and Graphs | Charts, graphs, infographics and other visual representations of information don't rely on color alone to convey information. | Design | Visual Design | UX Designer | none |
| IMG-019 | 1.4.5 | AA | Images and Graphs | Text content that conveys information is not part of images. | Design | Visual Design | Content Authoring | Front End Development |
| KBD-010 | 2.4.7 | AA | Keyboard Access | Every element that receives keyboard focus is designed to display a visible focus indicator. | Design | Visual Design | UX Design | none |
| FRM-017 | 3.2.4 | A | Form interactions | Error messages and alerts are visually displayed across the site in a consistent manner. (Consistent presentation also applies related to FRM-004, 7, 11) |
Design | Visual Design | UX Design | none |
| CSS-006 | 1.3.3 | A | CSS Presentation | Shape and location are never used as the only way to convey information and relationships between page components. | Design | Visual Design | UX Design | none |
| CSS-008 | 1.4.1 | A | CSS Presentation | Color is never used as the only way to convey information, context, indicate selection or the presence of errors. | Design | Visual Design | UX Design | none |
| CSS-009 | 1.4.1 | A | CSS Presentation | Link text color is sufficiently contrasted by providing a luminosity ratio of at least 3:1 against its surrounding text. | Design | Visual Design | none | none |
| CSS-011 | 1.4.3 | AA | CSS Presentation | Regular-sized text is sufficiently contrasted against its background, with a ratio of at least 4.5:1. | Design | Visual Design | none | none |
| NAV-010 | 2.4.1 | A | Navigation | Skip links and similar mechanisms are provided at the most effective location in the interface. | Design | Visual Design | UX Design | none |
| NAV-024 | 2.4.7 | AA | Navigation | Indications are provided to help users identify their current location within the site. | Design | Visual Design | UX Design | none |
Visual Design Checkpoints
| ID | WCAG SC | Conformance Level | Content Type | Checkpoint | Main Role | Role Ownership | ||
|---|---|---|---|---|---|---|---|---|
| Primary | Secondary | Contributor(s) | ||||||
| IMG-016 | 1.1.1 | A | Images and Graphs | Alternate means of accessing CAPTCHA information are provided, such as audio CAPTCHA, logical question, or other equivalent means. | Design | Visual Design | UX Design | Business Analyst |
| IMG-018 | 1.1.1 | A | Images and Graphs | Charts, graphs, infographics and other visual representations of information don't rely on color alone to convey information. | Design | Visual Design | UX Designer | none |
| IMG-019 | 1.4.5 | AA | Images and Graphs | Text content that conveys information is not part of images. | Design | Visual Design | Content Authoring | Front End Development |
| DOC-013 | 1.3.1 | A | CSS Presentation | Headings follow a hierarchical sequence without skipping any levels. | Design | Visual Design | UX Design Content Authoring |
none |
| KBD-010 | 2.4.7 | AA | Keyboard Access | Every element that receives keyboard focus is designed to display a visible focus indicator. | Design | Visual Design | UX Design | none |
| FRM-004 | 3.3.2 | A | Form interactions | Radio buttons and checkbox labels are positioned to the right of their respective form controls (for left-to-right languages). | Design | Visual Design | UX Design | none |
| FRM-007 | 1.3.1 | A | Form interactions | Related form fields are grouped together visually. | Design | Visual Design | UX Design | none |
| FRM-011 | 3.3.2 | A | Form interactions | Form field instructions are in close visual proximity to their related controls. | Design | Visual Design | UX Design | none |
| FRM-012 | 1.3.2 | A | Form interactions | Information that is relevant to a form does not appear after the submit button. | Design | Visual Design | UX Design | none |
| FRM-017 | 3.2.4 | A | Form interactions | Error messages and alerts are visually displayed across the site in a consistent manner. (Consistent presentation also applies related to FRM-004, 7, 11) |
Design | Visual Design | UX Design | none |
| FRM-018 | 3.3.1 | A | Form interactions | Inline error messages are displayed next to their related form controls. | Design | Visual Design | UX Design Content Authoring |
none |
| FRM-019 | 3.3.1 | A | Form interactions | Error messages are grouped as a block at the top of the form. | Design | Visual Design | UX Design | none |
| FRM-021 | 3.2.4 | A | Form interactions | Visual indicators are presented to support error messages when errors are returned. | Design | Visual Design | UX Design | none |
| FRM-027 | 3.3.2 | A | Form interactions | Instructions provided in forms are presented in a clear and unambiguous way. | Design | Visual Design | UX Design (usability) |
none |
| CSS-008 | 1.4.1 | A | CSS Presentation | Color is never used as the only way to convey information, context, indicate selection or the presence of errors. | Design | Visual Design | UX Design | none |
| CSS-009 | 1.4.1 | A | CSS Presentation | Link text color is sufficiently contrasted by providing a luminosity ratio of at least 3:1 against its surrounding text. | Design | Visual Design | none | none |
| CSS-011 | 1.4.3 | AA | CSS Presentation | Regular-sized text is sufficiently contrasted against its background, with a ratio of at least 4.5:1. | Design | Visual Design | none | none |
| CSS-012 | 1.4.3 | AA | CSS Presentation | Large-sized text is sufficiently contrasted against its background, with a ratio of at least 3:1. | Design | Visual Design | none | none |
| NAV-001 | 1.3.1 | A | Navigation | Active objects and other calls to action are visually identifiable as such. | Design | Visual Design | none | none |
| NAV-002 | 1.3.3 | A | Navigation | Information is conveyed through more than shape, size, position or sound alone. | Design | Visual Design | UX Design, Content Author | none |
| NAV-003 | 1.4.1 | A | Navigation | Text is provided in addition to color cues, especially when information is conveyed through color differences. | Design | Visual Design | UX Design, Content Author | none |
| NAV-010 | 2.4.1 | A | Navigation | Skip links and similar mechanisms are provided at the most effective location in the interface. | Design | Visual Design | UX Design | none |
| NAV-021 | 2.4.4 | A | Navigation | Users can distinguish between links opening modal windows and links opening new windows. | Design | Visual Design | none | none |
| NAV-024 | 2.4.7 | AA | Navigation | Indications are provided to help users identify their current location within the site. | Design | Visual Design | UX Design | none |
Visual Design Decision Tree Examples
Example 1
Checkpoints
- I want contrast to be high enough that I can easily read all the text on the page.
- I want to easily see and identify which elements on the page I can interact with, especially keyboard focus.
Business Analysts are not concerned with such issues.
Q2: Is this visual design? Yes
These checkpoints are about selection of color and presentation. The Visual Designer provides the final choices in nearly all such situations.
The UX Designer might be consulted about requirements or options, but normally defers the ultimate decisions to the Visual Designer. Since there is no specific text in these checkpoint the Content Author is unlikely to be involved at all. Unless the Visual Designer is familiar with the limits of CSS and web presentation the Front-End Developers is probably will not be involved either.
Example 2
Checkpoints
- I want page content to still be readable and complete if the screen is magnified or the text size and spacing is changed.
- I never want to scroll page content horizontally on narrow screen widths or after magnifying text size and spacing.
Business Analysts are not concerned with such issues.
Q2: Is this visual design? Yes
Any issues about font presentation are almost always the sole responsibility of the Visual Designer. This includes deciding how to manage any overriding of the original, intended design. Other than providing the details to the Front-Designer, there is rarely any consultation with other roles on such presentation-centered topics.
In cases of responsive design (including preventing horizontal scrolling) the Visual Designer likely still makes the final presentation decisions. Unlike font-specific issues, there's an almost certain need to consult with the UX Designer on how to adapt to the constraints, especially on how and what to present interactive elements like navigation, links and controls. These complexities also likely require input from the Front-End Developer but only to help the Visual Designer define the final presentation. Content Authors, unless there are specific needs to define final text, are not likely to be actively involved.
