WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: please test expanding content areas

for

From: Vincent Young
Date: Feb 7, 2012 8:06PM

OK. Seems like you have a bit of variety with more users leaning towards
IE and a fair amount (7%) using IE7. Seeing that you are at a university,
I'm guessing you will need to ensure you a wide range of ability is
covered. So, I don't think you can go ARIA wild, but we can use it with a
bit of progressive enhancement. I came up with an example:

http://webhipster.com/testing/accessibility/expand/index.html

What's going on:
1. Ensure the link points to the in page content. I have it pointing to
the content heading.

- href="#what-heading"

2. Since this is an in-page link you don't want the page jumping when it is
clicked so you'll have to stop the default behavior (i didn't use it here,
but jquery works):

if(e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
else {
e.cancelBubble = true;
e.returnValue = false;
}

3. When the link is clicked, focus the content to recreate the natural
in-page link behavior for screen reader users. In this case, to be able to
focus naturally non-tab focusable content, you'll need to add tabindex="-1"

- I added tabindex="-1" to the content heading

4. Some might not agree, but I went ahead and added role="alert" and
aria-live="assertive" to the content wrapper. This ensures all the content
gets read.

5. You will also need to ensure the proper state is identified for screen
reader users, which I do in the link with some off-screen content (this is
updated via javascript)

- <span id="what-state" role="status">Expand</span> or <span
id="what-state" role="status">Collapsed</span>


- I also added role="status" which new browsers update accordingly.
- For the old browsers that don't understand status, if the content is
expanded and I activate the link again, I blur then focus the link. These
ensures that the new state of "Collapsed" is read.

6. Proper state is also identified for non screen reader users with the
:focus and :hover pseudo class.

I think I hit all the major points. Let me know if you need me to explain
anything further. Comments/suggestions welcome.

Best,

Vincent

It is just an example so please treat as such. Maybe I'll write

On Tue, Feb 7, 2012 at 4:42 PM, Angela French < <EMAIL REMOVED> > wrote:

> For browsers our web stats show: IE 60%, FF: 17%, Chrome: 11%, Safari: 9%
>
> for IE, IE8: 57%, IE9: 30%, IE7: 7% IE6: less than 1% thank god.
> For FF: FF9: 52%, FF8: 9%, FF3.6: 8%, FF10: 5%
>
> I do not know which AT versions I should be targeting.
>
>
> >Angela,
> >
> >What browser/at combinations are you looking to support? This makes a
> >difference in terms of implementation.
> >
> >-Vincent
> >
> >On Tue, Feb 7, 2012 at 3:38 PM, Angela French < <EMAIL REMOVED> > wrote:
> >
> >> Thanks. I had just found this one that I think I'll make a test page
> >> for this week:
> >> http://test.cita.uiuc.edu/aria/tabpanel/tabpanel2.php#lsc2 ,
> >>
> >> >
> >> >We're rapidly moving beyond my expertise, but check out this article.
> >> >It seems to have the recipe for this situation:
> >> >http://weba.im/3lo
> >> >(from Filament Group)
> >> >
> >> >
> >> >