zomigi.com » accessibility http://zomigi.com The professional blog of Zoe Mickley Gillenwater Wed, 23 Nov 2011 13:48:18 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Web accessibility presentation and resources http://zomigi.com/blog/web-accessibility-presentation-resources/ http://zomigi.com/blog/web-accessibility-presentation-resources/#comments Tue, 15 Nov 2011 17:15:03 +0000 Zoe Gillenwater http://zomigi.com/?p=607 Yesterday I had the pleasure of speaking at a meeting of the Charlotte User Experience group. I talked about the basics of web accessibility: what it is, who it affects, why it matters, and some of the fundamental things you ought to be doing in your pages to make them more accessible.

You can view the slides on SlideShare, or download the slides here:

Web Accessibility (PDF, 2 mb)

Here are several links to related resources, some of which are in the slides plus many that were not but which I recommend and think you’ll find useful.

Top sites on accessibility

These are my favorite sites to read to learn accessibility techniques and news on developments in technology like HTML5 and screen readers. I highly recommend subscribing to the RSS feeds of these.

WCAG 2.0

WAI-ARIA

HTML5 and accessibility

CSS and accessibility

Creating accessible content

Screen readers

Related Posts:

]]> http://zomigi.com/blog/web-accessibility-presentation-resources/feed/ 0 Videos of screen readers using ARIA, updated http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/ http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/#comments Mon, 17 Oct 2011 19:36:29 +0000 Zoe Gillenwater http://zomigi.com/?p=576 My previous post “Videos of screen readers using ARIA” needed a good updating: I’d found several more applicable videos and some of the original videos had disappeared from the web, leaving the links to them broken. This article includes all the content from that original post that’s still online plus all the new stuff I’ve found, organized by topic this time.

I’ve been doing a lot of investigation into WAI-ARIA for work recently, mainly revolving around educating other developers. I’ve found a lot of great demos of pages and widgets that use ARIA, but not too many videos of screen readers using said widgets. This is a shame, because it’s often hard to understand the impact of ARIA without hearing how a screen reader announces the content both without and with ARIA in place, and not many people have or know how to use screen readers. I can certainly show developers who are accessibility-newbies the ARIA demos, but their accessibility benefits aren’t that clear without a recording of a screen reader using them and their non-ARIA counterparts.

Nevertheless, I was able to find a few videos of screen readers using ARIA-enhanced widgets, as well as other uses of ARIA, and I wanted to share the links here. I’m willing to bet there are more out there—it’s just hard to find them, since simply searching for “aria” on YouTube will get you a bunch of videos of people singing opera, not screen readers! So if you know of others, please let us know in the comments.

Live regions

This video, though longer than it needs to be, is great because it shows a page without and then with ARIA live regions enabled, as well as the difference between “polite” and “rude” notifications.

Here’s a less clear but much shorter demo of live regions. Every time text is added to the log text box, the entire contents of the box are read out by the screen reader automatically:

And here’s the shortest of them all: a demo of how a screen reader would announce how many characters are remaining for your Tweet when typing one on Twitter—if Twitter were to actually implement live regions:

[Update 10/21/11] Another practical example of how to put live regions to use, this time on Yahoo!’s site for real. The video doesn’t mention ARIA live regions explicitly, but that’s how they’re getting the search results suggestions to be read out automatically.

Landmark roles

Lucica Ibanescu tested a page with and without ARIA landmark roles and recorded NVDA, JAWS, and Window-Eyes using both versions. Here’s the version with the ARIA landmarks:

Here’s how the landmarks on Flickr’s site are read:

Nomensa has a nice, simple demo of how landmarks are read on their own site:

Widgets

Aaron Gustafson has a video of his great TabInterface tabs widget being read by NVDA.

The Yahoo! User Interface (YUI) Library used to have video demos of all their ARIA-enhanced widgets online, but for some reason they’ve disappeared. However, I found someone else’s recording of YUI’s drop-down menu widget, seen here being read by NVDA:

You can also see how JAWS reads this menu. This same person posted a video of a different Yahoo drop-down menu widget that doesn’t use ARIA, so you can compare the two experiences with and without ARIA.

Similarly, here’s the ARIA version of YUI’s tabs:

Compare this to the experience with the older YUI tabs that don’t use ARIA.

Miscellaneous

Here’s a video of an extremely simple but very helpful use of ARIA: adding aria-describedby to “more” links so that the text that’s read out for each makes more sense out of context, such as when tabbing through the page or reading a list of links by themselves.

Here’s how the same page sounded before using aria-describedby:

You can see the code that produced this change in the article Easy Fixes to Common Accessibility Problems by Todd Kloots on the Yahoo! Accessibility blog.

Another quick and useful ARIA trick involves using aria-labelledby to label a form text field with the content of a select field rather than the label element, as seen here:

The code for this is fully described in the article “Create Dynamic Form Labels with ARIA” by Ted Drake on the Yahoo! Accessibility blog.

Here’s another video from Yahoo! showing how to use role="img" and aria-label to make a CSS background image be treated like a foreground image by a screen reader:

Any more?

If you know of any other videos of screen readers using ARIA-enhanced pages, please let me know in the comments. I’ll update this page with any videos you share plus new ones that come out over time that I happen to stumble across.

Related Posts:

]]> http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/feed/ 8 A few links: CSS and accessibility http://zomigi.com/blog/a-few-links-css-and-accessibility/ http://zomigi.com/blog/a-few-links-css-and-accessibility/#comments Fri, 14 Oct 2011 16:11:07 +0000 Zoe Gillenwater http://zomigi.com/?p=571 The blog 456 Berea Street by Roger Johansson is one of my favorite sites for useful information on web standards topics presented in a really clearly written and succinct way. He’s had some great articles recently related to the intersection of CSS and accessibility that I thought were worth sharing.

“Screen readers, list items and list-style:none“

Roger found that some screen readers won’t announce list items if list-style:none is set on the list. (They will announce the list as a whole, just not the individual list items.) This very common bit of CSS visually represses the list markers, of course, but (probably?) shouldn’t change the spoken output. Unfortunately, this falls squarely into the “good to know, but what do you want me to do about it?” camp. Just keep it in mind, and hopefully the offending screen readers will fix this behavior soon.

“Using display:table has semantic effects in some screen readers“

Same sort of thing, only with display:table. NVDA in Firefox as well as the ORCA screen reader incorrectly announce elements that you’ve set to display:table as actual, semantic tables. This might be an area where you do have other options than using display:table (as opposed to list-style:none, where there are no alternatives if you don’t want markers), so this screen reader quirk is a little more helpful to know. I wouldn’t consider this a deal-breaker, but if you can easily avoid it, I say why not? If you can’t really avoid it, I wouldn’t sweat it, but again, keep it in mind.

“Styling button elements to look like links“

This is a useful CSS snippet for when you want something to look like a link (plain text) but act like a button (initiate an action other than taking someone to a new page). Roger points out, of course, that it would be better if the design were changed so that things that act like buttons look like buttons, but this is a good option when you can’t convince those darn designers to change things! (I’m allowed to jokingly complain about designers since I am one.)

Related Posts:

]]> http://zomigi.com/blog/a-few-links-css-and-accessibility/feed/ 1 Videos of screen readers using ARIA http://zomigi.com/blog/videos-of-screen-readers-using-aria/ http://zomigi.com/blog/videos-of-screen-readers-using-aria/#comments Mon, 07 Feb 2011 19:50:43 +0000 Zoe Gillenwater http://zomigi.com/?p=502 Note: This article is out of date. The new post “Videos of screen readers using ARIA, updated” contains all the original content that is still relevant plus new content that’s arisen since this piece was written.

I’ve been doing a lot of investigation into WAI-ARIA for work recently, mainly revolving around educating other developers. I’ve found a lot of great demos of pages and widgets that use ARIA, but not too many videos of screen readers using said widgets. This is a shame, because it’s often hard to understand the impact of ARIA without hearing how a screen reader announces the content both without and with ARIA in place, and not many people have or know how to use screen readers. I can certainly show developers who are accessibility-newbies the ARIA demos, but their accessibility benefits aren’t that clear without a recording of a screen reader using them and their non-ARIA counterparts.

Nevertheless, I was able to find a few videos of screen readers using ARIA, and I wanted to share the links here. I’m willing to bet there are more out there—it’s just hard to find them, since simply searching for “aria” on YouTube will get you a bunch of videos of people singing opera, not screen readers! So if you know of others, please let us know in the comments.

This first video is the best, as it shows a page without and then with ARIA live regions enabled, as well as the difference between polite and rude notifications.

ARIA Live Regions Screen Reader Demo

YUI has ARIA versions of several of their widgets, and each has a video of a screen reader using it:

Unfortunately none of the YUI videos demonstrate what the user would hear were it not for the addition of ARIA, but they’re interesting nonetheless.

Update 2/17/11:

A couple comments pointed me to some additional videos of screen readers using ARIA.

Lucica Ibanescu tested a page with and without ARIA landmark roles and recorded NVDA, JAWS, and Window-Eyes using both versions. Here’s the version with the ARIA landmarks:

Aaron Gustafson also has a video of his great TabInterface widget being read by NVDA.

Related Posts:

]]> http://zomigi.com/blog/videos-of-screen-readers-using-aria/feed/ 15 Two usability tips: mean what you say, and use form labels http://zomigi.com/blog/two-usability-tips-mean-what-you-say-and-use-form-labels/ http://zomigi.com/blog/two-usability-tips-mean-what-you-say-and-use-form-labels/#comments Sat, 09 May 2009 17:08:44 +0000 Zoe Gillenwater http://zomigi.com/?p=108 On Thursday, while I was entering the Babies R Us Mother’s Day Sweepstakes, I had to choose between two grand prize packages to win. There was a radio button for each package, as well as a link right below each radio button reading “See All Prizes.”

The "See All Prizes" links below each grand prize package radio button.

The "See All Prizes" links below each grand prize package radio button.

I was happy to see this “See All Prizes” link, since I didn’t know what the difference between the BOB Revolution Stroller and Maclaren Stroller was. So I clicked on the link and got a popup window listing the prizes in each package. But that was it. I didn’t actually get to see any of the prizes. Nor did I get a description of each item. Nor did I get links to the pages on the Babies R Us site where I could view each item and learn more about it.

The popup listing the prizes.

The popup listing the prizes.

I was left still not knowing what the difference between the two strollers was, and thus still didn’t know what choice I should make. Sure, I could go search for these strollers myself on the Babies R Us site. But I wish they hadn’t of gotten my hopes up by saying “See All Prizes,” when saying “See List of Prizes” would have been more accurate and left me less annoyed. (Plus, how hard would it have been to link each prize to its associated product page?)

The lesson here: language does matter. Mean what you say so your users get what they expect to from you.

Back on the form, I randomly picked the second prize package—or at least I tried to. When I clicked on its radio button, the prize lising popup window appeared again. The clickable area of the prize link was overlapping the clickable area of the radio button. I see why they did this—that prize link text is dang small. Expanding its clickable area (via padding in the CSS) helped me select it without having to be terribly precise. But when it came time to actually select a radio button, it made things worse.

The clickable area of the link overlaps the radio button, so clicking in the middle of the radio button selects the link, not the button.

The clickable area of the link overlaps the radio button, so clicking in the middle of the radio button selects the link, not the button.

I closed the popup and tried clicking on the label text “Maclaren Stroller & JJ Cole Package” right above the radio button. Alas, this did nothing, because this text was not actually marked up as a label element in the HTML. Finally, I was forced to very slowly and precisely move my cursor over the top half of the radio button, where I could finally click to select it.

Moving your cursor to the very top of the radio button finally lets you select it instead of the link below.

Moving your cursor to the very top of the radio button finally lets you select it instead of the link below.

Radio buttons are small enough targets to hit as it is. Reducing their clickable area by half because you’ve overlapped them with the clickable area of an adjacent link makes using them ridiculously difficult. If the label text had been marked up as an actual label, I could have just clicked on this text to select its associated radio button. This helps people with mobility impairments, but as you can see from this example, it helps people without disabilities as well when space is tight and there are lots of little competing things to click on.

The lesson here: use label elements on form fields. Always. It really does matter.

Related Posts:

]]> http://zomigi.com/blog/two-usability-tips-mean-what-you-say-and-use-form-labels/feed/ 0