Applying Accessibility Heuristics to a Wireframe

Usability heuristics are a set of simple, efficient rules, created by Jakob Nielsen and Rolf Molich in 1995, to help designers create better user interfaces. The accessibility heuristics we’ve designed to shift left use the same heuristics methodology as Nielsen and Molich and specifically evaluate design assets for accessibility.

We built a list of accessibility heuristics because designers truly need a better understanding of WCAG, and WCAG is notoriously technical and difficult to interpret in practice if you’re not an accessibility expert. As we previously mentioned, it is crucial for designers to design for accessibility, as this will prevent accessibility issues down the line for developers and QA.

In the videos below, Denis Boudreau and Aparna Pasi, two of our UX accessibility experts, review the fundamentals of a design review process for accessibility based on a set of 10 accessibility-focused heuristics. Here is the checklist and accessibility heuristics as an additional resource.

In part 1 of this video series, you will learn about the following accessibility heuristics:

• Navigating and way finding: Users can easily navigate, find content, and determine where they are at all times within the system.
• Structures and semantics of a page: Users can make sense of the structure of the content on each page and understand how to operate within the system.
• Color contrast and legibility: Text and other meaningful information can be easily distinguished and read by users of the system.

Jump to specific parts of the video using our chapters list:

• 0:00 Introduction & Agenda
• 4:52 Your Role as an Accessible Designer
• 9:30 Accessibility at the Design Phase
• 11:58 Accessibility Heuristics
• 13:49 Navigation and Wayfinding
• 22:34 Structure and Semantics
• 34:14 Contrast and Legibility
• 41:31 Q & A

In part 2 of this video series, you will learn about the following accessibility heuristics:

• Language and readability: Content on the page can easily be read and understood by users of the system.
• Error prevention and error states: Interactive controls (i.e. form elements, widgets, etc.) have persistent, meaningful instructions to help prevent mistakes, and provide users with clear error states which indicate what the problems are - and how to fix them - whenever errors are returned.
• Predictability and consistency: The purpose of each element is predictable, and how each element relates to the system as a whole is clear and meaningful, to avoid confusion for the users.
• Alternatives for visual and auditory content: Purely visual or auditory content that conveys information (i.e. images, icons, videos, notification sounds, etc.) has text-based alternatives for users who can’t see or hear.

Watch part 2 below:

Jump to specific parts of the video using our chapters list:

• 0:00 Introduction
• 2:55 Language and Readability
• 10:34 Error Prevention and States
• 19:21 Predictability and Consistency
• 29:42 Visual and Auditory Alternatives
• 40:23 Q & A

In part 3 of this video series, you will learn about the following accessibility heuristics:

• Account for multiple interaction methods: Users can efficiently interact with the system using the input method of their choosing (i.e. mouse, keyboard, touch, etc.).
• Provide enough time and preserve information: Users are given enough time to complete tasks and do not lose information if their time (i.e. a session) runs out.
• Control of movement and flashing: Elements on the page that move, flash, or animate in other ways can be stopped, and do not distract or harm the users.

Watch part 3 below:

Jump to specific parts of the video using our chapters list:

• 0:00 Introduction
• 3:52 Multiple Interaction Methods
• 12:15 Timing and Preservation
• 20:45 Movement and flashing
• 33:19 Resources and References
• 37:55 Q & A

Deque's experts can review your design wireframes and provide detailed annotations, contact us for a design audit today.