WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Please test our expanding content

for

Number of posts in this thread: 9 (In chronological order)

From: Angela French
Date: Fri, Apr 03 2015 10:26AM
Subject: Please test our expanding content
No previous message | Next message →

Hello,
We are testing initial html templates of our new redesign built for us by a contractor. I would be very grateful if anyone would be willing to take a look at this test page and let me know if the expanding/collapsing content is accessible to screen reader users. It tests nicely for me with keyboard only.

http://sbctc.edu/redesign/high-school.html

The expanding/collapsible content is under the "Top Questions" heading. The first one is expanded by default.

Thank you very much.


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.checkoutacollege.com<;http://www.checkoutacollege.com>;
www.sbctc.edu<;http://www.sbctc.edu>;

From: Don Mauck
Date: Fri, Apr 03 2015 10:37AM
Subject: Re: Please test our expanding content
← Previous message | Next message →

Hi Angela --
Do you care which Browser? Also what are your expectations? Right now in FF, when I click on the "about us" button, it expands and collapses however, nothing seems to happen on the page. This with JAWS.

From: Stores, Mary A.
Date: Fri, Apr 03 2015 10:42AM
Subject: Re: Please test our expanding content
← Previous message | Next message →

Hello, Angela,

I can expand and collapse the different tabs, but the content seems to be the same for all 3 tabs so it's difficult to test whether new content loaded. Also, there's a header image that doesn't seem to convey any useful information to screen reader users. I am using JAWS 16 and IE 11 on a Windows 7 machine.

Mary


From: Paul J. Adam
Date: Fri, Apr 03 2015 10:43AM
Subject: Re: Please test our expanding content
← Previous message | Next message →

I'm not getting a selected state indicated to VoiceOver on OS X Safari. The role and the state need to be on the same element, the focusable element. Right now the tab role is on a parent element of the <a href aria-expanded> element. You might need aria-selected=true as well as aria-expanded.

Here's a working example, http://pauljadam.com/demos/aria-expanded.html <http://pauljadam.com/demos/aria-expanded.html>;.

I recommend making the role either button or tab and not link because link does not work with aria-expanded on iOS/VO.


Paul J. Adam
Accessibility Evangelist
www.deque.com <http://www.deque.com/>;
> On Apr 3, 2015, at 11:26 AM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hello,
> We are testing initial html templates of our new redesign built for us by a contractor. I would be very grateful if anyone would be willing to take a look at this test page and let me know if the expanding/collapsing content is accessible to screen reader users. It tests nicely for me with keyboard only.
>
> http://sbctc.edu/redesign/high-school.html
>
> The expanding/collapsible content is under the "Top Questions" heading. The first one is expanded by default.
>
> Thank you very much.
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.checkoutacollege.com<;http://www.checkoutacollege.com>;
> www.sbctc.edu<;http://www.sbctc.edu>;
>
> > > >

From: Angela French
Date: Fri, Apr 03 2015 10:47AM
Subject: Re: Please test our expanding content
← Previous message | Next message →

I am only asking that the expanding content section be tested. There are other areas that are not functional yet.

From: Angela French
Date: Fri, Apr 03 2015 10:47AM
Subject: Re: Please test our expanding content
← Previous message | Next message →

Good point. I will edit the text in those containers.

From: Angela French
Date: Fri, Apr 03 2015 10:52AM
Subject: Re: Please test our expanding content
← Previous message | Next message →

I edited the content within the collapsible area to indicate #1 and #2

From: _mallory
Date: Fri, Apr 03 2015 11:24AM
Subject: Re: Please test our expanding content
← Previous message | Next message →

On Fri, Apr 03, 2015 at 11:43:06AM -0500, Paul J. Adam wrote:
>
> Here's a working example, http://pauljadam.com/demos/aria-expanded.html <http://pauljadam.com/demos/aria-expanded.html>;.

How does a developer know when the aria-expanded goes on the expander
and when it goes on the thingie getting expanded?

I thought you'd put aria-expanded=true/false on the hidden/shown p
there, not the controlling link. The link doesn't itself expand
or contract.

I know the specs say either way, but that's 100% unhelpful for
stupids like me trying to figure out which of the 2 ways actually
makes sense.

thanks,
_mallory

From: Paul J. Adam
Date: Fri, Apr 03 2015 11:16AM
Subject: Re: Please test our expanding content
← Previous message | No next message

Lots of trial and error with ARIA widgets and testing with many different screen readers :) Have to create lots of demos and test them out to find out if they really work with the screen readers, keyboard users.

I've read other a11y folks recommend the state be placed on the focusable elements but I've seen that mistake many times with lots of nesting of parent/child elements to construct a widget.

The HTML5 nu validator will catch those errors as well :)

The spec can only be trusted up to the point before you need to actually test your assumptions with the various screen readers. Mobile makes it even harder!

aria-controls doesn't even really do anything at the moment but you are supposed to use it also.

I'm just happy that aria-expanded=true|false finally works 'correctly' on VoiceOver for iOS 8! But not on role=link sadly.

Paul J. Adam
Accessibility Evangelist
www.deque.com <http://www.deque.com/>;
> On Apr 3, 2015, at 12:24 PM, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
>
> On Fri, Apr 03, 2015 at 11:43:06AM -0500, Paul J. Adam wrote:
>>
>> Here's a working example, http://pauljadam.com/demos/aria-expanded.html <http://pauljadam.com/demos/aria-expanded.html>;.
>
> How does a developer know when the aria-expanded goes on the expander
> and when it goes on the thingie getting expanded?
>
> I thought you'd put aria-expanded=true/false on the hidden/shown p
> there, not the controlling link. The link doesn't itself expand
> or contract.
>
> I know the specs say either way, but that's 100% unhelpful for
> stupids like me trying to figure out which of the 2 ways actually
> makes sense.
>
> thanks,
> _mallory
> > > >