Re: Easy Checks - A First Review of Web Accessibility draft available

Hi Shadi, the issue with the expanding/collapsing +/- buttons not having an accessible name or indicating state is still present in VoiceOver.

Paul J. Adam
Accessibility Evangelist 
www.deque.com

On Jun 10, 2013, at 2:05 PM, Shadi Abou-Zahra <shadi@w3.org> wrote:

> Thanks for the feedback, Paul.
> 
> I've done some slight updates to the script, though I doubt it will resolve this particular problem. However, if you are interested could you check once more -- I currently don't have easy access to iOS.
> 
> Thanks,
>  Shadi
> 
> 
> On 6.6.2013 19:34, Shawn Henry wrote:
>> Thanks for the info, Paul.
>> 
>> I hope you'll report the bug! :-)
>> 
>> ~Shawn
>> 
>> On 6/6/2013 12:27 PM, Paul J. Adam wrote:
>>> Well VoiceOver iOS does not announce the expanded collapsed state with
>>> my example :( Works great in OS X, tried removing role=button and it
>>> still won't announce the state in iOS. Guess that's an iOS VO bug.
>>> 
>>> Oh well, something to think about :)
>>> 
>>> Paul J. Adam
>>> Accessibility Evangelist
>>> www.deque.com <http://www.deque.com>
>>> 
>>> On Jun 6, 2013, at 12:21 PM, "Paul J. Adam" <paul.adam@deque.com
>>> <mailto:paul.adam@deque.com>> wrote:
>>> 
>>>> Hi All, love this new resource. Just want to point out that VoiceOver
>>>> OS X/iOS does NOT like the +/- expanding/collapsing buttons. It's not
>>>> reading the button's value or the img's alt value inside the button
>>>> that duplicates the button's value.
>>>> 
>>>> <h2 class="f_panelHead fs_expandStarted fs_expandedFully"
>>>> style="cursor: pointer; "><a name="using" id="using"></a>Using these
>>>> Easy Checks<span class="f_expanderWrapper">
>>>>    <button class="f_expand xk_button" value="expand this section"
>>>> type="button" style="display: none; ">
>>>>        <img alt="expand this section"
>>>> src="http://www.w3.org/WAI/images/excol/plus_inv.png" class="xk_icon">
>>>>    </button>
>>>>    <button class="f_collapse xk_button" value="collapse this
>>>> section" type="button" style="display: inline-block; ">
>>>>        <img alt="collapse this section"
>>>> src="http://www.w3.org/WAI/images/excol/minus.png" class="xk_icon">
>>>>    </button>
>>>> </span>
>>>> </h2>
>>>> 
>>>> If it were me I'd change this code to something like this:
>>>> 
>>>> <a href="#" aria-expanded="false" id="using" role="button"
>>>> style="background:url('http://www.w3.org/WAI/images/excol/plus_inv.png')
>>>> no-repeat left top; padding-left:20px;"><h2
>>>> style="display:inline;">Using these Easy Checks</h2></a><br/>
>>>> <a href="#" aria-expanded="true" id="using" role="button"
>>>> style="background:url('http://www.w3.org/WAI/images/excol/minus.png')
>>>> no-repeat left top; padding-left:20px;"><h2
>>>> style="display:inline;">Using these Easy Checks</h2></a>
>>>> 
>>>> Dont' leave both lines of code in the DOM just use JavaScript to
>>>> update the non-visual state aria-expanded=true/false and the visual
>>>> state, the background +/- image.
>>>> 
>>>> Demo: http://pauljadam.com/demos/aria-expanded.html
>>>> 
>>>> Paul J. Adam
>>>> Accessibility Evangelist
>>>> www.deque.com <http://www.deque.com/>
>>>> 
>>>> On Jun 6, 2013, at 11:31 AM, Shawn Henry <shawn@w3.org
>>>> <mailto:shawn@w3.org>> wrote:
>>>> 
>>>>> Dear WAI Interest Group Participants,
>>>>> 
>>>>> Some times you want to quickly assess if a web page addresses
>>>>> accessibility. Some times people without accessibility expertise
>>>>> want to know if a web page addresses accessibility.
>>>>> 
>>>>> For these situations and more, WAI is drafting a new document:
>>>>>     *Easy Checks - A First Review of Web Accessibility*
>>>>> http://www.w3.org/WAI/eval/preliminary
>>>>> 
>>>>> It provides simple steps for anyone who can use the web; no
>>>>> accessibility knowledge or skill is required. The checks cover just
>>>>> a few accessibility issues and are designed to be quick and easy,
>>>>> rather than definitive.
>>>>> 
>>>>> We welcome your suggestions and comments on this draft. You can send
>>>>> them to the publicly-archived mailing list:
>>>>> wai-eo-editors@w3.org <mailto:wai-eo-editors@w3.org>
>>>>> 
>>>>> Please let us know if you have any questions. Thank you in advance
>>>>> for your comments.
>>>>> Feel free to circulate this message to other lists; please avoid
>>>>> cross-postings where possible.
>>>>> 
>>>>> Regards,
>>>>> Shawn Henry, EOWG Chair
>>>>> 
>>>>> 
>>>>> 
>>>>> 
>>>>> -----
>>>>> Shawn Lawton Henry
>>>>> W3C Web Accessibility Initiative (WAI)
>>>>> Massachusetts Institute of Technology (MIT)
>>>>> e-mail: shawn@w3.org <mailto:shawn@w3.org>
>>>>> phone: +1.617.395.7664
>>>>> about: http://www.w3.org/People/Shawn/
>>>>> 
>>>> 
>>> 
>> 
>> 
> 
> -- 
> Shadi Abou-Zahra - http://www.w3.org/People/shadi/
> Activity Lead, W3C/WAI International Program Office
> Evaluation and Repair Tools Working Group (ERT WG)
> Research and Development Working Group (RDWG)