Digital Accessibility Tips
Use color wisely
- Do not use color alone to convey information
- Check that contrast between text or UI elements and background meet WCAG 2.1 AA contrast standards
Create a structure with headings and proper markup
- Pages that are well structured, follow proper syntax, and pass the W3C validator are most accessible
- Heading tags (<H1> – <H6>) can make the site more navigable to users of assistive technology like screen readers
- Use skip links to allow users to go directly to desired content or to skip over navigation elements that are common to each page. Skip links benefit screen reader users and other users who do not use a mouse
Images and Alt Text
Visual elements presented in the form of graphics, charts, or video may not be accessible to blind users, low-vision users, or users with cognitive impairment. Description of key visual elements (i.e., elements that are only presented visually) in the form of alternative text, long description, transcripts, or audio description, makes these elements more accessible to users. When describing for educational purposes, the key visual elements are typically those that convey an essential learning goal.
- Alt text should be included for all images on a web page
- Structural or decorative images (spacers, backgrounds) can contain empty or “null” text, i.e. alt=””
Resources for Accessible Images
WebAIM’s Creating Accessible Images
Description and Captioned Media Program (DCMP)
Provide captions for video and transcripts for audio
- Auto captions are not sufficient. Captions must be accurate and synchronized with the video.
- Make sure any podcasts or audio-only files include a transcript of the audio
Use Descriptive language
- Use descriptive titles, headers, and link text to provide added Context. Avoid using the terms Click Here, See More, or Learn More
- Do not rely solely on references to shape, size, or position to describe content
Avoid using tables for layout
- Use stylesheets and div tags for visual layout
- Use basic header information for data tables (the <th></th> element)
- Use linearized data tables for complex data
Create accessible forms
- Ensure forms are logical and easy to use, are keyboard accessible, and also associate form labels with controls
- Reference WebAim’s Creating Accessible Forms to ensure forms are accessible
Digital Accessibility Tools
MIT-related accessibility materials
- Quick Tips for Online Content Accessibility
- MITx Instructional Support for videos, including information about accessibility
External accessibility resources
- Teach Access: an industry consortium trying to promote usability in technology products
- Teach Access Tutorial: an excellent overall tutorial on the basic concepts of accessibility
- UX Foundations: Accessiblity by Derek Featherstone (and LinkedIn Learning)
- Three dimensions of Inclusive Design by Jutta Treviranus
Evaluation Tools
- WAVE Toolbar from WebAIM
- ANDI from the United States Social Security Administration