Seeking input on making a feature of draft W3C site more accessible

[Ian Jacobs-2]

Dear WAI IG,

I would like your input on a comment about the draft W3C Web site and  
would like your input on how to make a particular feature more  
accessible.

The draft site includes an expand/collapse content feature. For  
example, on the page that lists W3C groups:
  http://beta.w3.org/Consortium/activities

when you select a heading under "Working Groups" the heading 'expands'  
to display content after it. When content is displayed, selecting the  
heading 'collapses' it, hiding the content. Expanding and collapsing  
both work with mouse click or keyboard activation.

We use a visual cue (a small image) to signal that there is expandable  
content. It was pointed out that we need a non-visual indicator as  
well. In the current design, the image is included via CSS and so we  
cannot add alt text.

Here's how the site works today:

   * If javascript is turned off or not supported, the content is  
expanded and the issue goes away.

   * When javascript is enabled, there is one image to indicate  
"closed" and another to indicate "open." The images are inserted via  
CSS. The javascript is used to position a class attribute value in the  
content, and the CSS is applied accordingly (displaying or hiding  
content according to the current state).

One suggestion was to use WAI-ARIA's aria-expanded. However, this will  
provide information only to users whose browser and assistive  
technology support WAI-ARIA, and not to others.

Typically there are a number of expandable blocks on a page (ranging  
from 5 to maybe 100 at most). Therefore,  I want to be sure that any  
solution (e.g., using text) is not overly verbose.

Possible solution: On some pages that have expandable content there is  
a "show all / hide all" switch. That switch appears earlier in  
document order than the list of expandable blocks. I was wondering  
whether we might make use of that piece of content to let people know  
that there's a bunch of expandable content on the page. For example,  
would it be sufficient to label the option buttons: "Show all content  
under heading level 3s below" and "Hide all content under heading  
level 3s below" and not have additional information that they are  
expandable?

Thank you for any suggestions,

Ian Jacobs

--
Ian Jacobs (ij@...)    http://www.w3.org/People/Jacobs/
Tel:                                      [phone]

[Jon Gunderson-3]

Ian,

One way is for the scripting to add some offscreen text content to the end of the working group text, eiither "Show more information" or "Hide more information"

Modified code:

            <H3 class="h4">
               <SPAN class="expand_section" title="Device APIs and Policy Working Group"><A href="#">Device APIs and Policy <span class="offscreen">Show more information</span></A></SPAN>
            </H3>
 
Jon


---- Original message ----

>Date: Thu, 24 Sep 2009 15:06:50 -0500
>From: Ian Jacobs <ij@...>  
>Subject: Seeking input on making a feature of draft W3C site more accessible  
>To: w3c-wai-ig@...
>
>Dear WAI IG,
>
>I would like your input on a comment about the draft W3C Web site and  
>would like your input on how to make a particular feature more  
>accessible.
>
>The draft site includes an expand/collapse content feature. For  
>example, on the page that lists W3C groups:
>  http://beta.w3.org/Consortium/activities
>
>when you select a heading under "Working Groups" the heading 'expands'  
>to display content after it. When content is displayed, selecting the  
>heading 'collapses' it, hiding the content. Expanding and collapsing  
>both work with mouse click or keyboard activation.
>
>We use a visual cue (a small image) to signal that there is expandable  
>content. It was pointed out that we need a non-visual indicator as  
>well. In the current design, the image is included via CSS and so we  
>cannot add alt text.
>
>Here's how the site works today:
>
>   * If javascript is turned off or not supported, the content is  
>expanded and the issue goes away.
>
>   * When javascript is enabled, there is one image to indicate  
>"closed" and another to indicate "open." The images are inserted via  
>CSS. The javascript is used to position a class attribute value in the  
>content, and the CSS is applied accordingly (displaying or hiding  
>content according to the current state).
>
>One suggestion was to use WAI-ARIA's aria-expanded. However, this will  
>provide information only to users whose browser and assistive  
>technology support WAI-ARIA, and not to others.
>
>Typically there are a number of expandable blocks on a page (ranging  
>from 5 to maybe 100 at most). Therefore,  I want to be sure that any  
>solution (e.g., using text) is not overly verbose.
>
>Possible solution: On some pages that have expandable content there is  
>a "show all / hide all" switch. That switch appears earlier in  
>document order than the list of expandable blocks. I was wondering  
>whether we might make use of that piece of content to let people know  
>that there's a bunch of expandable content on the page. For example,  
>would it be sufficient to label the option buttons: "Show all content  
>under heading level 3s below" and "Hide all content under heading  
>level 3s below" and not have additional information that they are  
>expandable?
>
>Thank you for any suggestions,
>
>Ian Jacobs
>
>--
>Ian Jacobs (ij@...)    http://www.w3.org/People/Jacobs/
>Tel:                                      [phone]
>
>

Jon Gunderson, Ph.D.
Coordinator Information Technology Accessibility
Disability Resources and Educational Services

Rehabilitation Education Center
Room 86
1207 S. Oak Street
Champaign, Illinois 61820

Voice: [phone]

WWW: http://www.cita.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/

---------------------------------------------------------------
Privacy Information
---------------------------------------------------------------
This email (including attachments) is covered by the Electronic Communications Privacy Act, 18 U.S.C. 2510-2521, is confidential and may be legally privileged. It is intended for the use of the individual or entity to which it is addressed and may contain information that is privileged, confidential, and exempt from disclosure under applicable law. If the reader of this email is not the intended recipient, or agent responsible for delivering or copying of this communication, you are hereby notified that any retention, dissemination, distribution, or copying of this communication is strictly prohibited. If you have received this communication in error, please reply to the sender that you have received the message in error, then delete it. Thank you.

[Ian Jacobs-2]

On 24 Sep 2009, at 3:26 PM, Jon Gunderson wrote:

> Ian,
>
> One way is for the scripting to add some offscreen text content to  
> the end of the working group text, eiither "Show more information"  
> or "Hide more information"
>
> Modified code:
>
>            <H3 class="h4">
>               <SPAN class="expand_section" title="Device APIs and  
> Policy Working Group"><A href="#">Device APIs and Policy <span  
> class="offscreen">Show more information</span></A></SPAN>
>            </H3>

Hi Jon,

I was concerned that an offscreen solution might lead to a lot of  
noise (since there will be many such headings on a page).

I could see using an offscreen solution (e.g., that would be in the  
tab navigation order) so that before hitting the barrage of expandable  
headings, one would be given fair warning.

  _ Ian

>
> Jon
>
>
> ---- Original message ----
>> Date: Thu, 24 Sep 2009 15:06:50 -0500
>> From: Ian Jacobs <ij@...>
>> Subject: Seeking input on making a feature of draft W3C site more  
>> accessible
>> To: w3c-wai-ig@...
>>
>> Dear WAI IG,
>>
>> I would like your input on a comment about the draft W3C Web site and
>> would like your input on how to make a particular feature more
>> accessible.
>>
>> The draft site includes an expand/collapse content feature. For
>> example, on the page that lists W3C groups:
>> http://beta.w3.org/Consortium/activities
>>
>> when you select a heading under "Working Groups" the heading  
>> 'expands'
>> to display content after it. When content is displayed, selecting the
>> heading 'collapses' it, hiding the content. Expanding and collapsing
>> both work with mouse click or keyboard activation.
>>
>> We use a visual cue (a small image) to signal that there is  
>> expandable
>> content. It was pointed out that we need a non-visual indicator as
>> well. In the current design, the image is included via CSS and so we
>> cannot add alt text.
>>
>> Here's how the site works today:
>>
>>  * If javascript is turned off or not supported, the content is
>> expanded and the issue goes away.
>>
>>  * When javascript is enabled, there is one image to indicate
>> "closed" and another to indicate "open." The images are inserted via
>> CSS. The javascript is used to position a class attribute value in  
>> the
>> content, and the CSS is applied accordingly (displaying or hiding
>> content according to the current state).
>>
>> One suggestion was to use WAI-ARIA's aria-expanded. However, this  
>> will
>> provide information only to users whose browser and assistive
>> technology support WAI-ARIA, and not to others.
>>
>> Typically there are a number of expandable blocks on a page (ranging
>> from 5 to maybe 100 at most). Therefore,  I want to be sure that any
>> solution (e.g., using text) is not overly verbose.
>>
>> Possible solution: On some pages that have expandable content there  
>> is
>> a "show all / hide all" switch. That switch appears earlier in
>> document order than the list of expandable blocks. I was wondering
>> whether we might make use of that piece of content to let people know
>> that there's a bunch of expandable content on the page. For example,
>> would it be sufficient to label the option buttons: "Show all content
>> under heading level 3s below" and "Hide all content under heading
>> level 3s below" and not have additional information that they are
>> expandable?
>>
>> Thank you for any suggestions,
>>
>> Ian Jacobs
>>
>> --
>> Ian Jacobs (ij@...)    http://www.w3.org/People/Jacobs/
>> Tel:                                      [phone]
>>
>>
> Jon Gunderson, Ph.D.
> Coordinator Information Technology Accessibility
> Disability Resources and Educational Services
>
> Rehabilitation Education Center
> Room 86
> 1207 S. Oak Street
> Champaign, Illinois 61820
>
> Voice: [phone]
>
> WWW: http://www.cita.uiuc.edu/
> WWW: https://netfiles.uiuc.edu/jongund/www/
>
> ---------------------------------------------------------------
> Privacy Information
> ---------------------------------------------------------------
> This email (including attachments) is covered by the Electronic  
> Communications Privacy Act, 18 U.S.C. 2510-2521, is confidential and  
> may be legally privileged. It is intended for the use of the  
> individual or entity to which it is addressed and may contain  
> information that is privileged, confidential, and exempt from  
> disclosure under applicable law. If the reader of this email is not  
> the intended recipient, or agent responsible for delivering or  
> copying of this communication, you are hereby notified that any  
> retention, dissemination, distribution, or copying of this  
> communication is strictly prohibited. If you have received this  
> communication in error, please reply to the sender that you have  
> received the message in error, then delete it. Thank you.
>
>

--
Ian Jacobs (ij@...)    http://www.w3.org/People/Jacobs/
Tel:                                      [phone]

[Jon Gunderson-3]

The status of the hide/show information should be after the main text of the header so screen reader users don't need to hear it repeated.

Hiding and showing content like this is a little tricky, since it is not necessarily intuitive for a screen reader user to know what is actually happening.

Come to the accessibility conference next week you can ask some experts:
http://webaccessibilityconference.illinois.edu/

Jon


---- Original message ----

>Date: Thu, 24 Sep 2009 15:30:55 -0500
>From: Ian Jacobs <ij@...>  
>Subject: Re: Seeking input on making a feature of draft W3C site more accessible  
>To: Jon Gunderson <jongund@...>
>Cc: w3c-wai-ig@...
>
>
>On 24 Sep 2009, at 3:26 PM, Jon Gunderson wrote:
>
>> Ian,
>>
>> One way is for the scripting to add some offscreen text content to  
>> the end of the working group text, eiither "Show more information"  
>> or "Hide more information"
>>
>> Modified code:
>>
>>            <H3 class="h4">
>>               <SPAN class="expand_section" title="Device APIs and  
>> Policy Working Group"><A href="#">Device APIs and Policy <span  
>> class="offscreen">Show more information</span></A></SPAN>
>>            </H3>
>
>Hi Jon,
>
>I was concerned that an offscreen solution might lead to a lot of  
>noise (since there will be many such headings on a page).
>
>I could see using an offscreen solution (e.g., that would be in the  
>tab navigation order) so that before hitting the barrage of expandable  
>headings, one would be given fair warning.
>
>  _ Ian
>
>>
>> Jon
>>
>>
>> ---- Original message ----
>>> Date: Thu, 24 Sep 2009 15:06:50 -0500
>>> From: Ian Jacobs <ij@...>
>>> Subject: Seeking input on making a feature of draft W3C site more  
>>> accessible
>>> To: w3c-wai-ig@...
>>>
>>> Dear WAI IG,
>>>
>>> I would like your input on a comment about the draft W3C Web site and
>>> would like your input on how to make a particular feature more
>>> accessible.
>>>
>>> The draft site includes an expand/collapse content feature. For
>>> example, on the page that lists W3C groups:
>>> http://beta.w3.org/Consortium/activities
>>>
>>> when you select a heading under "Working Groups" the heading  
>>> 'expands'
>>> to display content after it. When content is displayed, selecting the
>>> heading 'collapses' it, hiding the content. Expanding and collapsing
>>> both work with mouse click or keyboard activation.
>>>
>>> We use a visual cue (a small image) to signal that there is  
>>> expandable
>>> content. It was pointed out that we need a non-visual indicator as
>>> well. In the current design, the image is included via CSS and so we
>>> cannot add alt text.
>>>
>>> Here's how the site works today:
>>>
>>>  * If javascript is turned off or not supported, the content is
>>> expanded and the issue goes away.
>>>
>>>  * When javascript is enabled, there is one image to indicate
>>> "closed" and another to indicate "open." The images are inserted via
>>> CSS. The javascript is used to position a class attribute value in  
>>> the
>>> content, and the CSS is applied accordingly (displaying or hiding
>>> content according to the current state).
>>>
>>> One suggestion was to use WAI-ARIA's aria-expanded. However, this  
>>> will
>>> provide information only to users whose browser and assistive
>>> technology support WAI-ARIA, and not to others.
>>>
>>> Typically there are a number of expandable blocks on a page (ranging
>>> from 5 to maybe 100 at most). Therefore,  I want to be sure that any
>>> solution (e.g., using text) is not overly verbose.
>>>
>>> Possible solution: On some pages that have expandable content there  
>>> is
>>> a "show all / hide all" switch. That switch appears earlier in
>>> document order than the list of expandable blocks. I was wondering
>>> whether we might make use of that piece of content to let people know
>>> that there's a bunch of expandable content on the page. For example,
>>> would it be sufficient to label the option buttons: "Show all content
>>> under heading level 3s below" and "Hide all content under heading
>>> level 3s below" and not have additional information that they are
>>> expandable?
>>>
>>> Thank you for any suggestions,
>>>
>>> Ian Jacobs
>>>
>>> --
>>> Ian Jacobs (ij@...)    http://www.w3.org/People/Jacobs/
>>> Tel:                                      [phone]
>>>
>>>
>> Jon Gunderson, Ph.D.
>> Coordinator Information Technology Accessibility
>> Disability Resources and Educational Services
>>
>> Rehabilitation Education Center
>> Room 86
>> 1207 S. Oak Street
>> Champaign, Illinois 61820
>>
>> Voice: [phone]
>>
>> WWW: http://www.cita.uiuc.edu/
>> WWW: https://netfiles.uiuc.edu/jongund/www/
>>
>> ---------------------------------------------------------------
>> Privacy Information
>> ---------------------------------------------------------------
>> This email (including attachments) is covered by the Electronic  
>> Communications Privacy Act, 18 U.S.C. 2510-2521, is confidential and  
>> may be legally privileged. It is intended for the use of the  
>> individual or entity to which it is addressed and may contain  
>> information that is privileged, confidential, and exempt from  
>> disclosure under applicable law. If the reader of this email is not  
>> the intended recipient, or agent responsible for delivering or  
>> copying of this communication, you are hereby notified that any  
>> retention, dissemination, distribution, or copying of this  
>> communication is strictly prohibited. If you have received this  
>> communication in error, please reply to the sender that you have  
>> received the message in error, then delete it. Thank you.
>>
>>
>
>--
>Ian Jacobs (ij@...)    http://www.w3.org/People/Jacobs/
>Tel:                                      [phone]
>

Jon Gunderson, Ph.D.
Coordinator Information Technology Accessibility
Disability Resources and Educational Services

Rehabilitation Education Center
Room 86
1207 S. Oak Street
Champaign, Illinois 61820

Voice: [phone]

WWW: http://www.cita.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/

---------------------------------------------------------------
Privacy Information
---------------------------------------------------------------
This email (including attachments) is covered by the Electronic Communications Privacy Act, 18 U.S.C. 2510-2521, is confidential and may be legally privileged. It is intended for the use of the individual or entity to which it is addressed and may contain information that is privileged, confidential, and exempt from disclosure under applicable law. If the reader of this email is not the intended recipient, or agent responsible for delivering or copying of this communication, you are hereby notified that any retention, dissemination, distribution, or copying of this communication is strictly prohibited. If you have received this communication in error, please reply to the sender that you have received the message in error, then delete it. Thank you.

[Patrick H. Lauke]

Ian Jacobs wrote:

> The draft site includes an expand/collapse content feature. For example,
> on the page that lists W3C groups:
>  http://beta.w3.org/Consortium/activities

I would suggest actually making those heading links refer to themselves
of to the content box they expand, rather than simply being empty "#"
links. This way, if each heading/section actually had a unique id, you
could then bookmark or link to that particular section and (if JS is
enabled) have the script look out for that on load and pre-open that
particular section and scroll the viewport to it.

P
--
Patrick H. Lauke
______________________________________________________________
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
______________________________________________________________
Co-lead, Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
______________________________________________________________

[Charles McCathieNevile-2]

On Thu, 24 Sep 2009 22:06:50 +0200, Ian Jacobs <ij@...> wrote:

> Dear WAI IG,
>
> I would like your input on a comment about the draft W3C Web site and  
> would like your input on how to make a particular feature more  
> accessible.
>
> The draft site includes an expand/collapse content feature. For example,  
> on the page that lists W3C groups:
>   http://beta.w3.org/Consortium/activities
>
> when you select a heading under "Working Groups" the heading 'expands'  
> to display content after it. When content is displayed, selecting the  
> heading 'collapses' it, hiding the content. Expanding and collapsing  
> both work with mouse click or keyboard activation.
>
> We use a visual cue (a small image) to signal that there is expandable  
> content. It was pointed out that we need a non-visual indicator as well.  
> In the current design, the image is included via CSS and so we cannot  
> add alt text.
>
> Here's how the site works today:
>
>    * If javascript is turned off or not supported, the content is  
> expanded and the issue goes away.
>
>    * When javascript is enabled, there is one image to indicate "closed"  
> and another to indicate "open." The images are inserted via CSS. The  
> javascript is used to position a class attribute value in the content,  
> and the CSS is applied accordingly (displaying or hiding content  
> according to the current state).

Instead of changing the CSS (admittedly this is convenient) why not have  
the javascript modify the document, directly inserting the image (with  
alt). After all, it is meaningful content, and therefore should not be  
included via CSS (what happens if I have scripting enabled, but CSS not  
applied (as per Opera's User mode)?

> One suggestion was to use WAI-ARIA's aria-expanded. However, this will  
> provide information only to users whose browser and assistive technology  
> support WAI-ARIA, and not to others.

This should, however, be used for those who *can* benefit.

> Typically there are a number of expandable blocks on a page (ranging  
> from 5 to maybe 100 at most). Therefore,  I want to be sure that any  
> solution (e.g., using text) is not overly verbose.

Good instinct.

> Possible solution: On some pages that have expandable content there is a  
> "show all / hide all" switch. That switch appears earlier in document  
> order than the list of expandable blocks. I was wondering whether we  
> might make use of that piece of content to let people know that there's  
> a bunch of expandable content on the page. For example, would it be  
> sufficient to label the option buttons: "Show all content under heading  
> level 3s below" and "Hide all content under heading level 3s below" and  
> not have additional information that they are expandable?

I don't think so, since that is singificantly changing the functioanlity  
and way the page works (and potentially changing the navigation which  
makes it harder to colaborate) between what one would find with a screen  
reader and what one finds by visual inspection.

I hope these thoughts are worth 2 cents :)

cheers

Chaals

--
Charles McCathieNevile  Opera Software, Standards Group
     je parle français -- hablo español -- jeg lærer norsk
http://my.opera.com/chaals       Try Opera: http://www.opera.com

[Ian Jacobs-2]

On 25 Sep 2009, at 4:29 AM, Charles McCathieNevile wrote:

[skip]

>>
>>   * When javascript is enabled, there is one image to indicate  
>> "closed" and another to indicate "open." The images are inserted  
>> via CSS. The javascript is used to position a class attribute value  
>> in the content, and the CSS is applied accordingly (displaying or  
>> hiding content according to the current state).
>
> Instead of changing the CSS (admittedly this is convenient) why not  
> have the javascript modify the document, directly inserting the  
> image (with alt). After all, it is meaningful content, and therefore  
> should not be included via CSS (what happens if I have scripting  
> enabled, but CSS not applied (as per Opera's User mode)?

Charles,

Thank you for the suggestion, which we've adopted. The site has been  
updated so that
the hide/show image is now in the markup with alt text.

  _ Ian
--
Ian Jacobs (ij@...)    http://www.w3.org/People/Jacobs/
Tel:                                      [phone]