WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: please test expanding content areas

for

From: Steve Green
Date: Feb 8, 2012 4:57PM

This sort of hide / reveal feature always causes problems when we do user
testing with screen reader users, even highly-proficient ones. As Patrick
says, you don't know whether something has changed. Even if you do know that
something changed, you don't know what and you don't know if it is worth
making the effort to find out.

Don't forget that a screen reader user cannot quickly scan content like most
users can - they have to read all of it, and it is frustrating to do so and
find that it actually was not worth the trouble. Hide / reveal is more
suited to optional content such as Help text, not the main content.

In my view ARIA is currently only a theoretical solution. We meet very few
people who have any idea what it is. Some are aware that new events are now
announced but they don't know what they mean. It's a chicken and egg problem
insofar as people will not learn until ARIA is widely supported and used.
However, I think it's going to take a very large organisation such as Amazon
or the BBC to implement ARIA before users develop the need or desire to
learn about it.

In the meantime I advise people to only use hide / reveal and other dynamic
features if it is really necessary. In your case I would say it's not.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Vincent Young
Sent: 08 February 2012 03:52
To: WebAIM Discussion List
Subject: Re: [WebAIM] please test expanding content areas

Sure, I've implemented it that way before. Just depends on the user base
and system.


On Tue, Feb 7, 2012 at 7:19 PM, Ryan E. Benson < <EMAIL REMOVED> >wrote:

> I think the expanded bubble would be confusing to non-technical users.
> Can't you do the same sort of thing on the image that is there, and
> see what image is loaded (unless it is being rotated), and changing
> the alt?
>
> --
> Ryan E. Benson
>
>
>
> On Tue, Feb 7, 2012 at 10:03 PM, Vincent Young < <EMAIL REMOVED> >
> wrote:
> > 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)
> >> >> >
> >> >> >
> >> >> >