ADA Compliance

The BIG 3 Things to Remember Before Posting to the Website

1. Add text-based equivalents to pictures / graphics / videos / audio.

The words in the alt tag should be more than a description. They should provide a text equivalent of the image. In other words, the alt tag should include the same meaningful information that other users obtain by looking at the image.

Example: if there’s a picture of a middle school teacher, you’ll need to add an “alt” tag with the words “Photo of middle school teacher, Jane Smith”. This provides a meaningful description to the user.

Pictures / Graphics: all images need to include alt tags (and sometimes a long description). To see a tutorial, click here: http://www.isd518.net/add-alt-text-to-images

Videos: need to have closed captioning added or transcript posted. Here’s a link to see how to add closed captioning to your YouTube videos: https://support.google.com/youtube/answer/2734796?hl=en

Audio: all files need to have an added transcript. This can be done by creating a Word Document or a PDF and then creating a link for it to be downloaded or viewed.

Other issues:

Use long descriptions when the alt text isn’t enough to describe the image.
Linked images: instructions around images should let user know that it’s a link (or use alt text/long description if the words are in the image).
Canva/jpg images w/ text: you must post all image text as html text.

2. All documents (uploaded files) must be checked before uploading.

The best solution is to post the document as text in a text element. When this is not an option, you will need to check the document via it’s accessibly compliance checker before posting. Click here for specific document types accessibly tutorials and tools.

Other issues:

Never post an image with extensive text!
If you do, it’s imperative that you give an alt text / long description to the image, including the exact text from the image added to the text element.

3. Learn the best practices for website & document formatting.

Keep all content LEFT justified.
Don’t color your fonts (except for links, which are automatically colored).
Keep font sizes large. Stick with 12pt or 16px for standard text.
No background images (keep it solid color).
Include / link to accessibility information on your page if necessary.
Use best web standard practices

Avoid using:

Abbreviations unless they are standard (e.g. Prairie Elementary instead of PE)
Non-contrasting background colors (avoid altogether or use color checker)
Italics
Underlining (unless it’s a link, which is automatic)
Background images (use solid colors)
Tables (stack information instead)
Long slideshows or large photo galleries. You need to allow enough time for alt text to be read for each slide.

Reminder:
Return/Enter key will create a paragraph break (space between lines).

Shift+Return/Enter key will create a break (no space between lines / text will appear directly under text).

Page note: These areas are common problems when it comes to making websites ADA compliant. This is not an exhaustive list. To keep up-to-date with the current rules and regulations, visit www.ada.gov.

how to add alt text to images

How to add alt text to images