Focusable elements should fire focus event / receive :focus styling when they receive Narrator/accessibility focus
This issue relates to a current inconsistency among different AT, particularly evident on touchscreen devices. See https://patrickhlauke.github.io/touch/tests/results/#mobile-tablet-touchscreen-assistive-technology-events / https://twitter.com/patrick_h_lauke/status/788496138966106112
In iOS/VoiceOver/Safari, when a focusable element (link, button...but some special casing seems to happen for text entry fields and similar) receives VO focus, the JavaScript focus event is fired and CSS :focus styles apply. In most other OS/AT/browser combinations, this is currently not the case - accessibility focus does not trigger focus() / :focus.
This has been brought up in the past with Mozilla with regards to Android/TalkBack/Firefox (xref https://bugzilla.mozilla.org/show_bug.cgi?id=1000082) and just now with Google for Android/TalkBack/Chrome (xref https://bugs.chromium.org/p/chromium/issues/detail?id=657157)
Patrick H. Lauke
shared this idea
Hi Patrick,
Thank you for the feedback and suggestion.
We will investigate this further with your help to see what might be possible.
This issue was never understood.
We believe that focus event is fired when focus is moved to a new item and the tracking rectangle does change to show this.
3 comments
-
Patrick H. Lauke
commented
see https://i.imgur.com/IDYwgyM.png - narrator's focus is on "Test button", but no focus() event was fired.
-
Patrick H. Lauke
commented
> This issue was never understood.
Sorry, was unaware this was causing confusion. Let me retrospectively add some more information. Specifically, this is about Narrator on a Windows 10 Mobile device.
When swiping left/right, setting the reading/accessibility focus, focus)/:focus is not fired.
As an example, with Narrator running, open Edge and navigate to https://patrickhlauke.github.io/touch/tests/event-listener.html - then swipe right to set the accessibility focus (indicated by the yellow outline) on the "Test button". focus() is not fired, :focus style is not applied. Only once double-tapping to activate is focus()/:focus triggered.
This is particularly noticeable in the case of skip links that are hidden by default and only made visible on :focus. In Safari/VO/iOS, you can swipe to set focus to the hidden skip link, and the :focus styles kick in making it visible. This does not happen in Narrator/Edge/Windows 10 Mobile combo, meaning a (partially) sighted Narrator user won't visually see the skip link (though they can still activate it).
-
Patrick H. Lauke
commented
At a very high level, the request here is "cursor/focus should follow narrator/accessibility focus (with slight exceptions/special-casing for touch devices where a 'real' focus on a text entry field or similar triggers special behavior/interactions like on-screen keyboards)"
