简体   繁体   中英

VoiceOver and NVDA on Chrome ignores aria-label

As you can see, VoiceOver and NVDA read out Click Me > (greater than) despite the aria-label set to Click Me .

Any ideas why? Is this a current bug?

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <form onsubmit="return false;"> <input type="submit" aria-label="Click Me" value="Click Me >"> </form> </body> </html> 

JAWS on Internet Explorer and NVDA on Firefox are generally the accepted browser + screen reader combinations on a PC. If a screen reader does not work with Chrome, it's up to the developer/company to decide if it's worth pursuing a workaround. For Apple products, I've always tested with VoiceOver on iOS devices and not as much with VoiceOver on a Mac. Either way, Chrome has not worked as well as Safari or Firefox.

One could possibly argue that Chrome is working properly and is adhering to WCAG 4.1.2 Name, Role, Value and is surfacing the "name" and "value" of the object. Both JAWS and NVDA on Chrome say "Click me, button, Click me greater", which is the name, role, and value of the object.

However, Chrome does not say "Click me greater" if you use

<button aria-label="Click Me">Click Me ></button>

so perhaps that's your workaround.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM