Menu  Audio Description Project

 

Skip Navigation
ACB Logo and Home Page link Separator ADP Logo and Home Page link Description of the ADP and ACB Logos



The Audio Description Project

Accessibility of this Website

This website is designed to conform with standard coding conventions which make everything on the site accessible to Screen Readers used by people who are blind to read website content.  Also, a larger font and carefully chosen contrasting colors are intended to help people with low vision see the site content better.  Options (to the right) allow users to change the fonts to suit their individual needs.

It is the intent of the site developer to make this website conform with the standards for government websites known as Section 508 in addition to the standards of the World Wide Web Consortium (W3C).  (See Audio Description and Section 508 of the Rehabilitation Act, ADA Conference July 14, 2015.)  Individual pages are tested against these standards periodically.  Any feedback regarding assessibility problems is encouraged (use the Webmaster link at the bottom of any page).

Change Website Fonts





NOTES: 

  • Your selections above should be reflected throughout this website and remembered from session to session, until and unless you delete "cookies."
  • Not all browsers let you change fonts, though most of the major ones do.

Notes for Blind Users and Web Developers

Each page on this site begins with an invisible link labeled "Skip Navigation."  This allows Screen Reader users to skip the heading and navigation links on each page and skip directly to content.  To make the link invisible to sighted users, we ask the browser to place the text outside the visible area.  This is implemented as follows:

<a class="offscreen" href="#pagebody">Skip Navigation</a>

The label "pagebody" is defined later right in front of the first words in the content area.  To supplement this code, the class "offscreen" is defined as follows in the website CSS:

.offscreen { /* Force some text or html function out of the visible window */
display: block;
position: absolute;
top: -9999px;
left: -9999px;
}

Each page has its content divided up by using HTML "heading" tags (e.g., H2, H3, H4).  This allows screen reader users to list the headings and jump to the desired one without reading all intervening content.

During the rollout of this website, a blind user asked if we could provide a description of the ADP logo.  This turned out to be a lot more complicated than it seems!  The following information is provided primarily for web developers, but the second part may be of interest to audio describers.

The first problems were technical in nature.  The standard way to identify an image for users of Screen Readers is via the Alt tag as part of the image definition. 

<img src="images/adplogo.gif" alt="ADP Logo" height="100" width="100" />

The intent is to provide a brief description of any image present on the page.  So for our logo, we used the Alt tag, "ADP Logo."  When we were asked to provide a description of the ADP logo, we were challenged as to how to implement this for the following reasons:

  1. Putting the description in the Alt tag meant that the description would be read over and over, every time a user brought up  a new page.  Not a good idea.  Keep Alt as short as possible, yet meaningful.
  2. Using the mechanism provided for lengthy descriptions (a tag called appropriately enough Longdesc) would have worked fine were it not for the fact that we also follow a standard web page coding convention of allowing sighted users to click on our logo to return to the home page of our website.  In other words, the image was also coded with a link.  The implementation of Longdesc is in direct conflict with such a convention, as both cause a jump to a new page, with the outer link taking precedence.  (The operand of Longdesc is a separate page address, just like a link.  When a Screen Reader encounters a Longdesc, it speaks something like "Press Enter to access the long description.")  Note that Longdesc is rarely used, often used incorrectly, and will be forbidden in HTML5, according to Wikipedia.
  3. Some developers put the capital letter D after an image to use to jump to a lengthy description, but this convention is awkward in appearance and not obvious to the end user.
  4. The Title tag is only useful to sighted users, as it pops up text briefly when one hovers the cursor over a link.

So ultimately we decided to code a separate link to the description, and make it invisible, just like the Skip Navigation link, so only Screen Reader users would be aware of it, and it wouldn't take up valuable real estate on the screen for sighted users.

Now here's the part that is interesting to audio describers.  After carefully writing the description of the logo and asking a Screen Reader user to test it, she informed us that she didn't understand several of the concepts expressed in the description, including "concentric circles" and "sound waves."  This is where we forget that people who are congenitally blind, versus adventitiously blind later in life, cannot understand some representations that most of us take for granted!  It was a wonderful wakeup call and reminder.  So we worked to reword the description in terms she could agree she understood.

To read what Screen Reader users hear, follow this link to the descriptions of the ADP and ACB logos.