Accessible Web Sites: SortSite Error Messages

Fix: Deprecated features are HTML code that is no longer considered valid. Switch to the current version. See a list of deprecated features.

Examples

• Incorrect: <b>Bolded text.</b>
• Correct: <strong>Bolded text.</strong>

• Incorrect: <i>Emphasized with italics text.</i>
• Correct: <em>Emphasized with italics text.</em>

• Incorrect: <table cellpadding="10px">...</table>
• Correct: In the CSS th, td { padding:1rem; }

Fix: Use the default setting for Window target when you create links.

Note: Springshare automatically uses the "open in a new window" option for a number of features, including opening PDF documents. We have a script that forces links to open in the current window.

Fix: An ID should be unique and only used once on a page. This error message usually happens when people link to the same resource twice on the same page.

Fix: This happens when you use a heading tag without having used the preceding heading tags. Pages need to have an h1 tag, before h2 tags can be used; it must have an h2 tag before you can use an h3 tag, etc. In LibGuides, the page title is h1, box titles are h2. If you have text inside a box where the box title is showing, the heading you should start with is h3. If you have the box set so the box title doesn't display, you should start with the h2 tag.

Fix: Look in the HTML view of the code and remove any instances of heading tags that have no content.

• Incorrect: <h3></h3>
• Correct: Remove the <h3></h3>

Fix: Use th instead of td for table cells that are headers of the columns or headers of the rows. Note: do not use tables for layout; they should only be used to present data.

• Incorrect: <table> <caption>Shelly's Daughters</caption> <tr> <td>Name</td> <td>Age</td> <td>Birthday</td> </tr> <tr> <td>Jackie</td> <td>5</td> <td>April 5</td> </tr> <tr> <td>Beth</td> <td>8</td> <td>January 14</td> </tr> </table>
• Correct: <table class="table table-striped"> <caption>Shelly's Daughters</caption> <tr> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Birthday</th> </tr> <tr> <th scope="row">Jackie</th> <td>5</td> <td>April 5</td> </tr> <tr> <th scope="row">Beth</th> <td>8</td> <td>January 14</td> </tr> </table>

Fix: This happens a lot when elements like a YouTube video are embedded. The YouTube embed code is not ADA-compliant. You need to add a title attribute to the iframe.

YouTube Embed Example as it comes from YouTube

Fixed YouTube Example

Notice that the iframe height, width, and border settings were also switched to inline css using rems instead of pixels to correct for another ADA issue on relative sizes.

Fix: Give a brief term as a substitute for a long th in the abbr attribute.

Example

Fix: Move the link so it's around descriptive text and delete the "Click Here" text.

Fix: The font tag is deprecated. Font should be set in the CSS. Remove the font tag.

Fix: This means that there is an image that points to a file that either is not an image or is an image that has bad metadata indicating that it is not an image. There isn’t really a fix – you’ll need to find a replacement image or just delete the image.

Fix:Test the link. If it works fine, you're done. If it's broken or leads to an error message, you need to either update the URL or remove the link.

Fix: Test the link. If it works fine, you're done. If it's broken or leads to an error message, you need to either update the URL or remove the link.

Fix: Use relative sizes (like rems or percentages) instead of fixed pixel sizes. This especially applies to height, width, and font size.

Examples

• Incorrect: font-size:16px;
• Correct: font-size:1.6rem;

• Incorrect: <img style="width:96px; height:30px;" src="//libapps.s3.amazonaws.com/sites/775/include/logoLibs2.svg" alt="University Libraries" />
• Correct: <img style="width:9.6rem; height:3rem;" src="//libapps.s3.amazonaws.com/sites/775/include/logoLibs2.svg" alt="University Libraries" />