- Libraries list
- Accounts list
IMG tags must have an ALT attribute with unique text. Add an ALT attribute describing each image, which screen readers read aloud. IMG ALT text must not be the same as the image file name.
You can also use the assign an image to a Link that you've added, but make sure the alternative text field is completed.
Each FRAME and IFRAME element needs a title attribute. Without it screen readers read out the filename which is usually meaningless.
Example:
This example also uses fixed sizes for frame width and height. These should be changed to responsive sizes. For the example above that would mean removing width="560" height="315" and replacing it with style="width:56rem; height:31.5rem".
Links that have just the word “More” as the text create problems for our patrons who use screen readers to navigate our site. Typically, they use the tab key to jump from link to link as their version of skimming the page. When links are labeled vaguely or in a way that requires the user to see the context around it to make sense of the link then it makes that content inaccessible.
Unfortunately, there is an element in the LibGuides editor that kind of encourages folks to create “More” links. So I want to point it out and ask that you NOT use it. When you add a Link in the system you get an editing box like the one to the left
Note the “More Info” box. Do NOT put info in this box.
Tables should be set up to help screen readers identify key elements. A table head section identifies the column headings and a caption functions as the table title.
| Monday | Tuesday | Wednesday | Thursday | Friday | |
|---|---|---|---|---|---|
| 09:00 – 11:00 | Closed | Open | Open | Closed | Closed |
| 11:00 – 13:00 | Open | Open | Closed | Closed | Closed |
Abbreviations can be problematic for screen readers because it tries to read them as a word. Here's how to make them more clear:
Some elements of early HTML are no longer used. If these elements show up in your Rich Text / HTML fields, they need to be removed / updated:
Tags: <font> <center> <u> <i> <b>
Attributes: name target align border bgcolor cellpadding cellspacing size valign width
For a more complete list see:
Phrases in a different language need to be identified with a LANG attribute which can be added to a tag surrounding the bit of text.
| Language | Code |
|---|---|
| Italian | it |
| Spanish | es |
| German | de |
| French | fr |
Do not justify text. Justified text aligns to both the left and right margins.
Why? The spaces between words can create "rivers of white" running down the page which makes the text difficult to read for some people.
Links to PDFs need to include "PDF" inside the link so that screen readers let people know that they are about to open a PDF.
According to ADA every page that includes a link to a PDF needs to include a link to download Adobe Acrobat Reader.
Our site uses so many PDFs that a link to Acrobat Reader has been added to our footer. You do not need to add the Acrobat Reader box.
Avoid specifying a new window as the target of a link with target="_blank".
Displaying new windows without warning can be very confusing to non-sighted and mobile users. Some screen readers and mobile devices give very little indication a new tab or window has opened. If you cannot avoid displaying a new window, insert a warning into the link text like the following: "opens in a new window".
All Word, PowerPoint, and Excel files should be saved as PDFs and then tested for accessibility before being uploaded to the site.