Keeping Website Content ADA Compliant

• The page title is what users see in the very top bar of the web browser.
• A good web page title tells users what the page is about without needing to read more.
• This lets users quickly understand if they are on the right page.
• The Foxbright CMS automatically creates unique page titles

Headings

Use headings to organize content in logical sequence. Headings when used correctly, outline the content on the page.

Heading Levels

Heading 1 (Page Title)

Heading 2 (Heading)

Heading 3 (Subheading)

Heading 4

Heading 5

Heading 6

Proper use of Headings is required for AT to navigate the page. Break up content with subheadings (Heading 2, Heading 3, etc.) for new sections.This also allows the visitor to quickly review the content on the page. Heading styles are designed to be used in order (see example below).

Heading 1 Requirement 

• Every Page of the website must have an H1 (Heading 1 or Page Title)
• You should only use the Heading 1 once on each page.
• The Heading 1 should be descriptive of the page content.
• If your editor format drop list does not have a Heading 1, your website design has a built-in Heading 1, making you compliant.

Outline Your Content

Use Headings to indicate and organize your content structure. The screen reader will create an outline of the page content based on the heading levels. Do not use heading levels out of order (e.g. H2, H4, H3, H2) as this will cause the content to get mixed up. 

Links to Documents and Web Pages

 Unique and descriptive link names:

Make sure that the link text properly describes the link destination. Telling your reader to ‘click here’ is not descriptive, and is ineffective for a screen reader user.

Assistive technology, including screen readers, compiles a link list for the user to quickly scan all the links on the page. Using descriptive text properly explains the context of the link.

For example, if you are pointing readers to a page called “About Us”:

Avoid: “Click here to read about our district.”
Instead use: “To learn more about our District, read About Us.”

Additional Suggestions:

Monthly Newsletter
Spelling List
Homework Assignment

Images & Alternative Text

Appropriate Alternative Text (Alt attribute) must be provided for all images so screen reader users can understand the message conveyed by the images on the page. The Foxbright CMS allows the Alternative Text field to be completed whenever you insert an image on a web page. Each time you insert an image on a page, make sure to provide appropriate Alternative Text.

Alternative Text Example

The Alternative Text should contain the message and feeling being conveyed by the image, and if the image includes text, the text should be included in the alt tag as well. Complex graphics (infographics) should be accompanied by detailed text descriptions.

Decorative Images

Purely decorative images or images already described by the surrounding content can be left empty (alt=””) so the screen reader user isn’t distracted from the more important content of the page. Deleting everything from the Alternative Text field when you insert an image will create the alt=”” tag.

Images Used as Links

If an image is used as a link, make sure the Alternative Text describes the graphic and the link destination.

Extensive Guides to Alternative Text

SSA Alternative Text Guide https://www.ssa.gov/accessibility/files/SSA_Alternative_Text_Guide.pdf

WebAIM Alternative Text Basics http://webaim.org/techniques/alttext/

Animated Graphics

Animated graphics can cause the screen to flicker and should be avoided. If you must use an animated graphic or element, make sure that it does not flash at a rate between 2 and 55 cycles per second.

Readers and Plugins

If you link to a document, you must provide a link to the viewer for that document type. The most common example is a PDF file. All pages with a PDF file on them must include a link to download Acrobat Reader.  This is automatically provided by the Foxbright CMS.

We recommend all documents you upload to the website be converted to PDF format. Foxbright will provide a link on all pages to download the PDF viewer. If you use other formats such as Excel, Word, PPT, etc., you will need to add a link on the page to download the appropriate viewer.

Make sure that any document you are linking to is accessible. To learn more about creating accessible Word and PDF documents visit the Michigan State Univiersity Web Accessiblity Tutorials or Accessibility Testing for Electronic Documents.

Videos and Audio Files

Audio and Video files require captions and/or transcriptions.

Captions (video only)

Captions are a text version of the speech and sound in the video. They are displayed over the video and can be turned on or off by the video player.  

Transcripts (audio and video)

Transcripts are a written account of the audio or video and are provided in a separate file. Transcripts should contain additional descriptions, explanations, or comments that may be beneficial, such as indications of laughter or an explosion. A link to the transcript document should immediately follow the video or audio file.

Adding Captions to Your Videos

Vimeo and YouTube both provide different ways to create and add captions to your videos. There are also service providers that specialize in video captions and transcripts. Simply search “captions” and the name of the video site provider you use (Vimeo or YouTube) to find different options for adding captions.

Here are some resources to get you started.

Captions in Vimeo - https://vimeo.com/help/faq/managing-your-videos/captions-and-subtitles#how-do-i-add-caption-and-subtitle-files-to-my-videos

Captions in YouTube - https://support.google.com/youtube/answer/2734796?hl=en

Automatic Captioning

YouTube provides a resource to auto caption your video.  If you use this option, please review the captions as the voice recognition may not always be correct.  You do have the option to edit the captions to correct these errors.

YouTube Automatic Captioning Instructions

Online Captioning Tools

Foxbright does not endorse, support or guarantee the following online resources.  These resources are only provided as examples of available tools by doing simple internet searches.

HTML5 Video Caption Maker

Layout Tables

Layout tables are used to format content and do not require special tags to be accessible. A popular use of layout tables is to split a list into two columns. As long the columns don’t have titles, and it doesn’t matter what order the items are read in, nothing needs to be done to make the content accessible.

If the order of content in the table matters makes sure that the content is linearized.

Data Tables

The purpose of data tables is to present tabular information in a grid and have columns or rows showing the meaning of the information in the grid.

When using a data table, it must be marked up to include the scope or id/headers attributes. Adding headers helps the user understand the table more completely. For more complete details, visit
WebAIM's Creating Accessible Tables Guide