Accessibility | Web Development
- Plan Heading Structure Early
- Consider Reading Order
- Provide Good Contrast
- Use True Text Whenever Possible
- Watch the use of CAPS
- Use Adequate Font Size
- Remember Line Length
- Make Sure Links are Recognizable
- Design Link Focus Indicators
- Design a “Skip to Main Content” Link
- Use Animation, Video, and Audio Carefully
- Don’t Rely on Color Alone
- Design Accessible Form Controls
The task of creating content that is accessible to students with disabilities is not a difficult one, but it cannot happen automatically, without thought or design. You must be aware of the issues, know the techniques, and then employ those techniques. In order for this to happen consistently over time, colleges must adopt both a policy and a system that supports Web accessibility.
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.
Provide Good Contrast
Be especially careful with light shades of gray, orange, and yellow. Check your contrast levels with WebAIM’s color contrast checker.
Use True Text Whenever Possible
True text enlarges better, loads faster, and is easier to translate. Use CSS to style text versus images.
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. Use line height and letter spacing to enhance the legibility of the content.
Remember Line Length
Don’t make it too long (more than 80 characters) or too short (less than 50 characters). The optimal line length for body text is 50-75 characters per line.
Make Sure Links are Recognizable
Differentiate hyperlinks in the body of the page with underlines or something other than color alone. Avoid “Click Here” in link text. Other ambiguous links, such as “More” or “Continue”, can also be confusing.
Design Link Focus Indicators
Ensure keyboard users can visually identify a focused link. Use the standard dotted line or other non-color designators.
Design a “Skip to Main Content” Link
A link for keyboard users to skip navigation should be at the top of the page. 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 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.