As the U.S. continues to be battered by COVID-19, it’s unclear when or if life will go back to “normal.” In the meantime, though, Americans are rolling with the punches, shifting priorities, adjusting goals, and taking on new challenges—maybe none more so than educators.
With remote learning prolonged indefinitely at many schools and universities across the U.S., millions of them have been thrust into the role of content creator. And anecdotal evidence suggests that public school districts have provided little, if any, training around web accessibility. This is unfortunate but by no means a barrier to creating web content that anyone can perceive, understand, navigate, and interact with.
If you don’t have much experience with content creation, take comfort in the fact that accessibility isn’t a new concept and loads of resources are just clicks away. Stable, referenceable technical standards for making web content accessible (known as Web Content Accessibility Guidelines or WCAG) have been around for more than 20 years and they’re available online. Plus, courses designed to be accessible to anyone—including those who are blind, deaf, and have physical disabilities—predate WCAG.
At Modern Tribe we strongly value diversity and inclusion, so we apply accessibility principles to websites and online courses for us and our clients every day. And we’re happy to give you an overview of the basics so you can start creating accessible content—for students or your own organization—ASAP.
Accessible Content 101
The following is a list of accessibility best practices to keep in mind as you’re crafting on-page content, multimedia, and documents. Go ahead and bookmark this page now. We think you’ll be coming back to it often.
That said, please note that accessibility is a complex subject, and what we’ve compiled isn’t a comprehensive guide. There may be requirements that aren’t included or fully addressed here based on standards for specific industries, states/provinces, countries, or organization types.
On-Page Content
Text, images, and links on a web page should be written and organized in a way that makes them easy to use and understand.
Check Your Work
Did you use headings?
Don’t make the mistake of using headings for stylistic formatting. Good headings simply and concisely describe the content that follows and should be formatted with HTML headings (H1, H2, etc.). That way, people using assistive technology can tell the difference between headings and body text.
Did you use understandable language?
Simple language allows text to be understood and improves the user experience, as clear headings and labels make website navigation and interaction easier. Obviously, everyone benefits from simple language, but it’s especially helpful for people with cognitive disabilities or low reading literacy, and for those who aren’t familiar with the topic or fluent in the language.
Did you add alt text to images on your page?
Alt text is the copy that appears in place of an image on a webpage if the image doesn’t load. This text helps screen-reading tools describe images to visually impaired readers.
Are your links descriptive?
Descriptive link text makes it clear what will happen when someone clicks a link. This clarity is especially important for people who use screen readers since they often navigate websites by going from link to link using the tab key.
Keep Learning
- For alt text writing tips: Moz SEO Learning Center – On-Site SEO – Alt Text
- For alt text best practices: Siteimprove – Accessibility: Image Alt text best practices
Multimedia
Accessible multimedia that combines audio and video content is critical for people who are hard of hearing, deaf, and/or blind.
Check Your Work
Do your audio and video files have descriptive text transcripts?
Descriptive transcripts include text of speech and non-speech audio information (such as sound effects) as well as text describing the visual information needed to understand the content. Any links to transcripts should be placed immediately after the related audio or video content.
Do your videos have an audio description and captions?
Every video on a web page must have an audio description of the visual information needed to understand it. Every video also needs captions, which are descriptive transcripts that have been divided into chunks, time-coded, and synchronized with the audio.
Did you make sure audio and video files don’t start automatically when the web page is opened?
Autoplay is generally controlled by the publishing platform and can be disabled in the settings.
Keep Learning
- To caption and subtitle any video for free: Amara Editor
- To add closed captions to YouTube videos: YouTube Help – Add your own closed captions
- To use automatic captioning on YouTube: YouTube Help – Use automatic captioning
- To find captioning service vendors in the U.S. and beyond: Captioning Service Vendors
Documents
If a document is uploaded to a website, but the text and functionality can’t be accessed by assistive technology, the doc is difficult or impossible for some people to use.
Check Your Work
Can the content be uploaded as a web page instead of a document?
If it’s possible to share the content in the form of an accessible web page, do that instead.
Is the filename unique?
The filename should be unique and reflect the content or purpose of the web page. It should also be in the same language as the page and separated by hyphens.
Did you use headings?
Headings should have less than 20 words. Use existing heading styles (Heading 1, Heading 2, etc.) to provide structure and create hierarchy within the text. Don’t tinker with font style, font size, or bolded text to create your own headings.
Did you reformat text that doesn’t have to be written in paragraphs?
Use bulleted lists to emphasize individual points, and numbered lists to present info in a specific order.
Did you use an easy-to-read font?
A sans serif font with a minimum 12-point size is a solid choice.
Keep Learning
- To create accessible PDFs in Adobe Acrobat and verify accessibility: Adobe Acrobat – Create and verify PDF accessibility
- To create accessible PDFs in Microsoft: Microsoft – Create accessible PDFs
- To make a Google document or presentation more accessible: Google – Make your document or presentation more accessible
- To get software (discounted through 2020) to test, repair, and report on accessible PDFs: CommonLook PDF Checker Plugin for Adobe Acrobat
- To check the accessibility of a PDF: Tingtun PDF Checker
Start Creating
Now that you’ve got the basics for crafting accessible web pages, audio, video, and documents, as well as helpful resources to keep you on track, it’s time to get to work. Good luck!
And remember: What we’ve shared here is just the tip of the iceberg. Accessibility compliance across an entire website requires many content, design, and technology considerations. For a rundown of tools you can use to comprehensively assess a site, check out our must-have tools for evaluating web accessibility.
To get other helpful tips and insights from our team delivered straight to your inbox, sign up for our monthly newsletter, Better Connected.