WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Button button, who's got the button

for

From: Jonathan Avila
Date: Mar 23, 2015 8:40PM

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

703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL 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