Web Axe - Practical Web Design Accessibility Tips

Roundup 2: Accessibility Links on Twitter

Monday, December 07, 2009

There's so many great web accessibility links in the Twittersphere that I felt compelled to do another roundup of resources.

Must Read: Quick (Accessibility) Tips (with links to blogs) from 456 Berea Street.
JAWS Ate My Tables by Jared Smith of WebAIM.
How many disabled web users are there? by Joe Dolson (6.8% of U.S. population over 15 years old!).
Google Apps now have even better support for blind users using WAI-ARIA
Mark the Date! CalWAC - California Web Accessibility Conference February 8 - 10, 2010, Santa Clara, California.
Happy 10th Birthday WebAIM! Reflections on 10 years.
How to Maintain the Accessibility of Your Site
10 Simple Web Accessibility Tips You Can Do Today (cheers for #1!)

Labels: aria, conference, google, screenreader, webaim

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

Roundup: Accessibility Links on Twitter

Monday, November 23, 2009

Here's a list of some great links relating to web accessibility going around Twitter last week.

An excellent, open, web accessibility curriculum from WaSP InterAct (@waspinteract)
Captioned Interview with Ken Harrenstein (Deaf) and T.V. Raman (Blind) both Engineers at Google.
AIR 2 Beta, Introducing Accessibility Support
Automatic captions in YouTube
Upcoming web accessibility training courses for professionals from the RNIB; 15-19 Feb 2010; Liverpool, UK.
Input for HTML5 needed: Do you find table summaries helpful?
Gov 2.0: Transparency without accessibility? Nearly 20 percent of Americans need sites such as Recovery.gov and Disability.gov to improve accessibility features.

Labels: adobe, captions, html5, news, table, twitter, video

Accessible YouTube Sites

Tuesday, November 10, 2009

There are two web accessible versions of the popular YouTube video web site, that I'm aware of at least. (If you know others, please comment.) They are "Easy YouTube" and "Accessible Interface to YouTube".

One big issue is that captioning doesn't appear to be supported on either site. I've never worked with the YouTube API (yet), but I'm assuming there are technical blockers here. (Please comment if you know more!) Flash and JavaScript are required for both sites.

Both sites have excellent markup and implement great accessibility improvements. But as with any site, more enhancements can be made. Here's a quick review each.

Easy YouTube

JavaScript expert Chris Heilmann developed this site in 2008. You can search for a video or enter the URL of a specific YouTube video. You can also choose from three video sizes. Excellent documentation and help is provided.

Suggestions:

Missing H1 tag.
Add highly visible hover/focus states on elements.
Add captioning support, if possible.
Implement ARIA.
Add video comments content.

Accessible Interface to YouTube

This is a more recent accessible YouTube interface. The author is unknown. (I'd like to know who you are as it's very well done!) The interface is very simple yet informative; it display video details and comments. ARIA is implemented, but I have not fully tested it. There's also a survey you may take to help further development.

Suggestions:

Add highly visible hover/focus states on elements.
Add captioning support, if possible.
Add controls for volume adjustment.

Labels: flash, survey, video

Free Browsers for Visual Impairment

Tuesday, November 03, 2009

I recently came across an article from disaboom called "Assistive Technology: Top 8 Free Browsers for Visual Impairment and More". The link was also popular on Twitter. But one problem, there are no links to the mentioned browser! So I went and found them:

WebbIE -accessible browser, RSS news reader and more.
EdWeb - talking web browser that can display web pages as text and symbols.
Fire Vox - Talking Browser Extension for Firefox (add-on page).
CliCk, Speak - less advanced version of Fire Vox.
Orca - speedy and powerful Gecko-based browser.
Simply Web 2000 - outdated; optimized for Internet Explorer 5.
SpeakOn -PC-based media suite program (four apps).
Thunder - package contains the WebbIE Text browser and more.

I'd like to add that Disaboom is a pretty nice site. In their words:

Disaboom is the leading resource for disability information and real-life articles about people with disabilities. Our broad range of topics, including health conditions, lifestyle, and helpful resources, help you create the life you want.

Labels: browser, firefox, visual

Colorblind, Law, and Lightboxes

Thursday, October 29, 2009

Color Sensitive

I usually shy away from About.com, but I recently came across a piece worth mentioning. In the article Are Your Web Pages Color Sensitive? from the HTML/Web Design section, Jennifer Kyrnin provides some good information and techniques for web development with color blindness in mind. Here are some good tips from Jennifer:

Don't use only color to indicate something specific on your page.
Desaturate your images to see if they still have impact.
Avoid placing red and green together.
If you can, find a color blind friend or relative to look at your site.

Did you know that color blindness is an issue with 8 to 12% of males of European origin?

Law Needed

In his blog Yes, we need accessibility laws, Eric Eggert gives an argument for why we need better laws for web accessibility. He states that a good accessibility law should do:

Create awareness.
Do not create a climate of fear.
Create mediations.
Reference international standard.
Be inclusive.

Lightboxes

In the article Lightboxes and keyboard accessibility from 456 Berea Street, Roger Johansson describes how a lightbox should function with a keyboard. He states:

Let me use the left and right arrow keys to step through images in a slideshow.
When I press Esc, close the lightbox.
Do one of the following:
- Either add focusable elements (links or buttons) for close/next/previous, put keyboard focus on the first focusable object in the lightbox, make sure I can’t tab to something behind the lightbox, and make it visually obvious which object has keyboard focus.
- or close the lightbox when I press Tab.
When the lightbox closes, return keyboard focus to where it was when I opened it.

In addition, Roger cites the following two articles:

Building a Better Lightbox by Josh Habdas.
The Trouble with Lightbox (and its Variants) by Jonathon Christopher.

Labels: color, expert, keyboard, law

Podcast #75: Jeremy Keith Interview, Google Wave

Sunday, October 18, 2009

Ross interviews web guru Jeremy Keith; Dennis and Ross discuss news, articles, and Google Wave.

Download Web Axe Episode 75 (Jeremy Keith Interview, Google Wave)

Chatter

15 Podcasts That Will Make You Smarter via Nancy White
Interviewing Martha Lane Fox about Digital Inclusion by Sandi Wassmer (@SandiWassmer)

News and Links

Obama administration unveils Recovery.gov makeover (We reviewed original Recovery.gov site in Podcast #69.)
New WebAIM Screen Reader User Survey
Accessibility Review: PetsContained.com by Joe Dolson
How Many People is Your Website Alienating? (Ross' article)

Accessibility Review of Google Wave

Google Wave Preview Accessibility Review by Jared Smith. Jared tactfully explains how web accessibility of Google Wave fails miserably. For example:

Alternative text is not provided for any images.
Background images are used to convey content.
Roles, states, and other accessibility properties are not defined.
There is no document or heading structure or semantics.
Form elements do not have labels or titles.
Keyboard focus indication is hidden, making keyboard navigation nearly impossible.
Keyboard focus is often trapped.
The application becomes unusable and unreadable when text size is increased only slightly.

Jeremy Keith Interview

Co-host Ross Johnson speaks with Jeremy Keith, Adactio.com, a web standards guru, author, and speaker. Here are some great Jeremy Keith links:

UPDATE

The podcast was originally cut off by a couple minutes at the end. It is now fixed. Full running time is about 1 hour and 12 minutes.

Labels: adobe, expert, interview, podcast, webaim

Partner Links

Podcast and blog on practical web design accessibility tips.

Current Posts

Chatter

Articles

Web Site Disasters

The Good

The Bad

Job Accommodation Network (JAN)

The Good

The Bad

The Good

The Bad

Color Sensitive

Law Needed

Lightboxes

Chatter

News and Links

Accessibility Review of Google Wave

Jeremy Keith Interview

Related Links

UPDATE

Partner Links

Like Web Axe?

Mapper on Frappr

Previous Posts

Archives

Related Sites

About the Hosts

About Dennis

About Ross

Partner Links

Footer