Simple steps to remember when editing

In order to maintain ADA compliance on your website keep the following things in check. The more you practice these the more natural they will become when editing your site.

Keep Headings Properly Nested

When adding Heading styles (h1, h2 etc.) to your text make sure that they appear in the correctly nested order.

• Heading 1 – Always appears first, there should be one on every page indicating the start of the main body of text. There should only ever be ONE h1 on a page
• Heading 2 – Appears after a heading 1- Can have multiple on a page
• Heading 3 – Appears after a heading 2 (etc.) – Can have multiple on a page

Include “Alt” text on all images

All images that appear on your site should include alternate text for screen readers. Alternate text is used to replace an image when it does not properly load to describe what appears in the image, but more importantly it’s used to describe what appears in the image to viewers who use screen-reader software to navigate websites. These users are often visually impaired and the alternative text lets them know that they have come upon an image within the content.

If an image conveys information useful for interacting with or understanding the web page content, then it needs alternative text. If an image is just decorative and people don't need to know about the image, then it should have null alt (alt=""). Be aware that during ADA scans a false negative may appear for an image missing alt text. It is best to avoid decorative images where possible, though you should not have to sacrifice design for a “perfect” ADA scan score.

Images requiring alt text:

• Images that are functional — for example, images that initiate actions (like submit buttons) and linked images (like in navigation) — need alt text that is the functional equivalent.
• If there is text in the image — for example, in a logo — that text needs to be included in the alt text.
• If the image has complex information — such as charts or graphs — the image should have a short alt text to identify the image, and then the detailed description of the information should be provided elsewhere (for example, in a data table).

The text needs to convey the same meaning as the image. That is, if someone cannot see the image, they get the important information from the image in the alternative text. It should be short and to the point. DO NOT start alternate text with “Photo of,” “Image of” or similar.

Example:

Helpful Alt Text:
“A father and mother play with their son”

Unhelpful Alt Text:
“This photo shows a father holds his son on his shoulders while the mother smiles up at the boy from a kneeling position in their living that is well lit with purple curtains”

Use Adobe Acrobat (or similar) to ensure that an uploaded PDF document is accessible.

Acrobat can convert image-text into actual text that is navigable and compliant. While PDFs may look the same to sighted-users, an inaccessible PDF will not be easily navigated by someone using screen readers or assistive tech.

Converting a PDF within Acrobat is only the first step to an accessible PDF. All of the same rules for web accessibility apply for PDFs also. Headings and tags must be included for all content, headings must be properly nested, images must include alt text and any PDF forms must be properly labeled with tab orders.

Where at all possible, HTML is preferred for ADA compliance over PDFs or other document uploads. Don’t upload documents other than PDFs unless absolutely necessary. Any time that you can communicate what you need through HTML (content on your website instead of a PDF or Word doc etc.) you should as it will be much easier to ensure accessibility for your users.

Videos and iframes Need Title Tags

Whenever you insert or embed a video or iframe into your website you should make sure that a title tag (title=”_____”) is included. This is within the html of the iframe.

<iframe allowfullscreen="" class="embed-responsive-item" title="Nimble CMS Training Video" class="embed-responsive-item" frameborder="0" height="480" src="//www.youtube.com/embed/Thyq1fqQSBM" width="640"></iframe>
 

Users with screen-readers will need this to know what the video is about before initiating.

Do not use “complex images”

Complex images contain substantial information – more than can be conveyed in a short phrase or sentence. These are typically:

• graphs and charts, including flow charts and organizational charts;
• diagrams and illustrations where the page text relies on the user being able to understand the image;
• maps showing locations or other information such as weather systems.

You can read more about Long Descriptions for complex images here:
https://www.w3.org/WAI/tutorials/images/complex/

Any time that you can convey information in HTML rather than images will make your website easier for users to navigate and make your life easier ensuring your website is as accessible as possible.

More Information

For more information and educational reading on accessibility and the web visit https://www.w3schools.com/accessibility/