Accessible Twitter needs your help!
Categories
Author: Dennis
Yesterday, Steve Faulkner of The Paciello Group wrote a tweet quoting an alt attribute on the Walmart.com home page. My first reaction was disbelief, frustration, and outrage.
I replied to the tweet, then found the following code (line 2421) which Steve was referencing:
The message was designed for screen reader users. But just this one line of code is so wrong on so many levels including the following.
- A spacer GIF? What is this, 1998? This is a badly outdated and poor practice.
- Alt text is too long; I suggest under 15 words. Or, include the text as part of the main page or use some kind of “D” link.
- This message was meant to be vital to the user (particularly if blind), and thus should not be stuffed in an ALT attribute.
- Many people with visual impairments may not be blind, but have “low vision”, and thus may not use a screen reader. These individuals could use a screen magnifier or simply enlarge text with their browser.
- Law: Walmart is a very large corporation providing sale of goods nationally; this means that they are a great “Target” for a lawsuit, excuse the pun! (If you don’t get the joke, read about the NFB vs. Target lawsuit.)
- The use of Flash in itself is highly debatable. One can write a book about this point, but basically, Flash requires a proprietary plug-in, usually not developed with accessibility, and is not supported on many modern user agents such as the iPhone/iPad (not to mention many others including text-only browsers).
- How does one turn off his Flash player, anyway?
Solutions
Immediate: Provide HTML alternative to content.
Better: Use accessible Flash and provide an HTML alternative to content.
Best: Use HTML only for content. Implement with web standards, progressive enhancement, and DOM scripting, to create the same visual effect as the original Flash. This will not only make your content accessible, but will also make the site lighter and faster and is also good for SEO.
Categories
Link Roundup – April 2010
- Accessible Documents in HTML, Word & PDF by @terrillthompson from the Digital Accessibility Expo.
- Open letter to to U.S. House of Representatives Committee on the Judiciary by @johnfoliot with feedback & accessible testimonies from a government hearing on digital accessibility.
- Are sprites accessible?
- Accessibility BOF (birds of a feather) Notes from DrupalCon in San Francisco.
- Cognitive Web Accessibility Assessments: Lessons Learned So Far
- Designing Accessible & Usable App UI for Mobile Phones – slides from #CSUN10 presentation by @berryaccess
- W3C update to HTML5: Techniques for providing useful text alternatives by @stevefaulkner.
- An ode to ‘Click here’ and to other phrases forcing reading back for context.
- Juicy Studio Accessibility toolbar is updated by @gezlemon. Supports ARIA, color contrast, more. (Firefox)
- U.S. Access Board’s proposed 508 & 255 standards & guidelines (Draft Information and Communication Technology (ICT) Standards and Guidelines)
- Expand and collapse content accessibly with progressive enhancement, jQuery, and ARIA
- Do I Have to Learn Programming to Make My Site Accessible? (Even Grounds)
- Slide presentations from W4A (7th International Cross-Disciplinary Conference on Web Accessibility)
- Expand and collapse content accessibly with progressive enhancement, jQuery, and ARIA.
- White House promising more attention to 508
- Do we need a new game plan to make the Web accessible? (be sure to read comments)
Categories
Adding ARIA Landmark Roles
ARIA Landmark Roles were recently added to the Web Axe web site. It’s a great and easy way to add better accessibility to your site, start learning ARIA, and future-proof your site. And it only takes a few minutes, so why not add it into your site? (If you haven’t already!)
An ARIA landmark role is simple an attribute added to a (probably) already existing tag in your site. For example, to add a search role, simple add the attribute role="search" to the tag which contains the search content (the div, fieldset, etc).
Here are some basic landmark roles with links to the W3C definitions:
- banner – usually the main header of your site; the area with logo, slogan, etc.
- complementary – supporting section of page, separate from the main content, like a sidebar.
- contentinfo – area that contains information about the site such as copyright lines and links to privacy notices (i.e. page footer).
- main – the main content; area with central topic of the web page.
- navigation – a section for navigating the site.
- search – a section with a any type of search tool.
In the following example, four landmark roles are used to create a basic page structure.
[header content]
[main content]
[footer content]
Addendum
If more than one type of role is implemented, use the aria-labelledby attribute to give each a unique name. Here’s an example from this web page which has two navigation role attributes.
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
News & Articles
- 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!
Main Segment
Testco
- 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.
Sydney For All
- Won 2009 Vision Australia award for web site accessibility.
LF Legal
- Developed by Mike Cherim
- Article on 2-year Anniversary
- Built on WordPress!