Design Principles
| Tip |
|---|
View the 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.
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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
h1per page? - Can I easily scan the text of my heading levels?
- Do the heading levels skip unexpectedly?
| Note |
|---|
Content below this point is still in development. |
Alternative Text
Basic Principle
Examples
Deep Dive
Links
Basic Principle
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?
Links
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
Principle one
Principle two
Visual language
Color
DO:
DON'T:
Typography
DO:
DON'T:
Sizing & spacing
DO:
DON'T:
Icons & illustrations
DO:
DON'T:
✏ Writing
Cheat sheet
Word | Rule |
|---|---|
Style, spelling, grammar
House rules
Capitalization
DO:
DON'T:
Punctuation
DO:
DON'T:
Formatting
DO:
DON'T:
Abbreviation & acronyms
DO:
DON'T:
Numbers & percentages
DO:
DON'T:
Dates and times
DO:
DON'T:
Lexicon
Word | Rule |
|---|---|
👩💻 Build
Best practices
Accessibility
DO:
DON'T:
Browser support
Browser | Version | Priority |
|---|---|---|
Actions
<Element name (e.g., Button)>
| Code Block |
|---|
Name | Required | Type | Allowed value | Default values | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| e.g., Changes the visual styling of the Button | ||||||||||||||||
<Element name (e.g., Link)>
| Code Block |
|---|
Name | Required | Type | Allowed value | Default values | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
Forms
| Code Block |
|---|
Name | Required | Type | Allowed value | Default values | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
Feedback
| Code Block |
|---|
Name | Required | Type | Allowed value | Default values | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
Navigation
| Code Block |
|---|
Name | Required | Type | Allowed value | Default values | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
Accessibility
| Code Block |
|---|
Name | Required | Type | Allowed value | Default values | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||