Design Principles

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. These principles can be adapted to create accessibility criteria for other projects as needed. For standards specific to document types, see the linked resources. For more information about each princple, see the Deep Dives.

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?

Links

Basic Principle

URLs are a fundamental part of connection on the internet, but in many cases link destinations can be ambiguous and hard to navigate. Clearly labeling links ensures all users can anticipate the outcome of using a link. In addition, properly constructed links will ensure screen readers announce the destination, rather than reading aloud a potentially incomprehensible URL.

More Information about Links

Questions to Ask

• Are any of the link texts the same?
• Are my links descriptive?

Color Contrast

Basic Principle

Contrast refers to the visual difference between two colors when they are place side by side. This can be conveyed as a ratio. Maintaining appropriate contrast ensures readability with low vision, color blindness, migraines, and other visual processing concerns. In addition, it is important to use more than color to convey an idea.

Questions to Ask

• Can users understand the entire content without needing to see a particular color?
• Check the contrast for all content:
• Text
• Icons
• Borders
• Text within images or video

Lists

Basic Principle

Questions to Ask

• Am I using the built-in list-maker to format my list?

Tables

Basic Principle

Questions to Ask

• Am I only using a table to display a data set?

Video & Audio

Basic Principle

Questions to Ask

• Make sure media does not autoplay
• Make sure all media can be paused
• Confirm any videos have captions
• Confirm any audio media has transcripts