Posts
Podcast #76: Web Accessibility Disasters
Tuesday, November 24, 2009
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)
Chatter
- Web Design Sketchbook give-away
- Dennis presented on Accessible Twitter at the Accessing Higher Ground conference
- TEDxDetroit - technology, education and design
- Excited about WordPress 2.9!
Articles
- W3C WAI: Web Design and Applications > Accessibility: the what, why & how of web accessibility (new site design also)
- Thoughts around universal access on mobile from Accessibility 2.0
- Universities reject Kindle DX as a textbook replacement
- Ebook Accessibility Issues Trouble OverDrive and Adobe
- Accessible Tabs in the new Yahoo Homepage - recreated with YUI3 and WAI-ARIA
- Dolphin Computer Access makes eBooks accessible
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 <ul>
- 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: <body onload="P7_ExpMenu()">
- 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 <small> 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;
}Labels: conference, podcast, review, wordpress
13 Comments:
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
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.
Another thing, just in case someone from the Rose Project reads this: if you don't like the outline, you can use another cue or use a better "removal" (which is shown for keyboard users but not for mouse ones), check this little article by Patrick H. Lauke called "Better CSS outline suppression".
Great podcast once again, guys!
I would contend that the <small> tag does have a semantic meaning, mainly, the opposite of <strong> or <em>. It can be used to denote that something is less important than its surrounding text. For example:
<h1>Hamlet, Prince of Denmark<br>
<small>A Tragedy in Five Acts</small></h1>
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 <h1>. Semantically, I don't know that there is a better tag for the job.
I'm no expert, but it seems to me having a podcast without a transcript, is an accessibility disaster in itself?
Dual disabilities not served: deafness, and A.D.D.
Bill: This is true. But I do this podcast with my own time. If you have the time or money to provide a transcript, I'll gladly post it. -Dennis
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).
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).
Good ideas. I am working on getting a copy of Dragon.
Transcript for this podcast is now available. Thank you Katherine Lynch! (Didn't have much success with Dragon thus far.)
Barnes and Noble came out with an e-reader called the Nook. It's a pretty nice device. I haven't tested it to see how accessible it is, but it's worth checking out
I see that 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.
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
<< Home