Background

In the past, accessibility was generally thought of with only the physical environment in mind: wheelchair ramps and curb cuts being the common examples. However, the digital environment has become part of our daily lives, so digital accessibility needs to be remembered as well. In many cases, government services, education, prescription refills, and ordering food — not to mention social media — require access to the internet.

While there is an increasing number of lawsuits against companies for not having accessible websites, there’s a strong business case for having accessible employee-facing and customer-facing platforms. If employees can’t fully use the resources provided to them, you’ll have a decrease in productivity. If customers can’t use your website — or are too heavily impeded by its design — you’ll lose not only that customer but social goodwill as they share their negative experience with others.

This page focuses primarily on internet-based interfaces, but accessible documents are important too. Find links to office accessibility tips at the bottom of the page.

 

There is currently a booming industry promising to solve accessibility issues with a line of code or an overlay. Many also guarantee to protect their clients from accessibility-related lawsuits. Unfortunately, these overlays generally increase the number of problems for users and businesses have been successfully sued even though they had overlays in place.

 
 

Through international conferences, the global web developer community starting establishing digital accessibility guidelines in 1999. The most recent update to these guidelines, called WCAG 2.1, was issued in 2018 and has become a legal requirement for federal government websites in the United States as well as for many European Union, Canadian, and Australian government agencies. There are 78 different success criteria for WCAG 2.1, which we will not be including here. We encourage you to work with accessibility consultants and web developers to meet the full list. However, ensuring that your website meets a small sample of these will have a major impact for many users.

Feel free to email [email protected] or call Maggie Baker at (217)356-9176 for assistance with any of these topics.

 
 
 
Alt text

Alt (alternative) text refers to a short description of an image. People who use screen readers are unable to see these images and rely on the descriptions provided in alt text. Sometimes, the image may be decorative and not provide any useful information. Other times, however, the image may include stylized text or a picture that provides important meaning. In these cases, the user is missing part of your message if there is no alt text. Adding alt text is an available feature on most office productivity software, major social media platforms, and email marketing services (e.g. MailChimp, Constant Contact). It has the added benefit of improving search engine results for your website!

 
Blinking and moving graphics

People with photosensitive epilepsy can have seizures triggered by rapidly flashing lights and items. Not everyone is affected by the same frequency, but the safe guideline set forth in WCAG 2.1 is to have flashes be no more than three times per second.

Individuals with ADHD may have problems navigating websites that use flashing ads, scrolling banners, transition effects, and background graphics that shift as they move up and down the page. Minimizing distracting elements will improve the user experience.

 
Captions on videos

Whether talking about recruitment videos on your website or clips shared to social media, remember that Deaf and hard-of-hearing users are not the only people who rely on captions. In fact, 85% of video on Facebook is watched without sound and 76% of Facebook ads can’t be understood without having the sound on. Similar to alt text‘s indirect benefit, search engines are able to read caption and subtitle files, which can translate to increased traffic to your website!

Auto-captions

Most platforms now offer auto-captions as an option when uploading your videos. This can be a convenient feature; however, these can sometimes result in displaying incorrect words. If you choose to use auto-captions, watch the video once posted to make sure the correct message is being shared.

Subtitle (.srt) files

SRT files contain timestamped captions/subtitles that are manually entered to ensure accurate wording. Creating them from scratch can be time consuming. Fortunately, there is a shortcut to creating an SRT file using YouTube that you can download. This file can then be uploaded along with your video file as you post to different social media platforms and to your website.

Color contrast

You may find that more and more programs are offering “High Contrast” and “Dark” modes. This is because everyone has different preferences for color contrast (the difference between the text color and the background). If you are using text over a background graphic or colored background, be sure to use a font color that is different enough to be legible. If people can’t read the information or know which button to select, you’re missing an opportunity to reach your customers.

The guidelines recommend a contrast ratio of at least 4.5:1 for regular-sized text. You can check this ratio using an online contrast analyzer like the WebAIM Contrast Checker. There are also downloadable applications available. Below are a few examples of good and bad contrast.

 
Four good examples and two bad examples of color contrast
 
 
 

Note: Links in these examples have been disabled and are for demonstration purposes.

Many websites like to embed links in text instead of writing the whole URL out. This often looks like

“For more information, go here” instead of “For more information, go to https://www.google.com”

This is a very useful practice, but can create challenges for people using screen readers, who frequently scan a page to see what links are available. Consider a paragraph from our History page that has been rewritten:

“As of the end of 2021, over 100 Champaign County businesses have been reached. See the list here. Both training options continue to be offered at no cost in person and online. Information about the training is here.”

A screen reader creates a window with all the links on a page so the user can decide if there is anything useful before reading the whole page. Links written as “here” provide no information for the user.

 
Link window from Narrator showing two poorly written links titled "here"

Example links window with two generic links

 
Link window from Microsoft Narrator showing informative links, correcting the problem from the previous image

Example links window with informative links

 
A better practice is to create an informative link that helps everyone to know where it leads. Instead of “The 2021 financial statements are available for download”, try “Download the 2021 financial statements.” With the exception of the bad examples on this page, you’ll find examples of informative links throughout this website.
 
 

Many users rely exclusively on keyboards to move around a website. To see if your site is designed with this in mind, try to go from the top to the bottom of each webpage using the Tab key. Check to see if the selection moves in the same order that you would normally read the page. Can you reach each link? Can you get to each field on a form? What about buttons?

If you answered no to any of these, that translates to customers who are missing information and can’t make orders or ask questions. It also means that job applicants aren’t able to fill out the application or interest form. Correcting this is vital and most likely will involve someone with HTML experience.