The 10 Accessibility Heuristics

Share article
The 10 Accessibility Heuristics

Creating accessible websites is not just about making sure things look pretty for everyone—it’s about making sure everyone can interact with your site, no matter their ability or device. And that's where the 10 Accessibility Heuristics come in. Think of them as guiding principles that can help you create a site that works for everyone. Ready to dive in? Let’s break it down.

Vilt þú hönnun sem
nær árangri?

Hafa samband

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

a black and white cut-out image of a typewriter on a yellow and black checkered pattern

1. Interaction Methods and Modalities

Accessibility isn’t just about colors and fonts; it’s about how people interact with your website. Can users navigate using a mouse? A keyboard? Or a touch screen? Let’s make sure everyone can engage with your CTAs (call-to-action buttons).

Things to check:

  • Can users interact with buttons and links using both the keyboard and touch?
  • Is your tabbing order predictable? (Hint: If someone's jumping all over the page with their keyboard, you've got a problem)
  • Don't trap users with keyboard shortcuts or unchangeable focus states. Give them the ability to change their minds.
a black and white cut-out image of aarrow sign with light bulbs all over it on a green and black checkered pattern

2. Navigation and Wayfinding

Making your content easy to navigate is a must. After all, how would you feel if you got lost on a website with no map? Frustrating, right? You’ve got to make sure all the content on your page is clearly marked and easy to find.

Things to check:

  • Add a "skip to main content" link so users can bypass repetitive elements.
  • Ensure all links are meaningful—no generic “click here.” People need context!
  • Organize navigation elements clearly. Consider headings, breadcrumbs, and clear menu labels.
a black and white cut-out image of a View-Master toy on a blue and black checkered pattern

3. Contrast and Legibility

Readable text? Always. It’s not just about fonts; it’s about making sure everyone can easily read your content, regardless of vision abilities. High contrast is key for making sure no one’s squinting.

Things to check:

  • Use high contrast between text and background—especially for small text.
  • Avoid color-only cues—provide text-based indicators for important information.
a black and white cut-out image of a dinasour head with headphones on a pink and black checkered pattern

4. Visual and Auditory Alternatives

Everyone experiences your content differently. To make sure no one misses out, give them the tools to access all visual and auditory elements.

Things to check:

  • Provide alt text for images, especially for buttons or links, so they’re easily understood by screen readers.
  • Add captions to videos and transcripts for audio content.
  • For complex images or charts, offer detailed descriptions or a summary.
  • Ensure decorative images are marked properly so assistive technologies can ignore them.
a black and white cut-out image of a Game-Boy with Pokemon stickers on it on a steel-blue and black checkered pattern

5. Structure and Semantics

Ever tried reading a page where headings just don’t make sense? Not fun. A properly structured page helps everyone, especially screen reader users, navigate your content logically.

Things to check:

  • Use proper HTML heading tags. Don’t just style text to look like a heading—make it a heading!
  • Group related elements, like form fields, and label them clearly for all users.
  • Ensure that everything, from forms to tables, is semantically structured.
a black and white cut-out image of a tombstone with "R.I.P." written on it and a carving of a skull on a red and black checkered pattern

6. Error Prevention and States

Mistakes happen, right? But how do we help people correct them? If a user makes an error, don’t just highlight it with red—let them know what happened and how they can fix it.

Things to check:

  • Don’t rely on color alone to indicate errors. Add text descriptions too.
  • Ensure all form fields are labeled and error messages are clear and actionable.
a black and white cut-out image of an open mouth showing teeth biting down on the tongue on a yellow and black checkered pattern

7. Language and Readability

Your site should be easy to read and understand. But that’s not just about short sentences—it’s also about the language. Make sure your content is plain, concise, and free of jargon. 

Things to check:

  • Use plain language whenever possible.
  • Provide meaningful headings and labels.
  • Ensure your content adapts to different screen sizes without the need for horizontal scrolling (this one’s a must!).
a black and white cut-out image of a feminine hand with long nails and big ring hovering over a cut-out image of a crystal ball, on a blue and black checkered pattern

8. Predictability and Consistency

Users should know what to expect from your site. Predictability is about giving users the control to interact with elements as they expect, and consistency ensures they know where to find things across your site.

Things to check:

  • Are recurring elements (like navigation) consistently labeled?
  • Allow users to dismiss or control pop-ups and notifications.
  • Keep the experience predictable—don’t surprise your users unless it’s a pleasant one.
a black and white cut-out image of a dynamite bomb on a red and black checkered pattern

9. Timing and Preservation

Sometimes users need a little extra time to complete tasks. If something is time-sensitive, make sure users can pause, extend, or adjust time limits.

Things to check:

  • Allow users to disable auto-updated content or set their frequency.
  • Provide recovery options if their session times out.
a black and white cut-out image of a spaceship with a spotlight coming down on a green and black checkered pattern

10. Movement and Flashing

Ever experienced an interface that just wouldn’t stop flashing or moving? It’s exhausting! Make sure users can pause or stop any movement on your site. This is especially important for users with photosensitive conditions.

Things to check:

  • Avoid flashing elements that could trigger seizures (and keep flashing under 3 times per second if you must).
  • Allow users to pause or stop animations that go on too long.
A graphic overview of all the 10 Accessibility Heuristics. 10 different sections showing the number and name of each heuristic including a black and white cut-out image of a relatable image.
By following these accessibility heuristics, you’ll not only ensure that your site is easier to use for a wider audience but also create a better experience overall. Accessibility is about making your content available to everyone, and that’s a win for everyone.
Remember, when in doubt, ask yourself: Can this be perceived, operated, understood, and made robust enough for all users?
If the answer is yes, you’re on the right track!

Do you need an accessibility audit?

Contact us

Want to read more?