Creating Accessible Digital Content
General strategies
What Is alt text?
Alternative text (alt text) is a brief description of an image that conveys its essential content and function. It is read by screen readers for users who cannot see the image and is displayed when an image fails to load.
Why is alt text important?
Importance | Description |
---|---|
Improves accessibility | Helps users who are blind or visually impaired understand image content. |
Supports users with slow connections | Provides context when images do not load. |
Enhances usability | Users can understand images even when they cannot view them. |
Aids comprehension | Offers context to all users in text-only browsing situations. |
How to write effective alt text
Basic guidelines
- Use specific, meaningful descriptions that convey the image’s purpose.
- Be concise.
- Avoid redundant phrases like “image of” or “picture of.”
- Provide context when necessary, especially for complex visuals.
- For decorative images, use empty alt attributes (alt="") or include “Decorative.” as the alt text.
Deeper dive
Question | Answer |
---|---|
How do I write alt text for charts and graphs? | Summarize key takeaways in the alt text. Provide a full data description in surrounding text or a linked data table. Example: "Bar chart showing monthly absences: January total 30, February total 25, March total 28." |
Should decorative images have alt text? | If an image is purely decorative, use alt="" so screen readers skip it. |
How do I write alt text for images with embedded text? | If an image contains critical text, include it in the alt text. If the text is lengthy, summarize and provide a full version elsewhere. Example: "Event flyer for the Accessibility Summit, June 15, with keynote by John Doe." |
How should I handle alt text for logos? | Use the company or organization name. Example: "Google logo," not "Blue and red letters spelling Google." |
What about complex images like infographics? | Provide a short summary in the alt text. Include a full description in surrounding text or as a linked document. Example: "Infographic summarizing accessibility best practices. Full description in the text below." |
Related WCAG standards
1.1.1 Non-text Content (A): All non-text content that is presented to users must have a text alternative that serves the equivalent purpose.
What Is color contrast?
Color contrast refers to the difference in luminance between text (or graphical elements) and its background. Proper contrast ensures that content is readable and perceivable by all users, including those with visual impairments.
Why Is color contrast important?
Importance | Description |
---|---|
Improves accessibility | Ensures content is readable for users with low vision or color blindness. |
Enhances usability | High contrast improves visibility in different lighting conditions |
Supports compliance | Meets accessibility standards to prevent barriers for users. |
Aids comprehension | Clear contrast makes information easier to process. |
How to ensure proper color contrast
Basic Guidelines
- Use a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (WCAG AA).
- Ensure icons and graphical elements meet a minimum 3:1 contrast ratio against their background.
- Avoid using color as the sole means of conveying information (e.g., errors should include both color and text).
- Check contrast across different devices to ensure consistency.
- Use accessible color palettes that provide adequate contrast.
Examples
Avoid | Use Instead |
---|---|
Light gray text on a white background | Dark gray text on a white background (4.5:1 ratio) |
Red error text without additional indicators | Red error text with an icon and text label |
Yellow text on a white background | Black or dark text on a yellow background |
Deeper dive
Question | Answer |
---|---|
How do I check contrast ratios? | Use tools like the WebAIM Contrast Checker or browser extensions. |
What about logos? | Logos are exempt from WCAG contrast requirements but should still aim for readability. |
How can I ensure hyperlink contrast? | Ensure hyperlinks are distinguishable from surrounding text by using both color and an underline. |
Can I use transparency in backgrounds? | Avoid using overly transparent backgrounds that reduce contrast readability. |
What if my brand/template colors don’t meet contrast requirements? | Adjust shade intensity or provide an alternative design for accessibility. |
Related WCAG standards
- 1.4.3 Contrast (Minimum) (AA): Text contrast must be at least 4.5:1 (normal) or 3:1 (large).
- 1.4.11 Non-text Contrast (AA): UI elements must have at least a 3:1 contrast ratio.
What are headings?
Headings provide a hierarchical structure to content, making it easier for all users to navigate and understand information. Properly formatted headings create a logical outline of a document or webpage.
Why are headings important?
Importance | Description |
---|---|
Improves accessibility | Screen readers allow users to navigate by headings, aiding those who rely on assistive technology. |
Enhances usability | Clearly defined sections help all users quickly locate relevant content. |
Aids comprehension | Logical organization enhances readability and clarity. |
How to use headings effectively
Basic guidelines
- Use H1 for the main title, followed by H2, H3, etc., in a hierarchical order.
- Do not skip heading levels (e.g., do not jump from H1 to H3).
- Keep headings concise and descriptive.
- Avoid using headings solely for visual emphasis: Use proper styles instead.
- Ensure headings make sense out of context for screen reader users.
Examples
Avoid | Use Instead |
---|---|
Large bold text for a section title | Properly styled H2 or H3 heading |
Skipping heading levels (H1 → H3) | Maintaining a logical sequence (H1 → H2 → H3) |
Using vague headings ("More Info") | Using clear, descriptive headings ("Accessibility Guidelines") |
Deeper dive
Question | Answer |
---|---|
How many H1s should a document or webpage have? | Each document or page should have only one H1, typically for the main title. |
Can I use bold text instead of headings? | No, bold text does not provide the structural benefits of proper headings. Use true heading styles. |
What if a section does not need a heading? | Use paragraph text instead. Do not insert empty headings for spacing. |
How do I test if my headings are correctly structured? | Use a screen reader or an accessibility tool to navigate by headings. |
Should headings be used in tables? | Only if the table needs sectioning; otherwise, use table headers instead. |
Related WCAG standards
- 1.3.1 Info and Relationships (A): Content must be structured so that relationships are conveyed programmatically.
- 2.4.6 Headings and Labels (AA): Headings must describe the topic or purpose.
What are descriptive links?
Descriptive links use meaningful, concise text that clearly indicates the purpose or destination of the link. Instead of generic phrases like "click here" or "read more," descriptive links provide context, helping all users understand where the link leads.
Why are descriptive links important?
Importance | Description |
---|---|
Improves accessibility | Screen reader tools often allow users to navigate by links alone. Generic links like "click here" provide no useful information. |
Enhances usability | Clear link text benefits all users, making it easier to scan and understand content. |
Aids comprehension | Users can quickly decide whether to follow a link without reading surrounding text. |
How to write descriptive links
Basic Guidelines
- Use specific, meaningful text that describes the link’s destination.
- Avoid vague phrases like "click here," "more info," or "read this."
- Keep link text concise while still conveying enough context.
- Include keywords relevant to the content of the destination page.
- Ensure links make sense out of context (for users who navigate by links alone).
- If linking a URL, use a shortened version or descriptive text instead of raw URLs.
Examples
Avoid | Use Instead |
---|---|
Click here | Learn more about accessible links |
Read more | Read our guide on descriptive links |
http://www.dpi.nc.gov/about-dpi/ | Visit the NCDPI Digital Accessibility website |
Deeper dive
Question | Answer |
---|---|
How do I write a descriptive link when linking to a file download? |
|
What should I do if my content includes multiple links to the same destination? |
|
How should links be handled in navigation menus? |
|
What about links in call-to-action buttons? |
|
How do I ensure links within documents are accessible? |
|
Related WCAG standards
- 2.4.4 Link Purpose (In Context) (A): The purpose of each link should be clear from the link text or surrounding context.
- 2.4.9 Link Purpose (Link Only) (AAA): The purpose of the link should be clear from the link text alone (for AAA compliance).
What Is multimedia accessibility?
Multimedia accessibility ensures that video and audio content can be accessed, understood, and used by people with disabilities. This includes providing captions, transcripts, and audio descriptions.
Why Is multimedia accessibility important?
- Supports users with hearing or visual impairments by providing alternative formats.
- Improves comprehension for all users, including those in noisy or quiet environments.
- Enhances engagement by making content accessible across different learning styles.
- Meets compliance with accessibility laws and guidelines, such as WCAG and ADA.
How to ensure accessible multimedia
Basic Guidelines
- Provide captions for all video content.
- Offer transcripts for both audio and video materials.
- Include audio descriptions for videos with essential visual content.
- Use accessible media players that support keyboard navigation.
- Ensure automatic media playback can be paused or controlled.
Examples
Avoid | Use Instead |
---|---|
Video without captions | Video with accurate, synchronized captions |
Audio podcast with no transcript | Podcast with a downloadable text transcript |
Complex visual content without description | Video with audio description explaining key visuals |
Deeper dive
Question | Answer |
---|---|
How do I create accurate captions? | Use professional captioning services or AI-assisted tools, then manually review for accuracy. |
Are auto-generated captions enough? | No, auto-generated captions often have errors. Always review and edit them. |
When is an audio description needed? | If the video contains important visual information not conveyed through dialogue. |
What is an accessible media player? | A player that supports captions, keyboard navigation, and screen reader compatibility. |
How should I handle live video accessibility? | Provide live captions and offer an ASL interpreter when possible. |
Related WCAG standards
- 1.2.2 Captions (Prerecorded) (A): Provide captions for prerecorded video content.
- 1.2.5 Audio Description (Prerecorded) (AA): Include audio descriptions for key visual content in videos.
Automated Checks
Automated accessibility evaluation tools are useful for quickly identifying common issues in digital content, but they have limitations and cannot fully replace human evaluation. Explore what an automated accessibility checker what can and cannot do.
Manual Review
Manual accessibility checks are an essential complement to automated tools. They rely on human judgment to assess aspects of accessibility that tools can't fully evaluate. Explore key manual checks and guidance for evaluating headings, color contrast, link text, keyboard navigation, forms, and tables.
Additional information
Learn more about evaluating accessibility of digital content
Strategies and resources by content type
Accessible presentations ensure that slides are readable, navigable, and usable for all audience members, including those using assistive technology. This applies to PowerPoint (PPT), Google Slides, and other slide-based tools.
Key principles of presentation accessibility
Strategy | How to | How to check |
---|---|---|
Use slide titles for every slide |
| Enable the Outline View (PowerPoint) or check the Slide Titles in Google Slides. |
Ensure proper reading order |
| Navigate slides using the Tab key—ensure elements follow a meaningful sequence. |
Use accessible text formatting |
| Run an Accessibility Checker in PowerPoint or Google Slides. |
Provide alternative text for images & graphics |
| Right-click an image and select Alt Text. |
Ensure descriptive links |
| Scan for generic phrases like “Click here” and replace with contextual links. |
Avoid using color as the sole means of communication |
| View slides in grayscale mode or use a color contrast checker. |
Enable automatic captions for live presentations |
| Enable real-time captions and test for accuracy. |
Share presentations in an accessible format |
| Open exported PDFs in Adobe Acrobat and use the Accessibility Checker. |
Additional resources
Accessible documents ensure that all users, including those with disabilities, can read, navigate, and interact with the content effectively. This applies to word processing files (e.g., Microsoft Word, Google Docs), PDFs, and other text-based documents.
Key principles of document accessibility
Strategy | How to | How to check |
---|---|---|
Use proper headings & structure |
| Use the document’s built-in Navigation Pane (Word/Google Docs) to verify structure. |
Provide alternative text for images |
| Right-click an image and check for an “Alt Text” option. |
Ensure descriptive links |
| Scan document for phrases like “Click here” or “Read more” and replace them with descriptive text. |
Use tables properly |
| In Word, select the table, go to “Table Design,” and check for a Header Row. |
Ensure sufficient color contrast |
| Use a color contrast checker or test by converting the document to grayscale. |
Use accessible fonts & formatting |
| Scan document for small or hard-to-read text. |
Verify reading order & logical flow |
| Use Tab key navigation or screen reader preview. |
Convert to an accessible PDF (if needed) |
| In Acrobat, open the Accessibility Checker (Tools > Accessibility > Full Check). |
Additional resources
- Creating Accessible Documents / Presentations
- Getting Started with Document Accessibility - AEM Center
- Tool: Google Doc: Make your Google document or presentation more accessible
- Tool: Microsoft Word document: Make your Microsoft Word document accessible
- Document type: PDF (Note: Creating an accessible PDF can seem daunting. The best first step is making an accessible document before converting it to a PDF.)
Accessible video and audio content ensures that all users, including those with hearing or visual impairments, can access the information. This applies to recorded and live-streamed media.
Key principles of video & audio accessibility
Strategy | How to | How to check |
---|---|---|
Provide captions for all video content |
| Enable captions and verify accuracy by watching the video. |
Offer transcripts for audio & video |
| Open the transcript and ensure it matches the spoken content. |
Provide audio descriptions for visual content |
| Play the video with audio description and confirm key visuals are described. |
Use an accessible media player |
| Test media controls using only a keyboard and screen reader. |
Ensure live video accessibility |
| Enable live captions and confirm accuracy during playback. |
Additional resources
- Top 10 Tips for Creating Quality Video
- Tool: YouTube - Add subtitles and captions
- Tool: YouTube - Use automatic captioning
- Tool: Google Drive video - adding captions
- Tool: Vimeo captions and subtitles
- Tools: Virtual meeting space
Social media accessibility ensures that posts, images, videos, and interactions are usable by all users, including those who rely on screen readers, captions, and keyboard navigation. Each platform has different accessibility features, but core best practices apply across all.
Key Principles of Social Media Content Accessibility
Strategy | How to | How to check |
---|---|---|
Write descriptive and clear text |
| Read the post aloud to ensure clarity and ease of understanding. |
Provide alternative text for images |
| Enable a screen reader and verify how the image is described. |
Ensure video content includes captions and transcripts |
| Play the video with captions on and verify accuracy. |
Use descriptive links |
| Review all links to ensure they describe the destination. |
Make emojis and special characters readable |
| Use a screen reader to test how emojis and special characters are announced. |
Ensure posts are keyboard navigable |
| Try navigating the post using only a keyboard. |
Provide high-contrast images and graphics |
| Use a contrast checker to verify readability. |
Limit animated and flashing content |
| Play the animation and ensure it complies with WCAG flashing thresholds. |
Additional resources
- Creating Accessible Social Media Posts - AEM Center
- Tool: Twitter
- Accessible images on X, formally known as Twitter
- How to add alt text for an image on X (example)
- Tip: Don’t be redundant in your alt text
- Tool: Facebook - Alternative text on Facebook
- Tool: Instagram - Alternative text on Instagram
PDFs are a common format for sharing documents, but they can pose challenges for accessibility. This guide helps you decide when to use PDFs, when to avoid them, and how to make them more accessible when necessary.
The Pros and Cons of PDFs
Pros
- Universal format: PDFs maintain consistent formatting across devices and operating systems.
- Security features: PDFs can restrict editing or protect sensitive information.
- Print-ready: Ideal for documents that need to be printed exactly as designed (e.g., brochures, flyers).
Cons
- Accessibility challenges: PDFs often lack proper structure for screen readers (e.g., missing tags, reading order issues).
- Difficult to edit: Fixing accessibility issues requires specialized software like Adobe Acrobat Pro.
- Not mobile-friendly: PDFs can be hard to navigate on small screens, unlike responsive web pages.
When to Use PDFs
- Essential formatting: Use PDFs when document formatting is critical (e.g., forms, official letters).
- Archived documents: PDFs are acceptable for archived content if they are properly tagged for accessibility.
- Print distribution: Use PDFs for materials primarily intended to be printed.
When to Avoid PDFs
- Simple text content: Use a webpage or accessible Word document for straightforward content (e.g., newsletters, updates).
- Interactive content: Avoid PDFs for forms or applications unless you can ensure full interactivity and accessibility.
- Frequent updates needed: Avoid PDFs for content that changes often; updating a webpage is more efficient and ensures users access the latest version.
Learn more
Definitions
- Disability (video)
- Accessibility
- Accessibility and availability are different. During the pandemic, we often heard about students needing access to devices and internet connectivity. This is really about ensuring availability.
- Accessibility is when a person with a disability can acquire the same information, engage in the same interactions, and enjoy the same services in an equally effective, equally integrated manner, with substantially equivalent ease of use as a person without a disability.
- Accessibility is shaped by what we do, our interactions with the environment, and our personal preferences. Accessibility is essential for some, useful for all (video)
- Universal design (video)
- Assistive technologies are designed to address specific barriers persons with disabilities may face when they are completing a task . Examples of assistive technology include text-to-speech, screen readers and speech recognition.
- Accessible technologies are designed to meet the needs of a lot of different users. The technology includes features that can be customized by the user to meet their individual needs.
Model accessible design
Use this template to create a slide that highlights how you are incorporating accessibility in your content design. This is a simple way to begin elevating the topic of accessibility, model accessible content design, and empower others to design with accessibility in mind.
Template: Designed with accessibility in mind: Presentation slide
(“Use Template” button will allow you to make a copy of this slide.)
Be sure to remove/add information to align with the accessibility strategies you used.
Designing content other than slides? Copy/paste the slide text to other digital content types.