Utilizing Universal Design Principles

Designing a website is the process of creating the “look and feel” – it’s about presentation. This includes determining page layout, color scheme, typography, and content features. Designing an accessible website is the same process, except these decisions are made while also considering how people with disabilities use the web.

Designing with Accessibility in Mind

Many disabilities require certain adaptations in the design of web content. It’s often the case that these adaptations benefit nearly everyone (not just people with disabilities), so they are often considered best practices for design, in general.

The most important aspect of accessible design is to begin your work with accessibility in mind. It’s certainly possible to change an existing design to account for users with disabilities, but it’s much easier to consider accessibility issues from the outset. To do this, it helps to understand:

Common Web Design Considerations

Plan a Well-organized, Logical Page Structure Early

Ensure all content and design fits into a logical heading structure. If you’re unsure, think of how your content would look in an outline format.

Standardize Presentation and Navigation

Place logos, menus, and other features consistently and predictably.

Consider Reading Order

The reading order should be the same as the visual order.

Provide Good Contrast

Be especially careful with light shades of gray, orange, and yellow. Avoid backgrounds that obscure text. Check your contrast levels with a color contrast checker (available with many web accessibility browser extensions, like the WebAIM: Color Contrast Checker).

Use True Text Whenever Possible

Only use graphical text (i.e., an image of text content) when absolutely necessary. True text enlarges better, loads faster, and is easier to translate. Developers can use CSS to add a lot of different styles, so relying on graphics may not be as necessary as you think.

Watch the Use of CAPS

All caps can be difficult to read and can be read incorrectly by screen readers.

Use Legible Font Families

Use standard serif and sans-serif font families. Specialty, stylized fonts (e.g., script fonts) can be difficult to read, especially for low-vision users.

Use Adequate Font Size

Font size can vary based on the font chosen, but 10 point is usually a minimum. Developers will define font size relatively, so keep in mind that a user may decide to increase the size of text on the website.

Consider Line Length and Line Height

Don't make lines too long or too short, because it can make text more difficult to read. Most studies show that people prefer relatively narrow columns of text, rather than wide columns that stretch across the whole page. The amount of space between lines (i.e., line height) should generally be no less than half the character height.

Make Sure Links are Recognizable

Use consistent link styles that are easily identified from other text. Differentiate links in the body of the page with underlines or something other than color alone.

Design Link Focus Indicators

Ensure keyboard users can visually identify a focused link. Use the standard dotted line or other non-color designators.

Ensure Link Text Makes Sense

Avoid "Click Here" in link text. Other ambiguous links, such as "More" or "Continue", can also be confusing. Strive for links that make sense when read out of context. If you’re unsure, create a separate list of your links, and see if you can still understand what they’re linking to.

Provide a "Skip to Main Content" Link

A link should be at the top of the page that will allow keyboard users to skip content that’s repeated across web pages (e.g., the site name/logo and primary navigation links). It can be hidden but should be visible when it receives keyboard focus.

Use Animation, Video, and Audio Carefully

If used, provide a play/pause button. Avoid content that bounces, spins, twists, or just moves without being vital to or illustrative of your content. Avoid flashing/blinking content, in particular, as it can cause seizures.

Design Accessible Form Controls

Ensure form controls have descriptive labels and instructions. Make sure validation errors are written clearly and are helpful.

Learn More

★

Did you know?