Best Practices for Digital and Document Accessibility
Apply proper page structure
Why does it matter?
Headings create an outline for a webpage, like a table of contents, and provides logical order for assistive technologies. Screen readers interact with structural elements on your web page by how the elements are labeled. When first arriving on a page, the screen reader will announce the page title to orient the user. Headings are used to both skim and navigate content, as they provide both structure and hierarchy to the sections of text appearing.
Best practices
- Page titles should be brief but meaningful. Titles are critical to the understanding of the page and are announced by screen readers. Titles also appear in browser tabs and search results.
- Apply heading in a logical order. Typically, starting with Heading 1 (H1) and subsequent sections of content being Heading 2 (H2), Heading 3 (H3) and so on.
- Headings should be used instead of text size to indicate importance and structure. Changing the font size to be larger at the start of a new section of text does not provide any structural context for a screen reader.
- You should not skip or change heading styles simply to make changes in text size. This will confuse the structure of the page and further confuse the screen reader.
Where can I learn more?
Build better text and color
Why does it matter?
Inconsistent text formatting and usage of color can be an access barrier for screen readers, can decrease overall page readability, and can limit content understanding for people with low vision or reading disabilities.
Best practices
Building better text
- Use consistent sans-serif font for paragraph text and at least 12 pt font
- Avoid underlining text, as underlined text can be misinterpreted as link text by screen reader technology
- Avoid italics and use bold for emphasis if needed (not for style)
- Avoid using all caps for text, as screen readers might read this as individual letters
Using appropriate language
- Be aware of your audience and what language best serves the content
- Avoid jargon and figures of speech
- Write in shorter, clear sentences and shorter paragraphs
- Expand acronyms when first encountered
- Use concise, plain language
- Use inclusive language and avoid ableist terms, such as “crazy idea” or “blindly follows”
Building better formatting
- Use built-in tools to create unordered (bulleted) or ordered (numbered) lists. If your lists are spanning more than 7 to 8 items, though, consider breaking things up
- Left align your text to keep spacing consistent; avoid justified text because it can create inconsistent word spacing and decrease readability
- Using headings to break up your page into readable sections
- Avoid tables as solely a formatting tool! Instead, use unordered or ordered lists where information is not overwhelming to list
Building better color choices
- Use high contrast colors for the foreground and background. Black text on a white background, while aesthetically simple, is highly effective for accessibility.
- Use words in addition to color to convey meeting to ensure that web content is understood with or without color.
Build better hyperlinks
Why does it matter?
Screen readers can skim a webpage for hyperlinks, so having meaningful and unique text to describe each link is critical to understanding the role and actions of various hyperlinks.
Best practices
Avoid raw web addresses in links—unless you are designing a resource to print and hand out. Screen readers will read the entire string of words, letters, and numbers in a web address one-by-one.
- Use unique text that describes the purpose of the link and clearly explains the link’s destination:
- Unclear: Click here for registration information for this event.
- Clear: Registration for this upcoming program is now available.
- Unclear: Learn more about book banning resources here.
- Clear: Learn more about ALA’s book banning resources.
- Use screen reader friendly URLs where possible that are descriptive of your page
- Buttons that function as links should be described in the alt text field in terms of their purpose rather than their appearance.
- If you modify the text color of link text, ensure that good contrast remains between foreground and background and that the underline remains in place.
Where can I learn more?
Create accurate alternative text/image descriptions
Why does it matter?
Alternative text (or Alt text) enables users with vision loss to have a better understanding of the context of images within a page or section. Screen readers can recognize an image when encountered, but unless there is descriptive text added to the alt text field for that image, the image is inaccessible to the user. Drupal, along with any good software committed to better accessibility practices, will have an “alternative text” field that can be populated when uploading an image
Best practices
- Context is important! Think about the image’s content, function, and intent as it relates to the page and written text.
- Keep descriptions brief and centered on the most important context the image is meant to convey
- Avoid using images as your sole means of information sharing. If you are using an image alone to convey meaning, make sure the alternative text provides the context of that image.
- You do not need to start your description with “image of” or “picture of” or “link to.” The screen reader technology is designed to recognize image files
- Clarity on this: If the image is a painting, cartoon, or screenshot, you should note that detail, as it provides necessary context
- Use appropriate grammar and punctuation in alt-text fields
- Don’t use alt-text if the image is purely decorative, like a border or image used solely for visual appeal. If the image is already described within the text on the page, you do not need to also describe it via the alt text field.
Where can I learn more?
Create accessible audio and video
Why does it matter?
More and more people are captioning or transcripts when viewing videos or listening to podcasts, regardless of disability status. By adding captions, transcripts, ASL interpretation, and image descriptions to our video and audio content, we are not only lessening barriers to access for diverse learners and folks with disabilities, but we increase opportunities for library students who are not native English speaker as well.
Best practices
- Only use videos that have captions either embedded in the file (open captions) or that can toggle caption view on or off (closed captions)
- Subtitles and Captions are not the same. Subtitles provide translation of spoken content into another language while captions also describe additional audio, such as sound effects (i.e. a door slamming, an alarm sounding)
- If you don’t own the video, reach out to the creator and ask if they have a captioned version or if they consider creating a captioned version to allow for greater accessibility
- If creating your own caption files through Zoom or Vimeo (or other platform’s) automatic captioning tools, be sure to review and make changes to the text before sharing
Where can I learn more?
- Video Captioning Guide_Manual Automated and Professional Captioning Tips.docx
- Accessible Social
- Use automatic captioning - YouTube Help
- Captions and subtitles – Vimeo Help Center
- How to upload caption (.srt) file to X Posts
- How To Become a Pro at Instagram’s Auto-Generated Captions (hootsuite.com)
- Accessibility for your videos on TikTok
Build better electronic documents
Why does it matter?
Many of the practices used to support website accessibility can be applied to the creation of more accessible electronic documents. We house a lot of resources on the ALA site in PDF format, and we also work heavily with slide decks, which can be inaccessible to assistive technologies (and non-AT users) if not created with access in mind. While remediation is possible, processes can be very time consuming and still result in barriers. The more we start building the habit of creating born-accessible documents, the larger our reach!
Best practices
- Whenever possible, avoid PDFs as the primary document format! Instead, use HTML or EPUB, where appropriate
- Create the document in Microsoft Word or other word processing document first before converting to a PDF.
- Use built-in tools, like the Accessibility Checker, and check Properties when saving as a new file format to ensure maximum accessibility
- Use Accessible Templates when building PowerPoint Decks and run the built-in Accessibility Checker to help ensure you have unique slide titles, correct reading order, adequate color contrast, and helpful alt text.
- When scanning an image, use applications that ensure your scan is converted into a PDF that can have alternative text added.
Where can I learn more?
- Make your Word documents accessible to everyone with Accessibility Assistant - Microsoft Support
- Create and verify PDF accessibility, Acrobat Pro
- Accessibility Checklist for Presenters: A PowerPoint Guide
- Guide to Creating Accessible Presentations - Digital Library Federation
- Make your PowerPoint presentations accessible to people with disabilities - Microsoft Support
- Accessibility at the Forefront Video Tutorial from ALA: Guidelines for more inclusive presentations
Test and review for digital accessibility
Free extension that can be added to your browser which does a quick automated scan for compliance issues, such as page structure, alt text, contrast, form fields, language. A great tool for units to use to get a baseline of their pages and what might need to be focused on via a staff training or to help inform contractors about what needs to be addressed.
You can enter the foreground and background color codes of your page to double check contrast compliance.
NonVisual Desktop Access (NVDA)
Free screen reader tools to help test for errors a user might encounter if using assistive technology.
Windows Narrator
Windows Narrator is a free screen reader tool built into the Microsoft Operating System.
Non-Technical Accessibility Tests
A great tool for content editors to review web pages and identify where accessibility improvements may be needed.