- Department of Justice to assess US government sites for Section 508 compliance
- Ten common accessibility problems from Roger Hudson
- The ADA and the Web: Concerns and Misconceptions (WebAIM)
- Slides for “Web Accessibility for Writers” from Victoria Online seminar. Excellent!
- Presenting the new Even Grounds Web #Accessibility Channel on YouTube
- Blind bargains says 3 out of 4 of blind users cannot use google audio #CAPTCHA
- Web Accessibility London Unconference, Sept 21, 2010. On Twitter at @a11yldn
- The Yahoo accessibility blog has been launched.
- Consider signing & sharing the Facebook web accessibility petition.
- 10+ Special Browsers For Visually Impaired Users
- Slides for 5 layers of web accessibility presentation by @ginader from Open Web Camp II (Slideshare)
- Cross Culture Accessibility: Web Design That Crosses Cultures
- Designing accessible icons (Part 1) from Nomensa
- PDF Accessibility video tutorials from Adobe TV
- The Beauty of Semantic Markup, Introduction by @emilylewis
- Say No To Noscript by @gezlemon.
- Experiments with language & accessibility (& Twitter) by @terrillthompson
- Joomlashack: Usability, Accessibility, Web Standards and SEO
- Slides for “Thick, Rich, and Accessible” preso by @katelynch from DrupalCamp, Chicago, June
- Test PDF files with free PDF Accessibility Checker (PAC) (Windows)
- Why Accessibility Research by Jeffrey Bigham
Below are suggestions for improving the web accessibility of the new United States government Section 508 web site. Well, from analyzing the home page at least. This is basic stuff and I’m very disappointed that the site leaves so much to be desired. The site, which is U.S. government law with rules for web accessibility, should itself be an example of an accessible web site. And with the recent ADA anniversary, this was a great opportunity to move forward in the field of web accessibility. But instead, unfortunately, this was a failed attempt. The U.S. government has a lot of work to do.
Core Issues
- No headings! Not one. Need headings in markup, period. There are many headings indicated visually, but inappropriately coded such as using strong or div tags.
- Labels for text inputs are incorrect; there’s a label tag, but no text label! See the search text and email address for news signup.
- Alternative text for many images need improvement such as removing “Graphic for”. Better yet, do not use a graphic when it’s not needed; text is fine in the following two cases. (Losing the inline style would also be good.)
- Example 1:
- Example 2:
- Example 1:
- No keyboard focus to match mouse hover effect. In addition, a hover & focus could be added in several places to make it more usable, such as the first-level items in the left/main navigation menu.
- The “AddThis” social media feature requires JavaScript and in either case is not keyboard accessible.
- No ARIA implemented, not even landmark roles to help with navigation.
- Links such as “read more >>” have no context; not unique. Also recommend removing the “>” character (better to use CSS for these types of markers/symbols).
- Text links are not clear. The underlines are removed and dark blue not distinct enough from black text.
- Poor progressive enhancement. With JavaScript off, the menu options do not fully display and the content of the slider feature is not displayed.
- Redundant title attributes must go! I’m so tired of seeing this. It’s not useful but on the contrary gets in the way; and it creates code bloat. Example:
Link Policy - The placeholder email content is confusing. The example is not even a valid email address (missing the top-level domain). The feature can be done with unobtrusive JavaScript and even use the label text, if it existed.
Other Issues
- Horizontal scrollbars in 1024 resolution. Need better resizing/width design.
- Lots of CSS in header (and inline); much better to use external file.
- The attribute language=”JavaScript” not needed in XHTML.
- Why display the date? Just adds to cluttered screen.
- Print button not needed. Just adds to cluttered screen. Requires JavaScript.
- Conditional comment for IE6 CSS should be in head, not body.
- Text resizing tool not needed; let the browser do this! And clutters screen.
- Some navigation items use lists while others do not.
- Image need better optimization/compression. One image alone in the slider feature is over 150k and can easily be compressed to 35k.
- 67 XHTML validation errors.
As you probably know, HTML5 provides a video tag for rendering a video natively in a web browser (and audio as well). But unfortunately, as of now, HTML5 video isn’t very accessible, yet.
Controls
Browser support for native HTML5 video controls varies widely. No browsers but Opera provide keyboard-accessible controls. Well, you can also start/stop with keyboard in Firefox 3.6. To make the controls keyboard-accessible calls for JavaScript. This is fairly easy to do, and is quite fun to implement for web geeks like me. But nonetheless it requires JavaScript which obviously isn’t good for devices and browsers which don’t have JavaScript available.
Note that in Firefox 3.6 and below, disabling JavaScript also disables the native video controls! To bring up a contextual menu, you must do a mouse right-click in the video.
Captions
The HTML5 spec has a great plan for captions, timed tracks. It accommodates well for different types of roles (captions, subtitles, descriptions) and multiple languages. The format of the caption text files themselves may be similar to the time stamp format WebSRT (Web Subtitle Resource Tracks). Sadly, there is no support for timed tracks in any browser at this time. The code would go inside the video tag and would look something like this:
Fortunately, in the meantime, Bruce Lawson of Opera provides a method for JavaScript HTML5 video captions. The solution uses JavaScript to grab caption text from span tags with time attributes and place the text over a video. Neat! If JavaScript is unavailable, the caption text appears below the video.
About the Codecs/Containers
Not directly related to accessibility, but let’s take a look at the supported video codec/containers of the major browsers. First off, and not surprisingly, Internet Explorer doesn’t support any HTML5 video. And the word is that IE9 will only support WebM if it’s installed on the operating system.
So to cover all major browsers today, you’ll need to encode to an OGG and MP4 file, and then do a Flash video fall-back for IE. Here’s a great table on current support codecs/containers.
| Codecs/container | IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
|---|---|---|---|---|---|---|---|
| Theora+Vorbis+Ogg | · | 3.5+ | · | 5.0+ | 10.5+ | · | · |
| H.264+AAC+MP4 | · | · | 3.0+ | 5.0+ | · | 3.0+ | 2.0+ |
| WebM | 9* | 4 | · | 5.0+ | 10.6+ | · | · |
It appears WebM will be the codec of the future, but again, it is only partially supported at this time.
Related links
Categories
Link Roundup – June 2010
- Simple Free Online Caption Creator for YouTube Videos
- Australian Government releases Web Accessibility National Transition Strategy
- Open Web Camp 2010 at Stanford University, Palo Alto, California, July 17 (Free)
- Assistive Technology Conference in Indianapolis, Indiana, July 29-30 (Free)
- Online version of book Just Ask: Integrating Accessibility Throughout Design
- 50+ Reasons to Use VoiceOver (from Apple)
- AJAX and the Problem of Web Accessibility by @JoeDolson
- HTML5: Techniques for providing useful text alternatives (W3C)
- How NOT to use the HTML title attribute by @ianpouncey (from January)
- Forthcoming Updates on Federal Section 508 Rules by @JoeDolson
- Chrome explains its partial screen reader support
- Princeton University and learning disabled student settle suit
- Blind students sue four California law schools over inaccessible online applications
- What AT devices announce when encountering ARIA roles
- AViewer beta – new accessibility checker tool from The Paciello Group
- Making JavaScript Accessible slides presented by @dennisl at Bayjax meetup
- How to get started on Twitter with JAWS – CNIB blog by @mcourcel
- Examples of Inaccessible Web Design
- Sign petition for Google to make Chrome screen reader accessible
- Features of a Cognitively Accessible Web Site
- How to Use HTML, CSS and JavaScript in an Accessible Manner
- Web Accessibility and WAI-ARIA Primer by @emilylewis
- Writing text alternatives for maps
- Future Web Accessibility: SVG from WebAIM
- List of Twitter clients for persons with disabilities
- U.S. Departments of Justice and Education tell college/university presidents that required electronic book readers must be accessible
Dennis and Ross speak to Dylan Barrell (VP, Product Development) and Brian Kerr (Software Developer) of Deque Systems/Deque Labs. The main topic is the newly developed Worldspace FireEyes plugin for the Firefox browser which is being released in Beta status. It is a web accessibility tool that works in conjunction with the widely used Firebug Firefox extension. You can follow Deque Labs on Twitter.
Download Web Axe Episode 82 (Deque Labs FireEyes)
NOTE: As of June 28, the Worldspace FireEyes add-on has not yet been released. It’s planned for end of June.
UPDATE: On July 1, the Worldspace FireEyes beta is released! Read the FireEyes announcement.
Chatter & News
- Refresh Detroit: Drupal Meetup Summary
- Dennis Lembree presented “Making JavaScript Accessible” at the Bay Area Ajax and JavaScript Meetup (BayJax) June 15, 2010 at the Yahoo! campus in Sunnyvale, California.
- Sign the online petition for screen reader accessibility for Google Chrome.
- Critiquing CA.gov Web Site Accessibility Page
- Dennis will be speaking at the Annual Assistive Technology Conference July 29 & 30, Indianapolis, Indiana, U.S.A.
- Accessibility Viewer Application Beta “AViewer” from The Paciello Group; Blog on AViewer from Joe Dolson; ARIA, DOM
- How Government sites have and now use Skip Links
- Whitehouse.gov improving their accessibility