Podcast #76: Web Accessibility Disasters

Dennis and Ross review web sites which should be great in web accessibility, but fail badly. The hosts provide a lot of constructive criticism, including many fixes that can be done in a minimal amount of time. Issues are also good to discuss as a reminder for our own work.

Download Web Axe Episode 76 (Web Accessibility Disasters)

[transcript of podcast 76]

Transcription provided by Katherine Lynch, a Drupal, WordPress, and accessibility professional.

Chatter

Articles

Web Site Disasters

Digitalaccessibiliy

Company targeting Accessibility for Ontarians with Disabilities Act (AODA)

The Good
  • Almost all of the text is marked up in HTML rather than image, flash or other media.
  • Simple, clean design.
The Bad
  • No ALT text on main banner.
  • Font size tool (triple whammy).
  • Underlines not links; links not underlined.
  • Headings not marked up appropriately.
  • Menu missing
    • List not a list (see Compliance page).
    • Inline / intrusive JavaScript.
    Job Accommodation Network (JAN)

    A service provided by the U.S. Department of Labor’s Office of Disability Employment Policy (ODEP). JAN’s mission is to facilitate the employment and retention of workers with disabilities by providing employers, employment providers, people with disabilities, and family members with information on job accommodations, entrepreneurship, and related subjects.

    The Good
    • Textual navigation; no Javascript based navigation.
    • Has proper ALT text on pictures and JAN and ODEP logos.
    The Bad
    • No heading tags; some marked up with bold tag.
    • There is a summary on layout table (double whammy).
    • No skip nav or skip to link provided.
    • Inline javascript. Example:
    • Non-breaking spacing used for layout.
    The Rose Project

    Mission is to provide maternal and child healthcare to the economically poor people of Malawi, with particular reference to HIV treatment and care.

    One of nine listed for Most Accessible Website in the Irish Web Awards?

    The Good
    • XHTML; semantic, clean mark-up
    • Using headings
    • Language is defined (xml:lang=”en”)
    • SWFobject.js for unobtrusive flash embedding
    The Bad
    • When JavaScript is unavailable, Flash replacement image has broken links and placeholder text.
    • Skip links – Skip link doesn’t work?
    • ‘Find out about ways to give’ button.
    • logo missing alt text for tag line.
    • H1 headings should be H2 (such as Featured Project).
    • Some links that should be underlined, are not.
    • Use of tags not recommended.
    • Links lack the default focus effect and outline removed!
      DO NOT do this:
    :focus {
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:0;
    }

12 comments

  1. Jules

    It is funny that you pointed out the inaccessibility issues with the digitalaccessibility.ca site because it strikes a chord with me too. I work for the Province of Ontario government (the “O” in AODA refers to Ontario) and I also am an accessibility advocate (I also have a part-time job with FurtherAhead.com, you may have heard of them). You forgot to mention in your review that the site has 17 validation errors on the home page alone.

    I have struggled with our own government web master to make him understand what accessibility means and how to achieve it but he doesn’t really get it (he’d rather export from Photoshop). Furthermore, the AODA site within the government (the site you reviewed is an outside consultant, a private company) wasn’t accessible.

    What a mess this is!!

    Keep up the good work,

    Jules

  2. Gonzalo González Mora

    Regarding the bottom-border vs. decoration:underline. The former is preferred because it provides more flexibility and is more legible since the regular underline chops the descenders of letters like q, p, g, etc.

  3. Chris

    Great podcast once again, guys!

    I would contend that the tag does have a semantic meaning, mainly, the opposite of or . It can be used to denote that something is less important than its surrounding text. For example:

    Hamlet, Prince of Denmark

    A Tragedy in Five Acts

    Notice that “A Tragedy in Five Acts” isn’t the title of a separate subsection (like “Act I” would be), so it really should be part of the

    . Semantically, I don’t know that there is a better tag for the job.

  4. billcreswell

    You could use Dragon, or Windows 7 Speech Recognition to create a rough transcript in the length of time it takes to listen to the podcast. (QuickTime doesn’t show how long the podcast is – more than 5 minutes tends to go beyond my attention span).

  5. jpb

    I see that http://www.digitalaccessibility.ca now have taken down their site hand currently have a holding page that says:

    “In order for us to have walk the walk, and not just talk the talk, the website is currently under construction, fixing the errors and is going through extensive accessibility testing in order to make sure our website is compliant to the accessibility act so that we can provide you the best service in helping you make your website accessible.”

    So it hopefully you’ve had a good effect.

  6. Mr.

    In your podcast you mention that Section 508 is obsolete!!

    I am just wondering what Section 508 has been superseded by?

    Regards

    NewToAccessibility

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>