Where to Start
Whether you’re writing a syllabus, creating a poster, or drafting a web page, there are six key concepts you can start to employ now to create accessible digital content. The following handful of practices are a great place to start if you’re new to considering accessibility in the work you create.
Headings
Using headings within a document, slideshow or web page serves two purposes: it provides a more readable visual layout, AND it makes it possible for visually impaired users to use a screen reader to make sense of the content.
Do
When creating headings, it is critical to use the heading properties of whatever tool you’re working in, identifying headings with heading 1, heading 2, etc. This will allow your content to format more consistently across web browsers and screens, as well as make it intelligible for a screen reader.
Don’t
Manually create a heading by increasing the size, font or boldness of the text. This will not mark it as a proper heading within the flow of a document.
Lists
Like headings, lists aid in readability of your content by grouping related items and guiding the eye. Lists also help screen readers identify related items for visual impaired users.
Do
As with headings, it is important to use formatting tools to create lists (like bullets and numbers – unordered and ordered lists) This not only improves the layout and organization, it is what identifies a list as such for screen readers.
Don’t
Manually create lists using numbers or hyphens.
You may already be familiar with using lists by selecting the bullet or numbered list buttons in your text editor, which can be found in any editor you’re using, whether in WordPress, Moodle, Word, Slides, and more.
Contrast
Contrast is another characteristic of digital content that can be used as both a design element (think bold font, or distinct colors), and as a consideration for accessibility. For example, a light gray font on a white background doesn’t provide sufficient contrast to be readable, and especially by visually impaired users. In this way, when referring to contrast and accessibility, it’s typically in terms of color contrast and making sure that fonts are readable against the background colors they appear on.
Do
Use built in accessibility checking tools and a contrast checker to determine sufficient color contrast. Accessibility checkers built in to Word, Powerpoint, Adobe Acrobat will analyze contrast and flag items that don’t meet WCAG standards.
Don’t
Try to eyeball contrast because vision and monitor settings can be misleading.
In choosing color schemes, designers can use the free WebAIM Contrast Checker and enter the foreground and background color values to determine appropriate contrast.
Using Grackle Docs in Google Docs
Audio and Video
All video and audio content that is shared via school websites, within departments or via courses should have text-based alternatives available. Captions and transcripts benefit hearing impaired users, as well as those learning the language used in the content, or any user who finds reading preferable to listening given their situation.
Furthermore, some applications allow keyword searching of captions/transcripts to make it easier for users to locate relevant content, such as in Panopto videos’ captions interface.
The simplest method of adding captions is to use tools that can create captions automatically, such as uploading content to Panopto. The auto-captions here are then editable to correct any mis-identified words. Please refer to Panopto’s captioning documentation for additional information.
Content that is created and streamed through Broadcast Media’s services will also automatically provide captions.
Videos uploaded to other sharing services, such as YouTube, also have a means for editing auto-created captions.
Links
You’re likely familiar with linking to content within digital documents and web pages as this is a core asset of digital media. Learning how to use links in effective ways can benefit users of all types.
Do
Use short descriptive phrases as your link text by writing as you normally would and then linking a portion of a sentence that is most relevant to the information the link is pointing to.Example: The Accessibility at St. Olaf site outlines key concepts to adopt in order to create accessible content.
Don’t
Avoid pasting a full URL in the body of a document/page as this can be both visually problematic and it will be read out character by character to a visually impaired person using a screen reader.
Avoid short non-descriptive text links such as:
-
- See more
- read more
- click here
- see this
Alternative Text
Alternative text (often referred to as “alt text”) is a behind-the-scenes label that describes what that image or graphic is. It is something that is set in the tool you’re using to create digital content, but it will not appear within or next to the image itself.
Like other key concepts mentioned above, alt text is used by screen readers to describe what an image is to a visually impaired user, so it is essential to help users make sense of your content. In addition, alt text is read by search engines and is therefore useful for search engine optimization, or SEO. Finally, alt text is also what is shown on a webpage if the image doesn’t load for whatever reason.
Every tool offers a different method for adding alt text, but they all provide a way to do this. Whatever the method, make sure your alt text is brief, simple and clearly explains what your image is to someone who can not see it (e.g. “three students doing group work in a St. Olaf classroom”).