Most people are creating content on some level through documents, presentations, videos, designs, emails, websites, and data. There are several ways you can make sure content remains accessible by following the principles on this page.
These are essential practices for creating accessible digital content.
- Titles & Headings
- Alternative Text
- Readability & Legibility
- Color Contrast
- Navigation Order
- Descriptive Hyperlinks
- Multimedia Content
Skip to External Resources for guides on how to create accessible digital content.
Best Practices
1. Titles & Headings
The Document Title should be added to all documents and written using plain language (no acronyms), so it is read instead of the file name.
A title is different from the file name that usually includes underscores or hyphen followed by its type (.docx, .pptx, .pdf, etc.). It has its own <title> tag.
Proper heading tags is important for both visual cues and screen readers. These typically come in the form of tags (H1, H2, etc.) or styles (Heading 1, Heading 2, etc.).
- Use a single
H1tag (Heading Level 1) per page. - Maintain heading hierarchy from
H1toH6. - Avoid skipping heading levels for sizing.
- Customize headings to the size, font, or desired.
2. Alternative Text
Add descriptive text to important images or icons for screen reader accessibility. Mark decorative elements as such so screen readers know to ignore it. Avoid writing long alt text that do not convey the core message of an image-based element.
Screen readers already announce to a user an image’s type, so leave out “Image of” or “Chart of” in alt text. However, including “Screenshot of” is acceptable because screen reader do not announce them. Learn more about alt text in the Images module of Self-Paced Learning.
3. Readability & Legibility
Headings, subheadings, body text, etc. need to be hierarchically positioned for users to logically digest information. Excellent information hierarchy allows screen readers to properly announce items as visually intended and intuitive navigation.
Choosing font that is legible at 12pt for people with low vision and assistive technologies provides a better reading experience.
Fonts should be legible at most distances, so opting for sans-serif type for body text is ideal. Headings can be of a different font type but should still remain legible.
Text needs to be large enough to read at a close distance. Usually 12pt for documents like Microsoft Word and Google Docs is sufficient.
Line height and letter spacing must not be too close together. They should be comfortable enough to read without straining eyesight.
4. Color Contrast
Ensure text is distinct from background color for adequate visibility. Aim for baseline contrast ratio of 4.50:1 while also considering color blindness.
Use dark colors on light-colored backgrounds or vice versa. Some color combinations should be avoided for color blindness like red and green.
Avoid relying on color to convey meaning to prevent visually impaired users who struggle to perceive colors from understanding the content. Add labels or icons to assist a color’s meaning. Learn more about color blindness through Colour Blind Awareness. or deepen understanding in Colors module of Self-Paced Learning.
5. Navigation Order
Files with proper alternative text, correct heading semantics, and logical reading order help screen readers announce information to users as intended and makes it easier for users to keyboard tab through a file.
Be mindful of the order elements are added in presentation or design files as elements can be read out of sequence by screen readers and cause navigation difficulties with keyboard users.
6. Descriptive Hyperlinks
Display and alt text should describe a link’s purpose and destination to provide clarity for everyone on its inclusion within a file. Links ideally have their own distinct color from other text with an underline.
A screen reader may give its user a list of all links within a file, so its important text is utilized to convey meaning. Key words are very helpful in identifying a link’s destination as well as its purpose. An example of a descriptive hyperlink is IT Accessibility at UConn.
7. Multimedia Content
Any video content in a file needs to include captions or subtitles and a transcript. Audio descriptions for videos should be used when on-screen actions contribute to meaningful understanding of the content. Captions must be accurate and synchronized appropriately. For audio-only content, a transcript is sufficient.
Including these various formats in multimedia allows a much wider audience to consume the content, particularly users who have auditory conditions or prefer reading information. Learn more about multimedia accessibility in the Video and Audio module of Self-Paced Learning.