Web accessibility is an important technique to ensure that our websites are usable by everyone in our audiences. This page describes some of the aspects of web accessibility that our site editors should focus on and how to correct pages that are not yet accessible.
Tools
SiteImprove scans our sites each week and checks that we’re in compliance with several web accessibility guidelines. Review the SiteImprove documentation Reviewing Potential Issues and Key Accessibility Features, which include guided videos, to understand how to use this service.
We have tagged web accessibility issues that our editors can help resolve:
Additional Help
We have put together a Lynda.com playlist on Web Accessibility for Middlebury with about 50 minutes of video material covering accessibility principles for links, images, and tables. These are the most common issues that editors of our sites can help resolve.
It is likely that you will run into accessibility issues on our sites that you are not able to resolve with the editing tools you have. If you find one of these, please let us know by creating a Drupal Issue ticket in Web Helpdesk describing the problem. Please include a link to an example of a page where it occurs. It is not necessary to create a new ticket for every page, one for each type of issue is sufficient.
Common Issues
| Issue |
Description |
How to Fix |
| The link text is not sufficient |
The link text is generic text that does not identify the link purpose. The link does not seem to have any programmatically determined link context that can aid in identifying the purpose either. |
Link texts should be written so they make sense out of context. Generic texts such as “Click here” and “More” give no indication as to the destination of the links. |
| Image link has no alternative text |
The image link is missing an alternative text stating the purpose of the link. |
If for instance it links to a web page, state the topic of that page. |
| The heading is missing text |
An empty heading occurs. |
The tag for the heading is present, but there is no text in the tag. |
| Alternative text for the image is a file name |
|
The alternative text for an image must reflect the purpose of the image and not contain the image file name. (The problem often occurs with auto-generated alternative texts). The alternative text is used by a screen reader to read aloud the purpose of the image for a visually impaired user. A file name is rarely of use, as everything is read out, including underscore and slash. |
| The image does not have the correct alternative text |
The image does not have an alt text which indicates that the image is used for decorative purposes. At the same time there is a mouse over text (title attribute) present on the image. |
If the image requires a description there should be an alt text. If not there should be neither alt text nor mouse over text for the image. |
| The table does not have a description |
If the data table has a description or instructions connected, use the correct markup to make this evident. |
If the table has a description/heading, use the ‘caption’ element. If the table is complex, use the ‘summary’ attribute to give screen reader users an overview. |
| Providing table heading association |
Check if the table is a simple data table or a more complex table. |
Simple data tables with one row or column of headings only need table headings defined (th). When data tables have a complex structure the ‘scope’ attribute can be used to identify whether a cell is a header for a row, column, or group of rows or columns. If not using scope for complex data tables, use the ‘headers’ attribute for association between cells and table headings (th ID). |
Additionally, all audio and video elements should have a text alternative, such as a transcript, closed, or open captions.