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

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

• 1.3.1 Info and Relationships
• 1.3.2 Meaningful Sequence
• 1.3.3 Sensory Characteristics
• 1.4.1 Use of Color
• 1.4.3 Contrast (Minimum)
• 1.4.6 Contrast (Enhanced)
• 1.4.8 Visual Presentation
• 1.4.10 Reflow
• 1.4.11 Non-text Contrast
• 1.4.13 Content on Hover or Focus
• Guidelines 2.2 – 2.2.6 Enough Time
• 2.3.3 Animation from Interactions
• 2.4.7 Focus Visible
• 2.4.11 Focus Not Obscured (Minimum)
• 2.4.12 Focus Not Obscured (Enhanced)
• 2.4.13 Focus Appearance
• 2.5.1 Pointer Gestures
• 2.5.7 Dragging Movements
• Guidelines 3.2 – 3.2.5 Predictable
• Guidelines 3.3 – 3.3.6 Input Assistance
• 3.3.8 Accessible Authentication (Minimum)
• 3.3.9 Accessible Authentication (Enhanced)
• 4.1.3 Status Messages

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

• Guidelines 1.3 – 1.3.6 Adaptable
• Guidelines 2.4 – 2.4.10 Navigable
• Guidelines 2.5 – 2.5.6 Input Modalities
• Principle 3 – 3.3.6 Understandable
• 4.1.3 Status Messages

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

• 1.3.3 Sensory Characteristics
• 1.3.4 Orientation
• 1.3.5 Identify
• 1.3.6 Identify Purpose
• 1.4.2 Audio Control
• 1.4.4 Resize text
• 1.4.13 Content on Hover or Focus
• Guidelines 2.4 – 2.4.12 Navigable
• 2.5.1 Pointer Gestures
• 2.5.2 Pointer Cancellation
• 2.5.4 Motion Actuation
• 2.5.7 Dragging Movements
• 3.2.1 On Focus
• 3.3.2 On Input
• Guidelines 3.3 – 3.3.6 Input Assistance

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

• 1.3.1 Info and Relationships
• 1.3.2 Meaningful Sequence
• 1.3.3 Sensory Characteristics
• 1.3.5 Identify Input Purpose
• 1.4.13 Content on Hover or Focus
• Guidelines 2.1 – 2.1.4 Keyboard Accessible
• 2.4.3 Focus Order
• 2.4.4 Link Purpose (In Context)
• 2.4.6 Headings and Labels
• 2.4.7 Focus Visible
• 2.4.9 Link Purpose (Link Only)
• 2.4.10 Section Headings
• 2.4.11 Focus Not Obscured (Minimum)
• 2.4.12 Focus Not Obscured (Enhanced)
• 2.4.13 Focus Appearance
• 2.5.1 Pointer Gestures
• 2.5.2 Pointer Cancellation
• 2.5.3 Label in Name
• 2.5.4 Motion Actuation
• 2.5.6 Concurrent Input Mechanisms
• 2.5.7 Dragging Movements
• 2.5.8 Target Size (Minimum)
• Guidelines 3.1 – 3.1.6 Readable
• Guidelines 3.2 – 3.2.6 Predictable
• Guidelines 3.3 – 3.3.6 Input Assistance
• 4.1.3 Status Messages

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

• 1.3.1 Info and Relationships
• 1.4.1 Use of Color
• Guidelines 2.2 – 2.2.6 Enough Time
• 2.5.8 Target Size (Minimum)
• Guidelines 3.2 – 3.2.5 Predictable
• Guidelines 3.3 – 3.3.6 Input Assistance
• 4.1.3 Status Messages

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

• 1.3.1 Info and Relationships
• 1.3.2 Meaningful Sequence
• 1.3.3 Sensory Characteristics
• 1.3.5 Identify Input Purpose
• 1.3.6 Identify Purpose
• 1.4.3 Contrast (Minimum)
• 1.4.6 Contrast (Enhanced)
• 1.4.8 Visual Presentation
• 2.2.4 Interruptions
• 2.4.2 Page Titled
• 2.4.4 Link Purpose (In Context)
• 2.4.6 Headings and Labels
• 2.4.7 Focus Visible
• 2.4.9 Link Purpose (Link Only)
• 2.4.10 Section Headings
• Guidelines 3.2 – 3.2.6 Predictable
• 3.3.7 Redundant Entry
• 4.1.3 Status Messages

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

• Guidelines 1.2 – 1.2.9 Time-based Media
• 1.3.3 Sensory Characteristics
• 1.3.4 Orientation
• 1.4.2 Audio Control
• 1.4.4 Resize text
• 1.4.5 Images of Text
• 1.4.7 Low or No Background Audio
• 1.4.8 Visual Presentation
• 1.4.10 Reflow
• Guidelines 2.1 – 2.1.4 Keyboard Accessible
• Guidelines 2.2 – 2.2.6 Enough Time
• 2.4.1 Bypass Blocks
• 2.4.4 Link Purpose (In Context)
• 2.4.5 Multiple Ways
• 2.4.6 Headings and Labels
• 2.4.7 Focus Visible
• 2.4.8 Location
• 2.4.9 Link Purpose (Link Only)
• 2.4.10 Section Headings
• 2.5.1 Pointer Gestures
• 2.5.2 Pointer Cancellation
• 2.5.3 Label in Name
• 2.5.4 Motion Actuation
• 2.5.6 Concurrent Input Mechanisms
• 2.5.7 Dragging Movements
• 2.5.8 Target Size (Minimum)
• Guidelines 3.2 – 3.2.5 Predictable
• Guidelines 3.3 – 3.3.9 Input Assistance

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

• Guidelines 1.1 – 1.1.1 Text Alternatives
• 1.3.1 Info and Relationships
• 1.3.2 Meaningful Sequence
• 1.3.5 Identify Input Purpose
• 1.3.6 Identify Purpose
• 1.4.1 Use of Color
• 1.4.3 Contrast (Minimum)
• 1.4.4 Resize Text
• 1.4.5 Images of Text
• 1.4.6 Contrast (Enhanced)
• 2.4.7 Focus Visible
• 2.4.11 Focus Not Obscured (Minimum)
• 2.4.12 Focus Not Obscured (Enhanced)
• 2.4.13 Focus Appearance
• 2.5.1 Pointer Gestures
• 2.5.8 Target Size (Minimum)

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

• 1.3.1 Info and Relationships
• 1.3.3 Sensory Characteristics
• 1.3.5 Identify Input Purpose
• 1.3.6 Identify Purpose
• 1.4.1 Use of Color
• 1.4.3 Contrast (Minimum)
• 1.4.6 Contrast (Enhanced)
• 1.4.11 Non-text Contrast
• Guidelines 2.2 – 2.2.6 Enough Time
• 3.2.3 Consistent Navigation
• 3.2.4 Consistent Identification
• 3.2.5 Change on Request
• Guidelines 3.3 – 3.3.9 Input Assistance
• 4.1.3 Status Messages

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

• Guidelines 1.1 – 1.1.1 Text Alternatives
• Guidelines 1.2 – 1.2.9 Time-based Media
• 1.3.1 Info and Relationships
• 1.3.2 Meaningful Sequence
• 1.3.5 Identify Input Purpose
• 1.3.6 Identify Purpose
• 1.4.1 Use of Color
• 1.4.3 Contrast (Minimum)
• 1.4.4 Resize Text
• 1.4.5 Images of Text
• 1.4.6 Contrast (Enhanced)
• Guidelines 2.1 – 2.1.4 Keyboard Accessible
• Guidelines 2.4 – 2.4.10 Navigable
• Principle 3 - 3.3.9 Understandable
• 4.1.3 Status Messages

---

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