When authoring or developing digital content, employ the following standard practices to promote accessibility and usability for all users. For comprehensive guidance, adhere to the Web Content Accessibility Guidelines (WCAG).
Set the Default Language
Clear and Concise Content
- Write in plain language, avoiding jargon.
- Give each page a descriptive and unique page title.
Headings and Structure
Headings help users understand the information hierarchy to identify a page’s main points and topics quickly. Heading elements (<h1>-<h2>) allow screen reader users to navigate content more efficiently by jumping to different sections and accessing desired information quickly. Clear and descriptive headings also help with comprehension and reduce cognitive load by breaking the text into manageable sections, making scanning and locating specific information more accessible.
- Use HTML heading tags (<h1>to <h6>)
- Use HTML list tags (<ul>, <ol>, and <dl>)
- Learn more about Semantic Structure: Regions, Headings, and Lists on WebAIM.org.
Accessible Links
- Link text should make the destination of the link clear.
- Avoid phrases like “click here,” “learn more,” and “read more.”
- Underline links for quick identification.
- Do not underline non-link text.
- Explore WebAIM Links and Hypertext Guide
Color and Contrast
- Ensure the contrast ratio between text and background colors is at least 4.5:1 for normal text and 3:1 for large text (at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold).
- Avoid gold on white: Accessible Text & Color.
- Visit the Check Accessibility webpage for a list of contrast checkers.
- Do not use color as the only method to convey meaning.
- Include an additional descriptive component such as text, patterns, or shapes.
- W3C’s Color Alone Examples
- Learn more about Contrast and Color Accessibility (WebAIM).
Accessible Images
- Provide alternative (alt) text on non-text content that conveys meaning, such as images.
- Keep the alt text concise (about 125 characters).
- Hide images from screen readers that do have meaning or are for decoration.
- Use an empty alt value (alt=””)
- The W3C’s Web Accessibility Initiative states, “Whether to treat an image as decorative or informative is a judgment only the author can make, based on the reason for including the image on the page.”
- Avoid images with text when possible. If necessary, add alt text.
- Try out the alt Decision Tree
- Use the Alternative (Alt) Text Guide by The Ohio State University
Write effective alt text
- How to Write Alt Text and Image Descriptions for the visually impaired
- Making Images Accessible
- WebAIM’s Alternative Text Tutorial
- W3C’s Images Concepts Tutorial
- Use the Alternative (Alt) Text Guide by The Ohio State University
Accessible Tables
- Avoid using tables for layout.
- Structure tables using table headers (th) and table data (td) elements.
- Refer to the W3C WAI Tables concepts tutorial
Accessible Audio & Video
- Make video accessible through closed captioning.
- Make audio files accessible through transcripts.
- Create Accessible Audio and Video
Keyboard Accessibility
Make sure all content on the website is usable with the keyboard.
- Design for Keyboard Accessibility
- Keyboard Do’s and don’ts
- Keyboard Accessibility by WebAIM
- Media Player Controls Should Be Keyboard Accessible, Screen Reader Compatible
Check for Accessibility
It is important to check the accessibility of digital content as you design, develop, or create it. The Check for Accessibility page has a list of commonly used checkers, guides, and checklists.
Additional Resources
- WebAIM’s Introduction to ARIA: Accessible Rich Internet Applications article is a good place to start for developers learning ARIA.
- Explore the ARIA Authoring Practices (APG), which includes patterns that help you develop accessible elements in accordance with standards.
- For accessibility guidance on common user-interface needs, use the U.S. Web Design System (USWDS) components webpage.