E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: please test expanding content areas

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

From: Angela French
Date: Tue, Feb 07 2012 2:30PM
Subject: please test expanding content areas
No previous message | Next message →

Hello,
I'm hoping that a few different screen readers users might test this sample page for me to see if the hidden content areas are perceivable and operable. I can access them via keyboard.

There are two headings which can be expanded to reveal the content underneath them. The headings are: "What We Do" and "We Believe".

http://sbctc.edu/college/e_elearningNEW.aspx

Thank you for your opinions.

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

From: Patrick Burke
Date: Tue, Feb 07 2012 2:48PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

Hi Angela,

Yes, using Jaws (13) & NVDA (2011), the links work* in both Firefox & IE.

* The additional content is successfully expanded & collapsed by
pressing the Enter key on the two headings. However, none of the
screenreader-browser combinations announces any change (you have to
explore below the heading on your own. I might not have known to do
this without the explanation in your email ahead of time.) Only
NVDA+Firefox announces that the heading/link is "clickable", which
gives a sense that it isn't a standard hyperlink.

Patrick

At 01:28 PM 2/7/2012, Angela French wrote:
>Hello,
>I'm hoping that a few different screen readers users might test this
>sample page for me to see if the hidden content areas are
>perceivable and operable. I can access them via keyboard.
>
>There are two headings which can be expanded to reveal the content
>underneath them. The headings are: "What We Do" and "We Believe".
>
>http://sbctc.edu/college/e_elearningNEW.aspx
>
>Thank you for your opinions.
>
>
>
>Angela French
>Internet Specialist
>State Board for Community and Technical Colleges
>360-704-4316
> = EMAIL ADDRESS REMOVED =
>http://www.checkoutacollege.com/
>
>

From: Angela French
Date: Tue, Feb 07 2012 3:18PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

Patrick,
I'm a little confused about your statement "...have to explore below the heading on your own". Wouldn't you normally look beyond a heading to see the subsequent content regardless of whether it was initially hidden? What am I missing?

Any ideas why JAWS would not announce such a heading as "clickable" since it is wrapped in an anchor tag? Is it because there is no value for the href attribute?

Angela

>
>Yes, using Jaws (13) & NVDA (2011), the links work* in both Firefox & IE.
>
>* The additional content is successfully expanded & collapsed by pressing
>the Enter key on the two headings. However, none of the screenreader-
>browser combinations announces any change (you have to explore below the
>heading on your own. I might not have known to do this without the
>explanation in your email ahead of time.) Only
>NVDA+Firefox announces that the heading/link is "clickable", which
>gives a sense that it isn't a standard hyperlink.
>
>Patrick
>>

From: Angela French
Date: Tue, Feb 07 2012 3:39PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

Is there Aria I might incorporate into the hidden content that, could make this work? I have not travelled down the Aria path yet.
Angela

>
>Perhaps I would read through the whole page once, not "clicking" on
>anything. Then I might navigate back by heading, going to the headings that
>were reported as links ("Sounds interesting!..."), & then try hitting Enter or
>Space. Hearing no indication that these links were doing anything, I might
>give up on the page.
>
>The main point being, if there is no indication (focus change etc) that new
>content has appeared, screen reader users may not find it, even if it's sitting
>"right there!". This may change as people get more accustomed to dynamic
>content, "links" not actually being links to new pages, etc. But for the time
>being we need some kind of tip-off.
>
>Hope that's clearer,
>>Patrick
>
>
>--
>Patrick J. Burke
>
>Coordinator
>UCLA Disabilities &
>Computing Program
>
>Phone: 310 206-6004
>E-mail: = EMAIL ADDRESS REMOVED =
>Location: 4909 Math Science
>
>
>Department Contact: = EMAIL ADDRESS REMOVED =
>
>

From: Patrick Burke
Date: Tue, Feb 07 2012 3:45PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

At 02:21 PM 2/7/2012, Angela French wrote:
>Patrick,
>I'm a little confused about your statement "...have to explore below
>the heading on your own". Wouldn't you normally look beyond a
>heading to see the subsequent content regardless of whether it was
>initially hidden? What am I missing?

Without some clue that the heading/link behaves this way, maybe not.

Perhaps I would read through the whole page once, not "clicking" on
anything. Then I might navigate back by heading, going to the
headings that were reported as links ("Sounds interesting!..."), &
then try hitting Enter or Space. Hearing no indication that these
links were doing anything, I might give up on the page.

The main point being, if there is no indication (focus change etc)
that new content has appeared, screen reader users may not find it,
even if it's sitting "right there!". This may change as people get
more accustomed to dynamic content, "links" not actually being links
to new pages, etc. But for the time being we need some kind of tip-off.

Hope that's clearer,
>Patrick

--
Patrick J. Burke

Coordinator
UCLA Disabilities &
Computing Program

Phone: 310 206-6004
E-mail: = EMAIL ADDRESS REMOVED =
Location: 4909 Math Science

Department Contact: = EMAIL ADDRESS REMOVED =

From: Patrick Burke
Date: Tue, Feb 07 2012 4:27PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

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)

Patrick
Patrick
At 02:41 PM 2/7/2012, Angela French wrote:
>Is there Aria I might incorporate into the hidden content that,
>could make this work? I have not travelled down the Aria path yet.
>Angela
>
> >
> >Perhaps I would read through the whole page once, not "clicking" on
> >anything. Then I might navigate back by heading, going to the headings that
> >were reported as links ("Sounds interesting!..."), & then try
> hitting Enter or
> >Space. Hearing no indication that these links were doing anything, I might
> >give up on the page.
> >
> >The main point being, if there is no indication (focus change etc) that new
> >content has appeared, screen reader users may not find it, even if
> it's sitting
> >"right there!". This may change as people get more accustomed to dynamic
> >content, "links" not actually being links to new pages, etc. But
> for the time
> >being we need some kind of tip-off.
> >
> >Hope that's clearer,
> >>Patrick
> >
> >

From: Angela French
Date: Tue, Feb 07 2012 4:39PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

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

From: Vincent Young
Date: Tue, Feb 07 2012 5:18PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

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

From: Angela French
Date: Tue, Feb 07 2012 5:42PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

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

From: Vincent Young
Date: Tue, Feb 07 2012 8:06PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

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)

- Expand or Collapsed

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

From: Ryan E. Benson
Date: Tue, Feb 07 2012 8:21PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

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 ADDRESS 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)
>
> - Expand or id="what-state" role="status">Collapsed
>
>
> - 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 ADDRESS 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 ADDRESS 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)
>> >> >
>> >> >
>> >> >

From: Vincent Young
Date: Tue, Feb 07 2012 8:54PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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)
> >
> > - Expand or > id="what-state" role="status">Collapsed
> >
> >
> > - 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 ADDRESS 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 ADDRESS 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)
> >> >> >
> >> >> >
> >> >> >

From: Steve Green
Date: Wed, Feb 08 2012 4:57PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

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

From: Benjamin Hawkes-Lewis
Date: Wed, Feb 08 2012 5:24PM
Subject: Re: please test expanding content areas
← Previous message | Next message →

On Wed, Feb 8, 2012 at 11:58 PM, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> 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.

I see no reason reason why an end user should need to learn what ARIA is.

Requiring users to learn what ARIA is seems indicative of poor AT UIs.

--
Benjamin Hawkes-Lewis

From: Steve Faulkner
Date: Fri, Feb 10 2012 7:33AM
Subject: Re: please test expanding content areas
← Previous message | No next message

hi Steve,
you wrote:

"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."

Its not a matter of people learning ARIA in many circumstances. Many ARIA
features allow developers to provide the semantics already provided in HTML
and desktop UI's. In some cases it that the semantics are new within a web
page but not on the desktop. Many of the custom controls that ARIA allows
developers to provide the semantcis for are in the process of being
implemented natively in HTML (example sliders and menus)

many of the large web sites and companies are already using ARIA:
Google uses it extensively in all its products including gmail/reader/docs
etc.
the BBC uses landmark roles on its sites
the BBC olympic site makes use of other ARIA semantics
http://www.bbc.co.uk/sport/0/olympics/2012/
IBM uses ARIA in over 150 of its web based products
yahoo uses it extensively

In many cases the user has no need to be aware of ARIA to make use of it,
it just results in the user getting semantic information that would not
otherwise.

regards
Stevef

On 8 February 2012 23:58, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:

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