Digital accessibility means our digital resources and communication methods should be accessible to everyone, regardless of disabilities. When we create materials with digital accessibility in mind, it benefits everyone and makes the content easier to access, use, and engage with.
These guidelines are some ways to start improving the accessibility of all kinds of digital resources, like documents, PDFs, slideshows, Moodle, and emails.
To watch accompanying video lessons with interactive activities for each of these sections, see the Digital Accessibility Channel in Mediaspace.
To ask questions or find help with digital accessibility, contact Digital Pedagogy & Scholarship at dps@bucknell.edu.
To find support for student accommodations or accessibility, contact the Office of Accessibility Resources (OAR) at OAR@bucknell.edu.
Descriptive Links
Describe the destination of the link in the link text.
Descriptive links let the user know where a link will take them and are especially important for people using screen readers. A descriptive link gives that user information about where the link will go in plain text, instead of an ambiguous phrase like "click here" or a full link, which a screen reader will spell out in entirety.
Don't:
Do:
- Use concise, descriptive language for link text. For example, you may want to include a link to the Bucknell University home page.
- Use unique link text, so that each link is different.
Open links in the same tab
Links should open in the same window by default.
For sighted users who are comfortable with using a browser, opening links in a new tab or window seems convenient. However, for someone unfamiliar with browsing the internet, using a screen reader, or using a mobile device, it can be jarring to be launched into a new tab where the usual "back" button doesn't work. Always have links open in the same window – users who would like to open the link in a new tab can right click on the link and select "open in a new tab."
Don't:
- Have links open in a new tab with no explanation
Do:
- Have links open in the same window by default
- If a link opens in a new tab, mention that in the link text, with an icon, or in text surrounding the link.
Headings
Use built-in headings to add structure to your document.
Pre-defined headings (heading 1, heading 3, heading 3, etc.) give a document structure with sections and subsections, providing essential guides for anyone using a screen reader. They make the document easier to scan for sighted users too. Not all text editors will have predefined headings (for example, Gmail does not), but if the option is there, you should use them.
Don't:
- Skip the pre-defined headings and create your own headings by making the text larger, bolded, or a different color. If you don't like the style of the headings, you can usually change the defaults for your document.
- Have multiple heading ones instead of a single title
- Skip headings, like moving from heading 2 to heading 4 without using a heading 3.
Heading 1
Heading 2
Heading 3
Heading 2
Heading 4 (don't use heading 4 here! Use heading 3 instead.)
Do:
- Use built-in headings. The official headings are markers for screen readers to help navigate.
- Only have a single heading one; This is the main title of your document, so there should only one.
- Use headings in order.
Text and Image Size
Both text and images should be large and able to be made larger.
Text should be large enough to read and images should be large enough to see all details. If a user needs to increase the size of either, the information should still be legible. Try changing your page to 400% to make sure this is possible.
Don't:
- Structure the page so that text runs off of the page or overlaps with other elements if the size is increased.
- Use a small font on a page with no zoom-in feature.
- Use small images that are not any bigger if opened in a new window.
Do:
- Use text that is large enough to read, at least 12 pt. for documents and 24 pt. for slides.
- Use high-quality images that can be opened larger in a new page or otherwise zoomed in on.
- Make sure text and images on the page can be made larger if needed.
Alt text
All images should have descriptive alternative text to describe the image.
Alternative text (alt text) is a description of an image that is read out load if the user is using a screen reader. Alt text also appears if the image does not load correctly, and is important for search engine optimization (SEO). All images need descriptive alternative text.
Don't:
- Include images with no alt text
- Include images of text. If text is included in an image, you should duplicate the text on the page or in the alt text.
- Include "image of" or "graphic" in the alt text; the screen reader will alert the user that it is an image.
Do:
- Include relevant information. This may be different depending on the context of the image.
- For example, the same image could have different alt text in different courses: "a leaf centered off of the left of the frame, showing the rule of thirds" or "a deciduous leaf that is still attached to a branch"
- Be concise, accurate, and descriptive. You can have a little fun with your alt text!
- For example, you could write "dog," or you could give the user more information by saying "short-haired dog stands proudly in front of a large hole in the grass"
- Consider the context of the image when writing alt text. What information is important for the user to know about this image? Your answer might be different if you are describing an image for a photography exhibit or if you are describing an image in a Biology text.
- Include all text in the image in the alt text or repeat the text elsewhere on the page. Preferably, include no images of text.
- Leave the alt text blank if the image is completely decorative, for example, a divider on a page.
What about complex images?
For complex images like charts, graphs, or detailed images that require more explanation, include a short description of the image in the alt tag and where to find a longer description ("Bar chart showing gym usage for spring 2018 through fall 2021. Longer description in following paragraphs"). Then include a text description of the relevant information in the complex image in the body of the document for everyone.
High contrast
The color of text should have high contrast with the background.
High contrast means that the color of the text and the color of the background are distinctly different from each other, such as black text on a white background or light yellow text on a black background. Low contrast text would be difficult to read, especially for low-vision users, like light blue text on a white background.
According to WCAG guidelines, the contrast between text and background color should be at least 4.5:1, which you can check using the WebAIM contrast checker
Don't:
- Use low contrast color combinations for text that are below a 4.5:1 ratio
- Yellow (#FFE11F) on a white background (Example of yellow text on white) only has a 1.3:1 contrast ratio
Do:
- Use text color that has at least a 4.5:1 contrast with the background color.
- White text on Bucknell Blue (Example of white text on blue) has a 11.97:1 contrast ratio
- Check your color ratios using the WebAIM contrast checker
Readability
Readability means that your text should be concise and easy to understand. This refers both to the words and phrases you use and the way the text is formatted. Using straightforward language is especially important for many neurodivergent users. It can also make it easier for assistive technology to interpret a page (for example, a screen reader or high magnification).
You can find help with writing in plain language at plainlanguage.gov or by using the Hemmingway Editor.
Don't:
- Include long, dense blocks of text
- Use all capital letters, italics, or underlines to make a point in the text
- Use figures of speech, idioms, or "turns of phrase"
Do:
- Use short sentences and bullet points
- Use headings, lists, and images to break up your content
- Write in plain language
- Write for the reading level of about a 15-year-old
- Align text to the left
Captions
All videos should have captions and/or a transcript.
All videos should have captions and podcasts or audio files should have transcripts so that users can read what's being said. This is essential for users with low or no hearing, but is also useful for users who need to access materials in a place where noise levels conflict with watching a video with audio.
You can record videos using Kaltura Capture, which automatically provides captions that you can edit, or caption videos you have already created by creating captions in Kaltura Reach.
Don't:
- Include video or audio with no captions
- Rely entirely on auto-generated captioning
Do:
- Include captions or a transcript with all video or audio
- Make corrections to auto-generated captioning
- Turn on live captioning when available (for example, in Zoom)
Check your site's accessibility
Grackle: Add-on for Google Docs, Slides, and Sheets
WAVE: Browser extension for Firefox and Chrome
Spectrum: Chrome extension, allows you to view pages through different forms of color-blindness
Microsoft Accessibility Checker: Microsoft applications (Word, Powerpoint, Excel) have a built-in accessibility checker.
- In the top menu, select "Review"
- Choose "Check Accessibility"
Additional Resources
Watch accompanying video lessons with interactive activities for each of these sections in the Digital Accessibility Channel in Mediaspace.