Aligning Jakob Nielsen's 10 Usability Heuristics with the WCAG 2.2

Aligning Jakob Nielsen's 10 Usability Heuristics with the WCAG 2.2

UI + UX + Accessibility

After speaking with a team of designers who referenced using Jakob Nielsen's 10 Usability Heuristics for interface design while working on a redesign project, I wondered how these guidelines aligned with the current Web Content Accessibility Guidelines (WCAG). It's common when mentioning "design" and "accessibility" in the same breath; the default focus falls on color contrast — which is understandable. Contrast issues are typically the most prevalent accessibility error. However, while color contrast is a valid concern, it's not the only aspect of design that affects accessibility. Designers must also be mindful of how their UI translates to the UX. Just as Jakob's guidelines cover a range of best practices for the user experience, the WCAG influences the accessible user experience similarly.

The following sections look at each usability heuristic and the applicable Success Criteria from the WCAG 2.2. The goal is to show the depth of the correlations between the usability guidelines and the Success Criteria that govern accessibility as they relate to product design.

Each section starts with a usability heuristic and a link for more information, followed by links to the related WCAG 2.2 Success Criteria.

1. Visibility of system status

The design should always keep users informed about what is going on through appropriate feedback within a reasonable amount of time - Visibility System Status

2. Match between system and the real world

The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order. - Match System Real World

3. User control and freedom

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process. - User Control and Freedom

4. Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions. - Consistency and Standards

5. Error prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. - Slips

6. Recognition rather than recall

Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed. - Recognition and Recall

7. Flexibility and efficiency of use

Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. - Flexibility Efficiency Heuristic

8. Aesthetic and minimalist design

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility. - Aesthetic Minimalist Design

9. Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution. - Error Message Guidelines

10. Help and documentation

It's best if the system doesn't need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks. - Help and Documentation


References:

10 Usability Heuristics for User Interface Design
https://www.nngroup.com/articles/ten-usability-heuristics/

Understanding WCAG 2.2
https://www.w3.org/WAI/WCAG21/quickref/

The WebAIM Million
https://webaim.org/projects/million/#contrast