Web Axe - Practical Web Design Accessibility Tips - Podcast and Blog
Link Roundup - August 2010
- HTML5 Issue: Longdesc Retention (W3C wiki)
- Raakt - The Ruby Accessibility Analysis Kit
- Accessible ARIA Tabs by @jkiss
- UStream videos from Montreal accessibility conference (#a11yMTL)
- Developing an Accessible Star Ratings Widget (YUI blog)
- Report Finds Five U.S. State Benefits' Websites Inaccessible (COAT)
- Ten tools to help test website accessibility
- Accessibility in Online Teaching - a great starting point
- How the Blind See the Internet (Gizmodo)
- Using NVDA screen reader to Evaluate Web Accessibility (WebAIM)
- Creating Your Own Accessible HTML5 Media Player by @terrillthompson
- Accessing Nav Drop-Downs
- Preparing InDesign Files for Accessibility (Adobe TV)
- Access Key Replacement (W3C wiki)
- CSSquirrel demos longdesc attribute in non-visual comic Alone In The Pitch Black Dark
- Accessibility Camp DC registration is open; event is October 9 at MLK Library
- YUI Theater: Accessibility on the Yahoo Homepage
- College Web Pages Are 'Widely Inaccessible' to People With Disabilities
- Web accessibility for cognitive disabilities and learning difficulties (Opera)
- Silverlight Accessibility Overview (Microsoft)
- Twitter and Web Accessibility presentation from INDATA Conference by @dennisl
- Caption any 5-minute YouTube video for $5
- Great list of free screen readers
- Video about Yahoo's Accessibility Lab featuring Alan Brightman
Accessibility in .Net Mag Awards
On October 20, nominations for each category will be reduced to three. A panel of over 100 judges will choose the final winners and will be announced on November 19.
Podcast #83: Fate of Longdesc in HTML5
What's the fate of the "longdesc" attribute in HTML5? Can or should the "aria-labelledby" ARIA attribute replace it? These are some of the controversial issues discussed by Dennis and guests John Foliot (@johnfoliot), Everett Zufelt (@ezufelt), and Joe Dolson (@joedolson).
Related LinksNo to Text Resize Widgets
Is it time to scrap text resize widgets and teach people how to resize text http://bit.ly/94jNkvI totally agree. Say no to text resize widgets. To enlarge text for users, the browser should be used (many reasons below). See this video from OpenConcept on how to text-resize in your browser.
Gifford's tweet references an article on the subject from almost 3 years ago, Scrap text resize widgets and teach people how to resize text from 456 Berea St. This site had also blogged about the topic a while back in Don't Use Text Resizing Widgets.
Keep in mind is the issue of misinformation. For example, the very recent article A quick Web Accessibility Checklist actually encourages the use of text resize widgets, or in their words a "Font re-size option".
Gifford's tweet sparked many responses with many very good points, which all support why not to implement text-resizing tools on a website. I've summarized some reasons from very respectable professionals including @v, @alxp, @johnfoliot, and @ppatel. (Bonus! See slide 12 of Web Accessibility Gone Wild by WebAIM which also discourages the use.)
- Implementers need to stop setting font to 80% (or lower!) in the default CSS.
- Text resize widgets only add another layer of complexity on top.
- Text resize widgets don't resize text in images.
- Text resize widgets are site-specific. There's no standard; each site implements differently.
- Text resize widgets causes confusion, clutters up the interface.
- Text resizing is the responsibility of browser; browsers should do this natively. Browsers need a better way to expose this functionality to the user.
- Users who regularly need larger text have figured this out already on all the sites that lack such a widget.
- Interface design is not graphic design. Tyrannical control over font size & colors in UI is doing a huge disservice to users.
- Text resize widgets make the author feel like they are doing good, but only solve problems created by the designer/developer in first place.
- Not many users I've spoken to (@ppatel) use the widgets.
Link Roundup - July 2010
- 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
Critique - New Section 508 Web Site
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:
<img style="border:0" src="/images/508questions.jpg" alt="Graphic for how do I get my 508 questions answered"> - Example 2:
<img alt="Graphic for An Official Website of the United States Government" src="/images/official-website.jpg" style="border: 0pt none;">
- 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: <a href="http://www.blogger.com/..." title="Link Policy">Link Policy</a>
- 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.
- 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.
Podcast #82: Deque Labs FireEyes
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
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
Podcast #81: HTML5 and John Foliot
HTML5 is hot. It's new, powerful, and exciting. But what is it exactly, and how will it make the web more accessible? Dennis discusses these issues and more with web accessibility veteran John Foliot. Topics include background on HTML5, browser support, new form functionality, how Canvas can be accessible, and much more!
Mr. Foliot runs the Stanford Online Accessibility Program. He is an active member of the W3C and is an integral part of the web accessibility community. He writes a blog entitled Unrepentant and you can find John on Twitter.
Download Web Axe Episode 81 (HTML5 and John Foliot)
Mentioned Resources- HTML: The Markup Language
- HTML5 differences from HTML4
- HTML5 Doctor
- Bruce Lawson
- Remy Sharp
- Dive Into HTML5
- Book: Introducing HTML5 by Bruce Lawson and Remy Sharp (there's also HTML5 For Web Designers by Jeremy Keith)
BayJax Presentation "Making JavaScript Accessible"
Web Axe host 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.
- Making JavaScript Accessible slides on SlideShare
- Making JavaScript Accessible text version
- BayJax Flickr photo album
Dennis was honored to be invited as a replacement for Dirk Ginader, who sadly couldn't make it due to a family emergency.
Making JavaScript AccessibleView more presentations from Web Axe.The CA.gov Web Site Accessibility Page
The accessibility page of the State of California web site lists many claims on what makes their web site accessible. Frankly, I'm pretty embarrassed for this state is which I live; nearly all of the bulleted items have major web accessibility mistakes and flaws. Let's take a look. (All of the assessments were made from referencing only the one accessibility page.)
- Clean, Simple and Consistent
- This is true. Although it's consistently inaccessible, as we'll see.
- "Skip To:" Menu
- Skip nav is good, but it's not visually displayed, not even when tabbed upon. This is a major issue for sighted keyboard users. Also, the skip link lands the user before the breadcrumbs; it should go past the breadcrumbs since the object is to pass over all the navigation to the main content.
- The Navigation
- The main menu requires a mouse to access the second level of items, therefore, it's not keyboard accessible. What's worse is that the second level links are not listed on the main page of parent menu item! In other words, there's no fallback.
- Breadcrumb Navigation
- Breadcrumbs are a good idea, but first of all, they require JavaScript [on this site's implementation which is unnecessary; a server-side solution is ideal]. And, there is no semantic markup or a heading denoting what this section is. Also, it's better practice to markup the breadcrumb links in an unordered list.
- Images With Alternative Text
- Wow, I didn't know that alt text is "visible when the mouse is placed over the image"! LOL, that's just silly IE. (It's the title attribute which is rendered as a tooltip in most browsers.) Also, say no to alt="bullet", yuck!
- Relative Font Sizing
- This doesn't work when the text is a graphic! A graphic doesn't increase when text size increased. See "Popular Pages". Note that graphic text will increase in size with page zoom, but then may be very pixelated and unreadable.
- Style Sheets
- What? The second paragraph is instructing the user to install a developer toolbar!
- Fluid Sizing Display
- Says "viewed best at a minimum of 800 x 600 pixels" but the web page doesn't fit in that screen resolution! There's a nasty horizontal scrollbar. So I took a better look and there is no fluid sizing. The CSS is clearly static: width:972px;
- Accessible Via Mouse or Keyboard
- Uh, no, see reasons above.
- Access Keys
- Implementing access keys is an outdated practice and get in the way of assistive technology. But the site has implemented only 1 anyway. Just silly. Draw your own conclusions here.
- No Sound, No Images, No Problem
- Lies I tell you!
- Improved Search Engine
- This is more of a usability issue.
Although there's clearly a lot of effect here, it's almost worse off than no effort at all. Sticking with semantic markup and unobtrusive JavaScript in itself may have been a better start.
AddendumThe CA.gov Accessibility Page Updated!
Today, just 3 working days after my critique of the CA.gov Accessibility page was published, the CA.gov Accessibility page has been updated! Some of the point discussed were removed and other modified. As for the site itself, the "skip to content" is now visible when tabbed upon. Hooray!
Also, a couple of interesting links were added to the "related sites" at the bottom of the page: Accessible Twitter and California's Accessibility Standards.
Link Roundup - May 2010
- Do Your Flashing Ads Cause Seizures?
- FAQ on software development for the blind or visually impaired
- Why You Should Adopt An Accessible Content Strategy (business case for accessibility)
- 4 Easy Steps to Make Your Site More Usable (and accessible) to Older People
- Program to help locate screen cursor: PinPoint 3 "Never Lose Your Mouse Again"
- Use ARIA to Indicate When Form Fields Are Required
- Google Slaps People with Disabilities in the Face
- Kill Accessibility (great comments)
- Test cases with HTML5, ARIA Roles & Screen Readers
- What are your favorite accessibility & UX blogs?
- HTML5: Techniques for providing useful text alternatives
- Next accessibility unconference is A11yCamp, Guelph, Canada, June 8
- Text CAPTCHA service - alternative to image or audio CAPTCHAs
- The new GNU accessibility statement
- iPad Assistive Technology Roundup
- Slides from Access U presentation HTML5 & Accessibility
- NFB files complaints against 9 law schools for inaccessible web site
- Importance of HTML Headings for Accessibility
- Future Web Accessibility: HTML5 Semantic Elements (Part 2 in a series)
- A few problems with the concept of accessible PDFs
- Do we need a new game plan to make the Web accessible? (great comments)
Podcast #80: Web Accessibility Successes
Dennis and Ross review a few excellent web sites. Each provides great accessibility as well as being standards-compliant.
Download Web Axe Episode 80 (Web Accessibility Successes)
Announcements- Ross' relaunch of 3.7 Designs
- Assistive Technology Boogie (Flash) by Inclusive Technologies
- Volunteers/donations wanted for transcribing Web Axe podcasts
- CSUN was great! A few of the many folks Dennis met and hung out with:
- Future Midwest Detroit
- iPad releases — accessibility
- HTML5 + Quake
- Canvas element is powerful, also huge accessibility concern
- When ever you use :hover, also use :focus
- Microsoft offers UK users a choice in browser
- Hat tip to all the techie 2010 April Fools Day jokers!
- In 2001, a new easy-access version of Tesco.com was launched, making the online shopping service available to a higher number of customers. In 2002-3, the web-based business made a profit of £12.2 million, more than 30 times that made in the previous year.
- Reference: 3 case studies on Universal Design.
- Won 2009 Vision Australia award for web site accessibility.
- Developed by Mike Cherim
- Article on 2-year Anniversary
- Built on WordPress!