Accessibility / screen reader issue, after clicking the toolbar button, the shown up interface is not accessible with screen reader keyboard control

[sine-w]

Read first: https://github.com/gorhill/uBlock/blob/master/CONTRIBUTING.md

Describe the issue

As title suggested, I am a screen reader user. I try clicking the toolbar button however, the shown up interface seemed like is an overlay interface and is not accessible with screen reader using keyboard control.

[gorhill]

uBlock Origin's tabbed dashboard uses an iframe, which iframe is filled with the settings corresponding to the currently selected tab. Could the use of an iframe be the issue?

For example, do you have an issue reading this page: http://codepen.io/Mahmoud-Zakaria/pen/zKLrkY?

[sine-w]

Thanks for your reply. Yes, screen reader can access iframe, like that of youtube. But after I clicked the ublock button, I knew that something appear up, but, the keyboard is trapped and it cannot move around use arrow keys. Besides, I can do it by pressing tap keys but since many items are unknown, for example it only say 'link' and making impossible to do the setting.

Raymond Hill 於 16/10/2016 20:09 寫道:

uBlock Origin's tabbed dashboard uses an |iframe|, which |iframe| is filled with the settings corresponding to the currently selected tab. Could the use of an |iframe| be the issue?

For example, do you have an issue reading this page: http://codepen.io/Mahmoud-Zakaria/pen/zKLrkY?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gorhill/uBlock/issues/2072#issuecomment-254043279, or mute the thread https://github.com/notifications/unsubscribe-auth/APVJnUkw59KxGCu4POfzaEApwMzd2zUrks5q0hPxgaJpZM4KX80C.

[gorhill]

since many items are unknown, for example it only say 'link' and making impossible to do the setting

To help me find out which items are unknown, can you list the items which are known?

[sine-w]

Hi, thanks. Well, in fact I don't know what happen with that interface.......there are some hyperlinks, which my screen reader only say 'link'. And there is a heading, without text. There are many iteams, e.g. 3p frame, image, said it is text element, and not knowing what it is for.

Raymond Hill 於 16/10/2016 21:06 寫道:

since many items are unknown, for example it only say 'link' and
making impossible to do the setting

To help me find out which items are unknown, can you list the items which are known?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gorhill/uBlock/issues/2072#issuecomment-254045755, or mute the thread https://github.com/notifications/unsubscribe-auth/APVJncOC_GL_69GRe6TncR1KIksvwG2iks5q0iE_gaJpZM4KX80C.

[gorhill]

OK I understand, you are referring to the UI of the popup panel, not the dashboard.

[pitermach]

I'm bumping this issue as it's still a serious problem. It's not so much the fact that it can't be navigated with the keyboard, but most of the controls aren't visible. Testing with Chrome and the free NVDA screen reader on Windows as well as VoiceOver on Mac OS, after pressing the uBlock button on the toolbar I can only see 2 unlabeled links that go to the logger and the actual dashboard. But I can't see the buttons that can be used to quickly turn uBlock off on a page. I guess it's not a standard HTML control so NVDA can't pick it up and you can't tab to it either. Setting the appropriate aria roll to tell screen readers the type of control (I guess checkbox would be appropriate for the uBlock toggle) and aria labels to explain what they do would make the extension a lot easier to use. Because right now whenever I want to exclude a site I have to manually drill down to the settings and paste the url into the exclusion list which is a bit frustrating.

[gorhill]

I made changes which hopefully fix the issue, but it's not something I can test myself. If you are willing to test with the development build of uBlock, that would be great to have feedback as to whether things are better now.

The development build of uBlock can be installed from the Chrome store: https://chrome.google.com/webstore/detail/ublock-origin-dev-build/cgbcahbpdhpcegmbfconppldiemgcoii.

[pitermach]

Thanks for the quick fix 😊. It looks like the 2 links for dashboard and logger still don’t get labels read out on them. For the clickables, with NVDA they get read out, but JAWS (another Windows Screen Reader that’s also commonly used) doesn’t seem to pick them up. Have a look at this blog post, I think it fits this situation pretty well. Adding the aria roll and label tags should completely fix the problem. https://www.marcozehe.de/2013/04/24/easy-aria-tip-6-making-clickables-accessible/

[gorhill]

The new dev build was finally cleared on AMO in Chrome store, can you try it?

I was already using aria-label, but I followed the other advices at the link you provided (role= and tabindex=). I also added "Open the logger" and "Open the dashboard", I had assumed these were self-explanatory.

[pitermach]

Hi, This is perfect, everything works as expected now. The controls are now recognized and labeled and I can consistently get to them and toggle them on/off. In the previous dev build the 2 links still didn’t have a label for some reason, so they just got read as “link”. But now they work fine as well. Thanks for the quick fix! 😊