How to Make Your Content 508 Compliant

 

Use headings to organize the structure of your content

Headings

Headings (Page Title, Heading, Subheading, Heading 4, Heading 5, Heading 6) used correctly outline the content on the page.

Heading Levels

Page Title H1
Heading H2
SubHeading H3
Heading 4 H4
Heading 5 H5
Heading 6 H6


Proper use of Headings is required for AT to navigate the page. 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).

Page Title
 

  • Every Page must have an H1 (on your web page  this is the Page Title style)
  • Only use the Page Title once on each page.
  • The Page Title should be descriptive of the page content.

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. For an example please visit Proper Use of Headings for Content.

Use unique and descriptive link names

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:

View Monthly Newsletter
Download Spelling List
Open Homework Assignment

Use appropriate Alternative Text for images

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.

Create accessible WORD or PDF documents

Readers and Plug in’s

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 Microsoft Word and PDF sections under Technical Guidance of 508 Compliance Best Practices page.

Free PDF Accessibility Checker

The freeware program PAC provides a fast way to test the accessibility of PDF files. Please note that this is a 3rd party tool and is not supported or guaranteed by Foxbright. 

Learn more about the Free PDF Accessibility Checker PAC

Audio and Video - Transcipts/Captions

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

How to create a caption file for YouTube videos -  http://www.wikihow.com/Write-Closed-Captions-for-YouTube

Automatic Captioning

YouTube provides a resource to auto caption you 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 - https://support.google.com/youtube/answer/6373554

Using Tables in your content

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.

Food Service Department PDF DocumentSchool Improvement Plan
Library/Media Center PDF Document2014-15 Annual Education Report (AER)
Transportation PDF DocumentImportant Dates
PowerSchool PDF DocumentElementary Food Menu
Closings & Delays PDF DocumentStudent Handbook
TalkSooner.org PDF DocumentDaily Schedule
Kindergarten Enrollment Packet PDF DocumentElective Courses
Ross Park Online Apparel Store ICHAT Volunteer Form

 

If the order of content in the table matters makes sure that the content is linearized. Learn more about Layout Table Linearization 

Data Tables

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

Lab 2267 Monday Tuesday Wednesday Thursday Friday

1st Macro

 

 

 

Klunder

Klunder

2nd Macro

 

 

Erb

Erb

Erb

3rd Macro

 

 

 

Klunder

Klunder

4th Macro

Wilson

Erb

Erb

Erb

5th Macro

 

 

Erb

Erb

Erb

 

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