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

From Education & Outreach
Jump to: navigation, search

Parent document: https://www.w3.org/WAI/EO/wiki/ARRM_Project_-_Accessibility_Roles_and_Responsibilities_Mapping

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.

Read Alex's full story


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
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
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
1.3.1 A Navigation Active objects and other calls to action are visually identifiable as such. Design Visual Design none none
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
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
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
2.4.4 A Navigation Users can distinguish between links opening modal windows and links opening new windows. Design Visual Design none none
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.

Q1: Is this business-related? No

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.

Q1: Is this business-related? No

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.