Digital accessibility means designing content so people with disabilities can understand, navigate, interact with, and contribute to digital information and experiences.
Accessibility is most effective when it is considered from the beginning, rather than something that is checked or fixed after content has already been created. Many accessibility practices are simple choices such as using headings correctly, adding alternative text to images, choosing meaningful link text, or captioning a video, but together they can make a significant difference in whether someone can independently access and use information.
Accessible design is particularly important for people who use assistive technologies such as screen readers, keyboard navigation, voice control, magnification, captions, or other accessibility tools.
Why Design for Accessibility?
When accessibility is built into the design process, we can:
- Reduce barriers before someone encounters them.
- Help people access information independently.
- Make content easier to navigate and understand.
- Improve compatibility with assistive technology.
- Reduce the need to remediate inaccessible content later.
- Create more consistent and usable digital experiences.
- Help ensure district digital content meets accessibility requirements.
The following CSD Core Elements of Accessible Digital Content highlight essential accessibility principles and best practices to help you create digital content that is accessible, understandable, and usable by everyone.
CSD Core Elements of Accessible Digital Content
Headings & Structure
Organize content so people can easily understand and navigate it. Structure should communicate meaning, not just appearance.
- Use built-in heading styles rather than simply making text larger or bold.
- Organize headings in a logical hierarchy (Heading 1, Heading 2, Heading 3).
- Use headings to describe sections of content.
- Use built-in bulleted and numbered list tools.
- Break long content into meaningful sections.
- Maintain a logical reading order.
- Use meaningful titles for pages, documents, slides, and sections.
- Avoid using blank spaces, repeated returns, tabs, or text boxes to create visual structure.
Images & Alternative Text
Make visual information understandable to people who cannot see it. It the image disappeared, would the user still receive the important information?
- Add alternative text (alt text) to meaningful images.
- Keep alt text concise while providing enough context to understand the image’s purpose.
- Mark decorative images as decorative when the platform supports it.
- Do not begin alt text with unnecessary phrases such as “image of” or “picture of.”
- Provide equivalent information for charts, graphs, diagrams, maps, infographics, and other complex visuals.
- Do not rely on images of text when actual text can be used.
Readable & Understandable Content
Accessible information should not only be technically available, it should also be understandable. Make information clear, predictable, and easy to understand.
- Use plain, direct language appropriate for the intended audience.
- Keep sentences and paragraphs reasonably concise.
- Use familiar words when possible and explain unfamiliar terms, acronyms, and abbreviations.
- Use descriptive headings and lists to make information easier to scan.
- Use readable font sizes and typefaces.
- Avoid excessive capitalization, italics, underlining, or decorative formatting.
- Use adequate spacing between lines, paragraphs, and sections.
- Keep instructions clear and specific.
- Maintain consistent terminology throughout content.
- Identify the language of a document or webpage when the technology supports it.
- Avoid unnecessarily complex directions or language.
Links & Navigation
Help users understand why they are going and move through content predictably. A user should know where a link will take them before they activate it.
- Use descriptive link text that identifies the link’s purpose or destination.
- Avoid vague link text such as “click here,” “here,” or “read more” when it lacks context.
- Avoid displaying long URLs as link text when descriptive text can be used.
- Make links visually distinguishable from surrounding text.
- Make sure links work and lead to the intended destination.
- Provide consistent and predictable navigation.
- Ensure users can navigate interactive content with a keyboard.
- Use a logical tab and focus order.
- Avoid requiring users to use a mouse for essential actions.
- Clearly identify links to files or unusual destinations when helpful.
Tables
Use tables for data, not for visual layout. A user should be able to understand the relationships in the table even when it is read linearly.
- Use tables only when information has a meaningful relationship between rows and columns.
- Identify column and/or row headers.
- Keep table structures as simple as possible.
- Avoid merged or split cells when possible.
- Avoid blank rows and columns used only for spacing.
- Include a table caption or nearby description when context is needed.
- Ensure tables have a logical reading order.
- Do not use tables simply to position text, images, or other content on a page.
- Consider whether complex tables could be simplified or presented another way.
Animations & Visual Effects
Avoid visual or motion effects that create barriers or physical discomfort. Movement should support the content, not interfere with a user’s ability to access it.
- Avoid flashing or rapidly blinking content.
- Do not use content that flashes more than three times per second.
- Avoid unnecessary animation and movement.
- Allow users to pause, stop, or hide moving or automatically updating content when required.
- Avoid auto-advancing content that users cannot control.
- Respect reduced-motion preferences when supported.
- Do not make essential information dependent on animation or movement.
- Avoid transitions and effects that interfere with readability or concentration.
- Ensure carousels, sliders, pop-ups, and similar interactive elements can be controlled by the user.
- Consider whether an animation actually supports understanding before including it.
Color & Contrast
Make information easy to perceive regardless of vision or color perception. Color can reinforce meaning, but it should not be required to understand meaning.
- Maintain sufficient contrast between text and its background.
- Aim for WCAG AA contrast requirements: 4.5:1 for normal text and 3:1 for large text.
- Ensure meaningful icons, controls, and graphical elements have sufficient contrast.
- Do not use color alone to communicate meaning.
- Pair color with text, labels, patterns, icons, or other indicators.
- Avoid difficult-to-read combinations and text placed over busy images.
- Check contrast rather than relying on visual judgment alone.
- Consider how content will appear to users with different types of color vision deficiency.
Audio & Video
Information presented through sound or video should have an equivalent way to access the meaning. Provide alternatives so multimedia information can be accessed in different ways.
- Provide accurate captions for prerecorded video containing speech.
- Review automatically generated captions and correct significant errors.
- Include speaker identification and meaningful sound information when needed for understanding.
- Provide transcripts for audio-only content.
- Provide audio description or an equivalent way to access important visual information that is not communicated through the audio.
- Use accessible media players that support keyboard navigation and captions.
- Do not automatically play audio when possible.
- Provide users with controls to play, pause, stop, and adjust media.
- Make sure embedded multimedia does not create a barrier to accessing surrounding content.
