Skip to main content
Digital Services Factory

Designing accessible online services: a heuristic approach for designers

30/05/25  |  Blog
A heuristic approach for designers

By Constantinos Evangelou, Interaction designer

Accessibility in online service design is not just about compliance with the relevant laws and regulations; it ensures that all users, including those with disabilities, can interact effectively with digital services. To help designers create accessible forms, we’ve adapted Deque’s accessibility heuristics into a practical checklist that aligns with our design system. 

This post explores the six key heuristics we use, how the accessibility heuristics table and scoring system work, how to use heuristic evaluation, and how designers can apply this in practice. 

Understanding the accessibility heuristics table 

Our accessibility heuristics are adapted from Deque’s evaluation framework and guided by the four WCAG principles, Perceivable, Operable, Understandable, and Robust (POUR). To better align with our design system and practical evaluation needs, we’ve expanded this into six designer-friendly categories:
Perceivable, Operable, Understandable, Robust, Privacy & Security, and Compatible.

Each category contains a set of focused questions that help teams assess whether a digital service, especially form-based experiences, meets essential accessibility standards.

These questions are structured to support both design and development teams in identifying potential issues early. While some original heuristics targeted implementation (e.g., correct HTML structure), we’ve reworded them to focus on what designers can observe and influence, making them actionable within the design process.

How the scoring system works 

When conducting an accessibility heuristic evaluation, each question is assigned a score from 0 to 2: 

  • 0 ( Fails accessibility check symbol Not met): The heuristic is not followed, making the experience inaccessible.
  • 1 ( Issue found or partially working symbol Partially met): Some aspects are accessible, but improvements are needed.
  • 2 ( Pass symbol Fully met): The heuristic is successfully applied, ensuring good accessibility. 

The final score helps teams prioritize fixes. A low score highlights critical barriers that must be addressed, while a high score indicates a well-optimized experience. 

How to use heuristic evaluation

  1. Go through each heuristic using the checklist. 
  2. Score each item based on how well it meets the accessibility criteria. 
  3. Identify patterns, if multiple issues exist within a category, focus on efforts there. 
  4. Collaborate with developers to implement necessary fixes. 

The heuristic checklist for accessible forms 

1. Perceivable (Can users detect and sense the content?)

2. Operable (Can users interact with the form easily?)

  • Can all form elements (e.g. inputs, buttons, selects) be easily clicked or tapped?
  • Is the focus indicator clear when navigating with a keyboard and designed as explained in the design system?
  • Are elements placed as defined in the vertical spacing page of the design system to be easy to tap? 

3. Understandable (Is the form clear and easy to use?) 

4. Robust (Does it support different user needs?)

  • Does the form work well in high contrast mode?
  • Does the design avoid relying only on color to indicate errors or status?
  • Is text resizable without breaking the layout? 

5. Privacy & Security (Is authentication and input handling accessible?) 

  • If CAPTCHA is used, is there an accessible alternative (e.g. audio challenge or email verification)?
  • Are personal data entry fields designed to be accessible while maintaining user privacy? (e.g. clearly labeled fields, avoiding unnecessary data collection)
  • Does the form avoid unnecessary time limits that could make completion difficult? 

6. Compatible (Does it work across devices and environments?) 

  • Is the form responsive and usable on mobile, tablet and desktop screens?
  • Does it support larger text settings without cutting off information?
  • Are all interactive elements designed for both mouse and touch input? 

Practical example

Let’s say a designer is evaluating a government form for accessibility. They go through the checklist and assess all the questions:

Heuristic Question Score 
Perceivable Are all form fields clearly labeled with visible text?  Pass symbol 2 
 Is placeholder text not used as a replacement for labels?  Pass symbol 2 
 Are error messages designed as explained in the design system?  Issue found or partially working symbol 1 
Operable Can all form elements be easily clicked or tapped?  Pass symbol 2 
 Is the focus indicator clear when navigating with a keyboard?  Fails accessibility check symbol 0 
 Are elements placed correctly for easy tapping?  Pass symbol 2 
Understandable Are error messages clear and specific?  Issue found or partially working symbol 1 
 Are optional fields clearly marked?  Pass symbol 2 
 Is the form/page layout logical and easy to follow?  Pass symbol 2 
Robust Does the form work well in high contrast mode?  Pass symbol 2 
 Does the design avoid relying only on color?  Pass symbol 2 
 Is text resizable without breaking the layout?  Pass symbol 2 
Privacy & Security If CAPTCHA is used, is there an accessible alternative?  Pass symbol 2 
 Are personal data entry fields accessible and private?  Pass symbol 2 
 Does the form avoid unnecessary time limits?  Pass symbol 2 
Compatible Is the form responsive across devices?  Pass symbol 2 
 Does it support larger text settings?  Pass symbol 2 
 Are all interactive elements designed for both mouse and touch?  Pass symbol 2 

Final Score: 33/36 

By scoring these issues and discussing them with developers, the team can prioritize improvements to ensure a fully accessible form experience. For instance, they can refine error messages to be more specific and ensure a visible focus indicator is implemented according to the design system guidelines. 

How designers can use this checklist

Designers play a crucial role in ensuring accessibility throughout the product lifecycle. This checklist isn’t just a one-time evaluation tool, it can be integrated at multiple stages of the design process: 

  1. During design reviews:
    Use the checklist as a guide to evaluate early wireframes or UI mockups. Look for any unanswered questions or accessibility gaps before handoff. For example, check if error messages are clear or if form fields are properly labeled.
  2. During prototyping and user testing:
    Test interactive prototypes with users and refer back to the checklist. Try navigating with only a keyboard, increase text size, or use high contrast mode to spot issues in real-time. Note down which checklist items are not fully met.
  3. During design/dev collaboration:
    Share completed checklist scores or flagged issues with developers. This helps ensure that your design intent (like focus indicators or spacing for tap targets) is carried through to implementation in line with the design system.

By embedding this checklist into your workflow, accessibility becomes a proactive design consideration, not a last-minute fix. Over time, it helps create digital services that are inclusive, consistent, and easy to use for everyone.

Tags: , , ,

Relevant Content

↑