We are using the screen reader NVDA. We have a website that we are trying to make WCAG AA compliant. If you use only a keyboard (no mouse), and use the Tab key to navigate around the page, whenever an element gets the focus, NVDA announces the label of the element (yay!). But we have some elements that don't get announced if you only hover your mouse over them (no focus). For example, a textbox input field doesn't get its label announced if you hover your mouse over it. We are using Angular Material inputs, and they are supposed to be WCAG-compliant. But maybe the requirement is only for getting the focus and not for mouse hover? Another example would be a button. If a button has text, NVDA announces the text when you hover. But we have a button that has an icon without text, so we have the label defined with the title attribute and aria-label attribute in the HTML; this label gets announced with focus but not with mouse hover. Is this OK? If it's required that it must announce the text with hover, how would I do that? I thought the aria-label would do it, but it doesn't.
1 Answer
Two related bugs in NVDA:
- NVDA reader doesn't read icon on mouse hover
- Windows 11 Design Elements Are Not Reported by NVDA When Mouse Tracking Is On
However, there is nothing in WCAG that requires assistive technology to work in a certain way. WCAG is more about how you should code your website (or native app or digital document) so that it will be available to assistive technology.
As long as your textbox or button is coded correctly in HTML, you don't have to worry how the assistive technology might interpret it. (And by "coded correctly", I mean following WCAG - appropriate labels, roles, colors, etc.)
-
Another clear, to the point answer with good supporting links. Nice.– JohnGB ♦Commented Apr 12, 2023 at 11:04
-
@slugolicious Thanks for the helpful reply. I also tried Windows Narrator as a screen reader, and it didn't announce elements upon mouse hover either. Do you know if there is a free screen reader application (running on Windows) that does announce elements upon mouse hover? Commented Apr 12, 2023 at 13:45
-
2Well, "free" might be a relative term. JAWS has a "mouse echo" feature. JAWS requires a license but does have a free trial mode that works for 40 minutes. I tried
<input aria-label="foo">with NVDA's mouse hover and the label was not announced. It is announced with JAWS's "mouse echo". However, testing with a screen reader and mouse movement is not a typical use case. The majority of screen reader users have lower vision (many have partial vision) but rarely do any of them use the mouse. That doesn't mean you can't test it, but the ROI of the time testing is very low. Commented Apr 12, 2023 at 19:28