WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: please test expanding content areas

for

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

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)
> >> >> >
> >> >> >
> >> >> >