Design Principles
| Tip |
|---|
View the 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
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.
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
Examples
Deep Dive
Color Contrast
Basic Principle
Examples
Deep Dive
Lists
Basic Principle
Examples
Deep Dive
Tables
Basic Principle
Examples
Deep Dive
Video & Audio
Basic Principle
Examples
Deep Dive
Principle one | Principle two | Principle three |
|---|---|---|
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 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||