Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 7 Next »

Design Principles

View these principles as a printable Checklist

Getting started

Digital accessibility doesn’t have to be complicated! There are quick steps you can take to make content more accessible right away.

Remember:

  • It’s not possible to make universally accessible content.

  • Imperfection is OK.

  • By sticking to some basics, your content will be easier to adjust to make it accessible to anyone.

7 Principles of Accessibility, and How to Do It

These principles are modified from the a11y project checklist, and align with WCAG 2.1 AA standards.

Headings

Basic Principle

Headings ensure your content is arranged in a logical order. By properly formatting headings, people can use their screen reader to get an overall sense of the page content, and can skip to relevant passages as needed. Without headings, the only option is to read the page in a single block.

More Information about Headings

Questions to Ask

  • Does my page have headings?
  • Is there only one h1 per page?
  • Can I easily scan the text of my heading levels?
  • Do the heading levels skip unexpectedly?


Alternative Text

Basic Principle

Images are by default only perceptible through vision. By providing a text alternative to an image, users can experience the image in an accessible way. Typically the text is spoken via a screen reader, but it could also be converted to refreshable Braille, large text, or translated to a different language.

More Information about Alternative Text

Questions to Ask

  • Do all my images have alternative text?
  • Are decorative images marked as decorative, using alt=""?
  • Have I avoided using phrases like Image of or Photo of in my alt text?
  • If the image contains text, does the alt description include that text?
  • If the image is complex (charts, graphs, maps), is there a complete text alternative?

Basic Principle

Questions to Ask

Examples

Deep Dive


Color Contrast

Basic Principle

Questions to Ask

Examples

Deep Dive

Lists

Basic Principle

Questions to Ask

Examples

Deep Dive

Tables

Basic Principle

Questions to Ask

Examples

Deep Dive

Video & Audio

Basic Principle

Questions to Ask

Examples

Deep Dive

Visual language

Color

(tick) DO:

(error) DON'T:

Typography

(tick) DO:

(error) DON'T:

Sizing & spacing

(tick) DO:

(error) DON'T:

Icons & illustrations

(tick) DO:

(error) DON'T:

✏ Writing

Cheat sheet

Word

Rule

Style, spelling, grammar

House rules

Capitalization

(tick) DO:

(error) DON'T:

Punctuation

(tick) DO:

(error) DON'T:

Formatting

(tick) DO:

(error) DON'T:

Abbreviation & acronyms

(tick) DO:

(error) DON'T:

Numbers & percentages

(tick) DO:

(error) DON'T:

Dates and times

(tick) DO:

(error) DON'T:

Lexicon

Word

Rule

👩‍💻 Build

Best practices

Accessibility

(tick) DO:

(error) DON'T:

Browser support

Browser

Version

Priority

Actions

<Element name (e.g., Button)>

 

Name

Required

Type

Allowed value

Default values

Description

YES / NO

e.g., Changes the visual styling of the Button

<Element name (e.g., Link)>

 

Name

Required

Type

Allowed value

Default values

Description

YES / NO

Forms

 

Name

Required

Type

Allowed value

Default values

Description

YES / NO

Feedback

 

Name

Required

Type

Allowed value

Default values

Description

YES / NO

Navigation

 

Name

Required

Type

Allowed value

Default values

Description

YES / NO

Accessibility

 

Name

Required

Type

Allowed value

Default values

Description

YES / NO

  • No labels