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:
- How people with disabilities use the web
- Texas A&M’s web accessibility standards
- Common design considerations for an accessible website (listed next)
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 Accessibility Evaluation Toolbar or online with 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.
Did you know?
- In the United States, about 55 million people have a disability (src: 2010 U.S. Census).
- About 1 in 5 Americans have some kind of disability (src: 2010 U.S. Census).
- The percentage of people affected by disabilities is growing as our population ages.
- Two popular, free screen readers are VoiceOver (Mac OS and iOS) and NVDA (Win).
- Good accessibility practices can improve the search ranking of your website.
- Form fields without labels can cause problems for some assistive technology users.
- Low color contrast makes content difficult to see, especially for users with low vision.
- Documents linked on a website need to be accessible too (e.g., PDF and Word files).
- Audio content, like podcasts, need transcripts for deaf or hard of hearing users.
- Online videos should be captioned for deaf or hard of hearing users.
- Using HTML tags correctly is very important for accessibility.
- Descriptive link text helps make a website more accessible. Avoid using "Click here" or "Read more."
- A "screen reader" is an application that reads content aloud to a user.
- There is no "alt tag" in HTML. "Alt" is an attribute used with the img tag.
- HTML uses the alt attribute to provide a text description of an image.
- Alt text should describe an image, if the purpose of the image is to convey information.
- If an image is a link, the alt text for the image should explain where the link goes.
- If an image is only being used for decoration, the alt text should be null (i.e., alt="").
- If a table has headers, using header tags (<th>) will make the table more accessible.
- An accessible website is one that can be navigated and understood by everyone.