WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Button button, who's got the button

for

From: Yamanishi, Evan
Date: Mar 24, 2015 9:20AM

Interesting, I hadn¹t tested this on JAWS yet. VoiceOver reads all
versions as ³Help, button² when both navigating through form elements and
arrowing through items.

Evan


On 3/23/15, 10:41 PM, "Birkir R. Gunnarsson" < <EMAIL REMOVED> >
wrote:

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