Educational Organizations need to put a policy and process in place to ensure the website is compliant and remains compliant.  There are essentially 2 steps to compliant content:

  1. Education and Training of Content Editors
  2. Periodic Audit and Correction/Clean-Up of Content
  • 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.

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.

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.

Lab2267 Monday Tuesday Wednesday Thursday Friday
1st Macro       Klunder Klunder
2nd Macro     Erb Erb Erb
3rd Macro       Klunder Wilson
4th Macro Wilson Erb Erb Wilson Wilson
5th Macro     Erb Erb Erb

 

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

What Foxbright Clients Say

- Blissfield Community Schools "We have used Foxbright for almost 9 years now and have had a great working relationship with them. Responses are always quick and courteous."
- Blissfield Community Schools "We recently did a redesign of our website and we are so pleased with the new web interface. Their interface is easy to use and intuitive. Foxbright continues to keep up with the trends and over the past 9 years there have been many new features and functions."
- Byron Center Public Schools "We are very happy with this organization. They are great to work with! Sharp group of professionals and always helpful."
- Grand Ledge Public Schools "Foxbright's client service is second to none!"
- Grand Ledge Public Schools "For many people, a school district's website often provides the first impression... and those are very powerful and influential. I can not imagine using a different website technology provider – I think Foxbright is tops in so many ways!"
- Kent ISD “Foxbright is a technology company that knows how to communicate, rather than a communication company that dabbles in technology.”
- Muskegon Area ISD "We been very satisfied with the quality and flexibility of Foxbright's CMS. We continue to enjoy a positive and creative partnership with Foxbright and look forward to implementing new features."
- Saline Schools "When any issue comes up, the Foxbright support team is only an email or phone call away. They always respond very quickly to the issues which wasn't our experience with our last website vendor."
- Saline Schools "The PD yesterday was awesome! The hybrid you did for us was great. It was short, quick and covered the areas we wanted to in a short time. Thank you for being flexible and rolling with our PD style yesterday. Excited to be ADA compliant."
- Southfield Public Schools "It has been a joy and a pleasure to work with Foxbright because they are such a responsive company."
- Vicksburg Community Schools "Our Head of Technology and I both marveled at how thorough, seamless, simple, and cost-efficient the site transfer process was last Fall and at how easy it is to maintain and change the site to fit our needs. Thank you for all you do to help us look good!"
- Wayland Union Schools "Our experience in working with Foxbright to create the new website was wonderful from start to finish. We finished the project under schedule and our parents, staff and community are happy with the new site."