WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: please test expanding content areas

for

From: Ryan E. Benson
Date: Feb 7, 2012 8:21PM

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