Accessibility in UX and Design

A designer holds the big picture of how a user experiences a web application or site. When it comes to accessibility, the designer must include all audiences of a site including those with disabilities.

That means, when it comes to designing for people who use screen readers such as those with visual disabilities, the designs must address the how these users experience an application or site. We accommodate screen readers and other audiences in our designs by

Using an accessibility-related checklist to identify what to expect from our designs
Including accessibility-related annotations to our designs

Because implementing accessible designs may rely on the semantics of the underlying code, designers may need to collaborate with developers and accessibility specialists to create a design that is both accessible and can be reasonably implemented. You can learn more about users with disabilities from the Web Accessibility Initiative (WAI).

Accessibility-related checklist

To ensure we create designs that result in accessible functionality, we have a checklist that defines what to expect from accessible designs:

SWS Accessibility Design Checklist

This is a spreadsheet that can copied on a per-project basis to document and track accessibility issues.

Annotate Accessibility-Related Concepts

One way for designers to communicate design concepts around accessibility to developers, is through annotating designs with descriptions of accessibility behaviors and properties.

When do you annotate for accessibility?

Consider annotating if you are doing work that might impact a theme, sub-theme, or any other front-end functionality. This includes new or changes to:

paragraph types, components, pages (such as a listing page) or modules
visual elements (like global alert)
fields (i.e. changes to max character length, new options, etc)
visual changes (i.e. spacing, font changes, anything)
functionality (i.e. editor options)

What do you annotate?

Ideally the annotations should used to dispel ambiguity in how designs are implemented. Consider annotating items such as:

focus order and reading order if is not intuitive
where skip content links jump from and to when the page layout is new or changes significantly
semantic element suggestions such as list, headings, articles, landmarks, etc.
alternative (alt) text especially when an image or other media provides meaningful content

How do you annotate?

Annotations can be directly associated with the design or compiled into a list and documented separately.

For designs that are more complicated or high-profile, use design tools such as Figma to include accessibility annotations in a separate layer of the design. The A11y Annotation Kit is one example of a Figma library for documenting accessibility considerations.

For designs that are straight forward and low-profile, minimal annotations and a standard checklist for logical and semantic elements might suffice. See Accessibility Conventions for example.