WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Button button, who's got the button

for

From: Birkir R. Gunnarsson
Date: Mar 23, 2015 8:41PM

Jeff

It is important to file an issue with Freedom Scientific regarding how
Jaws treats aria-label attributes on buttons in browse mode (I observe
same behavior in IE11, at least with Jaws 15, have yet to test with
16).
I am on the Jaws beta tester team so I can help you file a bug for this.
Feel free to contact me off-line.
aria-label is perfectly valid in this situation and should be
available in browse mode as well as forms mode.
It may not solve your problem today, but it should help solve it in a
year from now, hopefully.
-Birkir
Disclaimer: I am not singling out Jaws here as an example of a
horrible screen reader, I would say the same for any other bug in any
other screenreader that we discover in the course of our work. By
reporting bugs we help improve the user experience as well as making
it easier for developers to make their content accessible.




On 3/23/15, Bishop, Jeff - (jeffbis) < <EMAIL REMOVED> > wrote:
> Thank you everyone. I think aria-label will not work here because some of
> the test cases fail when arrowing through the page... I will evaluate the
> code samples here. Again, thanks so much.
>
> Jeff
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Asa Baylus
> Sent: Monday, March 23, 2015 5:34 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Button button, who's got the button
>
> Hi Evan,
>
> I forked your codepen added a another CSS option using clip:rect WebAIM
> style
>
> http://codepen.io/asabaylus/pen/bNzELq
> <http://codepen.io/asabaylus/pen/bNzELq>;
>
> -Asa
>
>> On Mar 23, 2015, at 8:15 PM, Yamanishi, Evan < <EMAIL REMOVED> >
>> wrote:
>>
>> There are a few options for this. I put them in a codepen:
>> http://codepen.io/sh0ji/pen/pvGgRW.
>>
>> I personally prefer using a span element with the screen reader only CSS
>> class inside of a button element (the first example), and rarely advocate
>> using an image if it can be avoided. While I don't think it makes a
>> difference for something as simple as "help," the alt attribute can't be
>> navigated with a screen reader the same way normal text can. You also have
>> to remember to assign the parent anchor a role="button", which people tend
>> to forget or overlook. That said, if an image is acting as a link and not
>> a button, that's the way to do it.
>>
>> Using aria-label works just fine as well, but I try not to use ARIA if
>> there are HTML/CSS solutions available.
>>
>> Evan
>>
>> >> From: WebAIM-Forum [ <EMAIL REMOVED> ] On Behalf Of
>> Lynn Holdsworth [ <EMAIL REMOVED> ]
>> Sent: Monday, March 23, 2015 7:05 PM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] Button button, who's got the button
>>
>> Hi Jeff,
>>
>> You could use an image button whose alt attribute contains the value you
>> want screenreaders to announce. Renditions of the site in other languages
>> would need this value to change to reflect the chosen language.
>>
>> More info at:
>> http://webaim.org/techniques/alttext/#buttons
>>
>> Best, Lynn
>>
>>
>>
>>> On 23 Mar 2015, at 22:16, Bishop, Jeff - (jeffbis)
>>> < <EMAIL REMOVED> > wrote:
>>>
>>> Hello Everyone,
>>>
>>>
>>>
>>> We have a site here at the University that uses buttons similar to the
>>> following:
>>>
>>>
>>>
>>> <button name="help">?</button>
>>>
>>>
>>>
>>> You probably are seeing where this is going already. They want to keep
>>> the visual aspect of the question marks in play for the site's buttons
>>> but we are hoping we can get a consistent screen reader experience with
>>> IE, Firefox (with JAWS/Window-Eyes/NVDA) and Safari (VoiceOver).
>>>
>>>
>>>
>>> So far my testing shows that aria-label will work with JAWS 16 (the
>>> screen used by 95 percent of students on campus) inside of Firefox.
>>>
>>>
>>>
>>> It only works if you tab to the button in IE with JAWS 16. If you move to
>>> the item using the virtual cursor then it only shows the question mark.
>>>
>>>
>>>
>>> So, before I continue testing I was wondering what people have found best
>>> to accommodate all users in this instance?
>>>
>>>
>>>
>>> I know the simple answer is to change the text inside of the button tag
>>> <smile>.
>>>
>>>
>>>
>>> Any hints are hugely appreciated.
>>>
>>>
>>>
>>> Jeff
>>>
>>>
>>>
>>> >>> >>> list messages to <EMAIL REMOVED>
>> >> >> list messages to <EMAIL REMOVED>
>> >> >> list messages to <EMAIL REMOVED>
>
> > > messages to <EMAIL REMOVED>
> > > >


--
Work hard. Have fun. Make history.