Home  /  Blog  /  Accessibility
Accessibility

UX & Visual Accessibility: 9 golden principles to master (Infographic)

November 26, 2017Accessibility1 min read
Table of contents
  1. Key takeaways
  2. The 9 golden principles
  3. Why it is not optional

Accessibility is mandatory in many countries and mostly ignored. Here are the 9 visual accessibility principles that make a site usable for everyone, and legal.

Quick answer

Visual accessibility (part of a11y) is about making interfaces usable for people with visual, motor, neurological and other impairments. The nine golden principles are: use plain text, keep a logical layout, allow keyboard navigation, design for screen readers, use accessible contrast and font size, use proper case, do not rely on color alone, use descriptive actionable elements, and allow zoom. WCAG requires a contrast ratio of at least 4.5:1 for AA and 7:1 for AAA.

Key takeaways

  • a11y is short for accessibility (A + 11 letters + Y).
  • Screen readers are central: content in images or PDFs is invisible to them, so use plain text.
  • Contrast matters: WCAG AA needs 4.5:1, AAA needs 7:1, and never rely on color alone.
  • Descriptive links and buttons beat 'click here' for both accessibility and conversion.
  • Accessibility is a legal obligation and a business tool: US lawsuits topped 11,000 in 2019.

The 9 golden principles

PrincipleWhat it meansPriority
1. Always use plain textKeep information in real text and HTML, not baked into images or downloadable files, so screen readers can read it. Critical
2. Use a logical layoutRespect content hierarchy and heading order (do not jump H1 to H4). Keep related elements close. Critical
3. Provide keyboard navigationThe whole site must be usable with a keyboard alone, never the mouse only. Critical
4. Design for screen readersUse alt text, link titles, semantic HTML5 and ARIA roles for menus, buttons and widgets. Critical
5. Accessible contrast and font sizeMeet WCAG contrast (AA 4.5:1, AAA 7:1) and readable sizes. Color is not enough; size matters too. Often ignored
6. Use proper caseAvoid all-caps, underlines and capitalized italics; they slow reading, especially for dyslexia. Common
7. Do not rely on color aloneColor blindness and culture change meaning. Pair color with text or an unambiguous icon. Critical
8. Use descriptive actionable elementsLinks and buttons must say what they do. Avoid vague ‘click here’; it also lifts conversion. UX + a11y
9. Allow users to zoomNever block zoom; enlarged content must keep its linear structure. Common offense on mobile. Common

Why it is not optional

Accessibility is not extra work or UX debt; it is a tool for richer, more human experiences and more engagement, and it protects you legally. Lawsuits for non-compliance grow every year.

US accessibility lawsuits
11,000+
in 2019, up 8.8% year over year
+8.8%
WCAG AA contrast
4.5:1
minimum for normal text
WCAG AAA contrast
7:1
stricter standard
Fines in Canada
up to $15k
plus the cost of rebuilding
What is visual accessibility?

Making interfaces usable for people with visual and related impairments, through plain text, logical structure, keyboard support, contrast, and not relying on color alone.

What does a11y mean?

It is shorthand for accessibility: the letter A, then 11 (the number of letters in between), then Y.

What contrast ratio does WCAG require?

At least 4.5:1 for AA compliance and 7:1 for AAA, for normal text. Large text has a lower threshold.

Why should you not rely on color alone?

Color blindness and cultural differences change how color is perceived, so meaning conveyed only by color can be missed. Always add text or a clear icon.

Is web accessibility a legal requirement?

In many countries yes. US accessibility lawsuits topped 11,000 in 2019, and Europe can block non-compliant sites until they meet WCAG AA.

Want a product that is accessible and audit-ready by default? Talk to Dorve.

Start a project

Want a team that knows the theory?

We research, design and build with people who can tell when an answer is wrong. Tell us what you are working on.

Start a project