Building ADA Compliant Web Pages

Enter an image description using the Alt Tag to provide visually impaired users with an audio description of the image.

To enter an Alt Tag using the HTML Editor, add the alt variable to the URL. Example:

<img class="img-responsive" src="//image.png" alt="Image Description"/>

You may leave the alt description blank (alt="") for images being used as decorations.

Optionally, use Image Properties to define alt text for images using the Content Manager:

A clean HTML and CSS website will often have keyboard accessibility without further work, which is a great example of why you should invest in web design and development from the outset.

Test your website to make sure you can navigate away from, as well as to, all parts of your website by keyboard only. To test your website using a keyboard only:

1. Unplug your mouse from your computer.
2. Attempt to navigate your website using your keyboard only.
3. Use the TAB key or the arrow keys to navigate the page.
4. Pressing ENTER should open a link or button on your web page.

5. Make sure no function or action on your website requires timed keystrokes – such as double tap the ENTER key within two seconds to submit.

6. Make sure your website has a sensible order when navigating from one item to the next.

Once you set the language in your template, the language will apply throughout the page. If your web page is viewed internationally or you have parts of your web page set in different languages, make sure these sections are assigned correctly. Set your website’s main language by meta tag.

Google translate is available on many VR Tower modules, allowing the page to be automatically translated for visitors.

Focus Logical Order

Fields on your page should follow a logical order. The focus (or the field the next input will be) must not automatically jump from one field to the next automatically in a form once a field is complete.

Content Logical Order

Your web page content should follow an order that makes sense to the viewer. To test this out, load your web page and navigate the page using the TAB button.

Label elements and give instructions on how to use these elements. Keep your labels simple – too much explanation can be counter-productive. Things like ‘First name’, ‘Email’ and ‘Your message’ are fine. The same goes for instructions, ‘Required fields are in red and have a * symbol’ works great. So does ‘Fill in this form and click ‘Submit’ to get in touch’.

Provide extra help by giving your contact details on all pages (the header or footer are great) and especially near forms.

Mark required fields with an icon and explain what the icon means before the form.

Users may use a variety of screen sizes. Make sure your text does not run off the page or become hidden on different size screens. A responsive web page is encouraged to ensure content stays on the page when shifting to different size screens.

For videos, include captions when speech is incorporated in the video for those who may be hearing impaired.

For videos, include audio descriptions of actions and environments within a video for those who may be visually impaired.

Use informative headings and subheadings where appropriate (a change in topic or purpose) to aid navigation through your content. Label all elements (for example, sidebar widgets, forms, search boxes, tables).

Headers can be located under the Paragraph Style drop-down in your Content Manager:

Page Titles:

Give each page on your website a unique and descriptive title. Ensure there are no blank page titles on your website by navigating to Page Settings > Page Details > Page Title.

Make sure the contrast ratio between your text and background is apparent. Achieve this by using a light background and dark text; or using a dark background and light text. Verify using WebAim’s colour contrast checker to confirm your choice.

Avoid placing an image on your page that has text on the image. If an image is required to have text, detail this text using the description and alt tag options.

Identify and explain to the user any mistakes that you can detect automatically. Add error explanation close to the error, showing what is wrong and how to fix it.

While content on your website should be updated to be ADA Complaint, it's important to also optimize any PDF's that will be made available on your website. We recommend visiting the following resources for more information.

• This Adobe user guide provides guidance on accessing Portable Document Format (PDF) documents for visually impaired users of screen reading technology. This document also includes some information on the JAWS and Window-Eyes screen reader. For more information, please visit http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf.
• Acrobat DC tools make it easy to create accessible PDFs and check the accessibility of existing PDFs. You can create PDFs to meet common accessibility standards, such as Web Content Accessibility Guidelines (WCAG) 2.0 and PDF/UA (Universal Access, or ISO 14289). For more information, please visit https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html.