Web Axe - Practical Web Design Accessibility Tips - Podcast and Blog
Practical web design accessibility tips. Podcast and blog with tips and techniques for creating accessible web sites.
Accessible YouTube Sites 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.
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.
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.
Free Browsers for Visual Impairment 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.
Colorblind, Law, and Lightboxes
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:
Podcast #75: Jeremy Keith Interview, Google Wave 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
News and Links
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:
Related 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.
