Tech Column: Check Your Website for Accessibility Issues

Margaret Kane Schoen is a Library Teacher at Newton South High School. 

---

As librarians, it’s important to make sure our resources are accessible to all of our patrons. When designing the layout of your library, you’ve probably thought about physical accessibility. Are exits and entrances wheelchair accessible, will people with disabilities be able to work comfortably at tables or reach printers? Did you know you also need to evaluate your website for accessibility?
​
Proper design and coding allows people with disabilities to navigate and interact with websites, and access the information and materials you’ve curated there. The World Wide Web Consortium has laid out guidelines for accessibility in its Web Content Accessibility Guidelines (WCAG), and the American Library Association recommends that libraries comply with them.

​Making your website accessible also makes it more usable for all users. Code written to be accessible for screen readers for the visually impaired also works better for those accessing sites with different tools, such as smart phones or watches. Allowing users to pause carousels is important for users using voice input devices, but can also help someone who needs more time to read the content.

A good place to start is to run your web site through an accessibility tester (tools are linked at the bottom of the article). These tools will look at the underlying code to check for issues such as missing structural elements like headers, improperly formatted tables or missing alt text in images.  

The results may seem overwhelming, especially if you are not an experienced web site designer! There will probably be parts of your web site that have issues that you can’t fix. Maybe the library web site is hosted with a district provided tool, and you don’t have access to any of the menus and headers. You might be using code created by outside vendors for databases, or search engines. Start with what you can do. 

• Check your links. Screen readers for the visually impaired will read out the words that are attached to a link. So make sure that you are creating the links with the most descriptive part of your sentence. For example, instead of using  “Click here for summer reading”  (which will give the not very helpful description of “click here” for where your link goes), try something like “Check out our summer reading list" which will create a description of “summer reading list” for your link. Be as clear - and as brief - as possible. Screen readers sometimes alphabetize all the links on a page for users. In that case a link for “Databases” will be easier to find than “Search the library databases”.

 

• Create alt text for images. Alternative text refers to the description that will be displayed if the image can not be shown. Many screen readers use this text as well. Don’t leave this field blank, or stick in placeholders like “photo.” Be descriptive! The general rule of thumb is that the description should explain both the content and the purpose of the image. This can vary depending on where the image is and why you are using it. For example, “George Washington” might be an appropriate description on a web page linking to biographies of the presidents, while “Painting of George Washington during the battle of Valley Forge” might be better for a research guide for an American History class. Do not use this space for copyright information, citations or other supplemental information - that should go in a separate caption under the image.

 

• Create blank alt text for decorative images. Used if you are inserting decorative images - something that exists solely for visual layout purposes or design, and conveys no information - for example, a line dividing a page, or a picture of a heart on a romance books list.  Leaving this field blank or inserting a space will prompt screen readers to say nothing and move on to the next element.

 

• Label images. Most web site editors allow you to name an image when you upload or insert the file. Make sure the images you are uploaded have descriptive names, for example “Student _work_examples,” or “MayBookClubPoster.” Try to avoid image names like “20160414_140422.jpg".

​

• Check your contrast. Low contrast between colors can make text very difficult to read. Think about the difference between reading white text on a black background and light grey text on a light blue background. While the colors are the aspect most people notice, the issue is really one of contrast between the hues of the text. This can be complicated, but there are several tools (linked below) that can help you evaluate whether the contrast ratio you are using is accessible.​​

​white text on a black background

light grey text on a light blue background

• Check your colors. Visitors with color blindness may have difficulty reading some websites. There are test sites you can run your web site through to see what it looks like for people with these visual issues.

​

• Transcripts for videos. Do you use screencasts or videos? Make sure you have captions or subtitles (for individuals with hearing disabilities), and provide transcripts or descriptions for individuals with visual disabilities (see link below). 

What about things you can’t fix? Reach out to your vendors and report issues that you have noticed. Reach out to your district design team and tell them about problems you have discovered. They are also responsible for the look and feel of your web site, and for all of the students and staff who access it. And remember that this is not a one-time fix! Get in the habit of checking your site on a regular basis to make sure it’s staying as accessible as possible,   

Resources and tools

An overview for Web Site Evaluation from the W3C

WAVE (Web Accessibility Evaluation Tool)

5 Website Accessibility Checkers You Need Today, from MediaCurrent 

Contrast Checker, from Web Accessibility in Mind

YouTube Automated Captioning 
 
Colorblind Web Page Filter