Principles of Accessible Design

Web Accessibility for Designers Infographic

Web Accessibility for Designers

Great web accessibility starts in the design.

Structuring your design

Plan Heading Structure Early

Ensure all content and design fits into a logical heading structure.

Consider Reading Order

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

Styling your text

Provide Good Contrast

Be especially careful with light shades of gray, orange, and yellow. Check your contrast levels with our color contrast checker.

Use True Text Whenever Possible

True text enlarges better, loads faster, and is easier to translate. Use CSS to add visual style.

Watch the Use of Caps

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

Use Adequate Font Size

Font size can vary based on the font chosen, but 10 point is usually a minimum.

Remember Line Length

Don’t make it too long or too short.

Designing with color

Use Animation, Video, and Audio Carefully

If used, provide a play/pause button. Avoid flashing or strobing content: It can cause seizures.

Don’t Rely on Color Alone

Because users often can’t distinguish or may override page colors, color cannot be the only way information is conveyed.

Design Accessible Form Controls

Ensure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms.

Facebooktwittergoogle_plusredditmailFacebooktwittergoogle_plusredditmailby feather