Web accessibility is a huge topic! And there is a lot you can do as a content creator to remove barriers for people with disabilities.
The World Wide Web was invented by Tim Berners-Lee who said “The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” That is the reason we are taking the time to re-adjust our skills and focus on that essential aspect. In doing so, we reaffirm our commitment to greater inclusion for everyone in the digital life of Ohio University.
So, let’s tackle some simple solutions you can dive into today. We recommend choosing one topic at a time and focusing on making it a new habit.
Add alternative text to all images
For people who are blind or have low vision, adding alternative text is one of the best things you can do to improve digital accessibility. Alternative text is not limited to websites – even Instagram and Facebook allow you to add alternative text to your images.
While it is fairly simple to add alternative text to images, it is not always easy. The idea is to describe the image (without using the words "image" or "picture") so that the person hearing the description will understand both what it is and why it is there. This description should be as short as possible, preferably under 150 characters. Screen reader users listen to a huge amount of information and it is easy to get overloaded.
Does every image need to be described? Just about! Images that are purely decorative should not have an alternative description but they should have special notation. On the web, they should either be coded as a background image using CSS or the alt tag should be empty (do not add an alt text that reads “descriptive image”). That being said, images generally convey some kind of meaning to sighted users and that meaning should be conveyed to non-sighted users as well. Purely decorative images are rare on websites now. If an image is adding something to the content, it should be described. If it is not, then why is it there?
Use descriptive links
A descriptive link is a link that lets your audience know where you want to take them. For example, a link that says “click here” or “read more” doesn’t describe where it goes. Screen reader users often use a feature that "scans” a web page by generating a list of all the links on that page. This often helps blind or low-vision users know if the webpage is useful or not. When all the links on the web page read “click here” – you can imagine how that might be frustrating.
As with alternative text for images, you don’t want links to be overly verbose. The word “link” is added by the screen reader so if a very long sentence or entire paragraph is hyperlinked, that can get confusing and exhausting. The hyperlink should hold just enough information to let someone know what to expect. It is also very helpful to include file types for documents as well as the word “VIDEO” or other hints. This also helps users who have limited internet access know when they might be selecting larger files.
Using descriptive links can also improve search engine optimization, especially when keywords or phrases are hyperlinked. This also helps people using screen readers better understand the page. Since hyperlinked words are often displayed differently from the body text, this also supports marketing efforts.
Edit YouTube captions
Most of the videos used on ohio.edu are housed on YouTube and captions were likely added automatically and may not have been edited. Not only is it potentially embarrassing to have these unedited captions showing on OHIO websites, but it is also a violation of the web accessibility content guidelines (WCAG). It is a violation because unedited captions can reverse the meaning of videos and cause extreme confusion for deaf and hard-of-hearing audiences.
Adding captions
To add subtitles that do not have automatic captions (for instance, when you first upload a video), follow these instructions for creating new captions (VIDEO)
.
Editing auto-captions
Follow these instructions for editing an existing auto-captioned video:
-
Sign in to YouTube Studio
.
-
From the left menu, select Content.
-
Select the video you’d like to edit.
-
From the left menu, select Subtitles.
-
Published (automatic)should be displayed and to the right of that, select DUPLICATE AND EDIT.
-
Then select CONTINUE, then Edit as Text.
-
Select inside any line in the caption track panel and edit the text. Make sure you edit for punctuation as well as any other errors made by the automated process. You can also adjust the timing of the captions, so they appear at the correct times.
-
When you’ve finished making changes, select Publishor SAVE DRAFTto work on the captions later.
-
When you’ve published your changes to the new file, delete the original Auto-caption file by selecting the three stacked dots and then DELETEin the “more” menu.
Learn more about editing captions text on YouTube (VIDEO)
.
Make sure data tables are simple and the headers are descriptive
Tables have been under attack on the web, but for the most part, it is perfectly okay to use tables on the web. It is even okay, from an accessibility point of view, to use tables for layout – as long as you are an experienced web developer. For most content creators and for most content, the best practice is to use tables only for data, and those tables should only be simple tables.
All data tables must have designated headers so be sure to follow the instructions for the tool you are using to create either a row header, column header, or both. This will allow a person using a screen reader to understand the data in each cell. Otherwise, the content of data cells will be read by the screen reader without context making that data impossible to understand.
Check accessibility with a browser extension
There are several free browser plugins you can use to run a quick check of a web page. It is easiest to run an automated check after the web page has been published. The more you use these tools, the easier they are to understand and remediate barriers. Here are some useful Chrome plugins that also help you understand how to fix the issues. You can search other browsers for these or similar tools.
While automated checks are useful, they only find about 30% of accessibility issues. Some simple manual checks you can do include:
-
Use the Tab key to make sure everything that is interactive can be activated
-
As you’re tabbing, make sure the focus box is visible each time you tab, and that the focus is moving in a logical order (top to bottom, left to right).
-
When you tab through a website, the first tab should be a link that says, “Skip to Main Content”. Press the Enter key and make sure the link works.
-
Use the control/command button with the + sign to increase the page to 200% and make sure the page still works correctly
Learn more about accessibility testing on WebAIM’s Quick Reference
for web accessibility testing.
Resources
Get help
