ADA Compliance: ADA Compliance Details

Accessibility, according to the ADA and OCR, is one of the biggest challenges to managing an educational website. To help you understand these standards and how to abide by them, we have compiled this article to keep your websites compliant by focusing on the five most applicable sections: Alt Text, Contrast Ratios, Tables & Headings, Audio/Video content, and Broken Links.

Overview: There are presently two sets of standards that dictate accessibility compliance. One is WCAG 2.0 (AA guidelines) and the other is Section 508. We will be doing our best to keep up with these evolving sets of standards, and make sure the SchoolBlocks platform is compliant. Website content, however, is entirely managed by the webmasters and contributors. It is suggested that these guidelines be followed when adding or managing content anywhere on the website:

Alt Text

All images, graphics, form image buttons, or linked images must have equivalent alternative text (alt text). These descriptions are picked up by a screen reader and allow visually-challenged users to experience all the image content available on the website.

Message Block: When adding images or graphics to a message block, use the required “Alt Text” field to enter a short description of the image and the purpose of posting it on the website. If the image contains text, make sure the alt text contains the same information as the image.

Files Block: Occasionally image content is linked from Google Drive or OneDrive. Use the “title” of the files block to add a description of the image and/or the purpose of posting it on the website. Documents with images can be supplemented with alt text right in the document! See the google doc guidelines for more info

Contrast Ratios

This standard is much harder to nail down to specific do’s and don’ts, the compliance standard reads: “Text and images of text should have a contrast ratio of at least 4.5:1. Large text (over 18 point or 14 point bold) should have a contrast ratio of at least 3:1”. These numbers might not mean a lot to someone who has never tested contrast ratios, but the basics have been explained below:

Large Text: Anything over 18 font (14 bold) must be 3 times lighter/darker than what is behind the text. Make sure your text is dark, and the background is kept light, or vise-versa. (page block).
Regular Text: For anything that isn’t Large Text, your text must be 4.5 times lighter/darker than the immediate background. Make sure you pick the darkest colors for text if your background is light in color/shade, or vice-versa. (page block).

In most areas the color choices a user make for the appearance of their site are automatically tested and results are shown to immediately, letting the user know when a compliant color scheme exists. To determine the actual ratio, copy the colors’ hex codes and enter them into THIS TOOL to determine the exact value.

Tables & Headings

If you include any data in tables on the website, they must have header and row identifiers to display information or data, do not use tables to format a page, rather use tables specifically for the presentation of data. Data table captions and summaries should be used where appropriate to help a person using a screen reader understand the information in the table. Headings should always be appropriately nested, starting with Heading 1 and then using Heading 2 for subheadings etc. At the very least, your page blocks should have a primary title formatted as Heading 1. These elements are built into the page block so be careful to not modify the snippets to much to leave empty headings! Read about the Importance of HTML Headings.

This one is very easy to follow, regardless of the block-type being used on the website. Anytime you include a table or descriptive content, make sure all columns and rows have labels, that the entire table/page has a heading, and include a summary of the data and the purpose of posting it to the website using appropriate sub-headings. This is most commonly encountered in the Page block and Files block (documents linked to the website).

Audio/Video Content

Any video-content must have closed captioning for web-based video (YouTube, Vimeo, SchoolTube, etc.), and provide descriptive text transcript for web-based audio (audio podcasts, MP3 files, etc.). This one is more about checking the content before you post rather than HOW you post the video.

Video Content: Before you link any videos from the internet (Youtube, Vimeo, Schooltube,etc) to the website, first make sure that the video has a “CC” (closed captioning) option in the settings. This ensures hearing-challenged viewers can still experience the video content on the website.
Audio Content: Occasionally, audio content will be posted to the website as well. This content must be supplemented with descriptive text and a written transcript of all of the content in the audio clip. NOTE: When posting homemade videos to the website, it is recommended that the user add closed captioning via an editing program, or tools available through video-hosting websites like Youtube/Vimeo.

Broken Links

To ensure all users can manage coherent navigation throughout the site, your content must be free of broken links. Whether these links point to other pages on SchoolBlocks, or external websites, changes in the URL’s of these links can result in a ‘broken link’ from the user’s perspective. Make sure to test links on your pages over time, to ensure your users experience a logical progression of content moving through the site.

Conclusion: Following the aforementioned guidelines will help your pages remain compliant, please make sure to pass this information around as much as possible, and assist others when you see non-compliant content posted to the website. Keeping the website compliant is a team effort, feel free to read more about the specifics of the compliance standards in these articles for WCAG 2.0 and Section 508.