E-mail List Archives
Thread: Button button, who's got the button
Number of posts in this thread: 8 (In chronological order)
From: Bishop, Jeff - (jeffbis)
Date: Mon, Mar 23 2015 4:16PM
Subject: Button button, who's got the button
No previous message | Next message →
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
From: Lynn Holdsworth
Date: Mon, Mar 23 2015 5:05PM
Subject: Re: Button button, who's got the button
← Previous message | Next message →
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 ADDRESS 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
>
>
>
> > >
From: Yamanishi, Evan
Date: Mon, Mar 23 2015 6:15PM
Subject: Re: Button button, who's got the button
← Previous message | Next message →
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 ADDRESS REMOVED = ] On Behalf Of Lynn Holdsworth [ = EMAIL ADDRESS 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 ADDRESS 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
>
>
>
> > >
From: Asa Baylus
Date: Mon, Mar 23 2015 6:34PM
Subject: Re: Button button, who's got the button
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Lynn Holdsworth [ = EMAIL ADDRESS 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 ADDRESS 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
>>
>>
>>
>> >> >> > > > > > >
From: Bishop, Jeff - (jeffbis)
Date: Mon, Mar 23 2015 8:18PM
Subject: Re: Button button, who's got the button
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of
> Lynn Holdsworth [ = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> > > list messages to = EMAIL ADDRESS REMOVED =
> > > list messages to = EMAIL ADDRESS REMOVED =
From: Jonathan Avila
Date: Mon, Mar 23 2015 8:40PM
Subject: Re: Button button, who's got the button
← Previous message | Next message →
Yes, there is a longstanding bug with JAWS for button elements that have text content whether hidden or not where aria-label is not announced. This is common in icon fonts. So for example as Jeff said
<button aria-label="my label"><span aria-hidden="true">Symbol here</span></button> would not have the aria-label announced by JAWS with the arrow keys.
Where as
<button aria-label="my label"></button> with no text inside the button element would have the aria-label be announced by JAWS.
This issue seems to just affect the button element.
I'd encourage people to let Freedom Scientific know this should be addressed. I'm sure if multiple people bring this up they will be happy to fix it.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bishop, Jeff - (jeffbis)
Sent: Monday, March 23, 2015 6:16 PM
To: WebAIM Discussion List
Subject: [WebAIM] Button button, who's got the button
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
From: Birkir R. Gunnarsson
Date: Mon, Mar 23 2015 8:41PM
Subject: Re: Button button, who's got the button
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of
>> Lynn Holdsworth [ = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>
> > > messages to = EMAIL ADDRESS REMOVED =
> > > >
--
Work hard. Have fun. Make history.
From: Yamanishi, Evan
Date: Tue, Mar 24 2015 9:20AM
Subject: Re: Button button, who's got the button
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of
>>> Lynn Holdsworth [ = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>>
>> >> >> messages to = EMAIL ADDRESS REMOVED =
>> >> >> >>
>
>
>--
>Work hard. Have fun. Make history.
>>>