Closed Bug 1654956 Opened 4 years ago Closed 3 years ago

Add functionality to display tabbing order overlay.

Categories

(DevTools :: Accessibility Tools, enhancement)

enhancement

Tracking

(firefox84 fixed)

RESOLVED FIXED
84 Branch
Tracking Status
firefox84 --- fixed

People

(Reporter: yzen, Assigned: yzen)

References

(Depends on 2 open bugs, Blocks 1 open bug)

Details

(Keywords: dev-doc-complete)

Attachments

(7 files)

We would like to provide a UX for displaying elements in their tabbing order. This would help users visualize which elements are focusable when tabbing and in what sequence.

Attached video Prototype v1

Hi Victoria, I'm attaching a first version of a prototype of a new feature in the accessibility panel that shows a keyboard tabbing order overlay on the page. In other words, we are displaying all elements that are tabbable with the keyboard and their order index in the infobar. This is an early prototype but I would love to hear some feedback thoughts, ideas you might have about it. Thanks!

Attached video Accessibility Insights

This is how Accessibility Insights from Microsoft do this for example. The tool is interactive, where the user gets the current focused element visualized as they Tab.

(In reply to Yura Zenevich [:yzen] from comment #1)

Created attachment 9168547 [details]
Prototype v1

Hi Victoria, I'm attaching a first version of a prototype of a new feature in the accessibility panel that shows a keyboard tabbing order overlay on the page. In other words, we are displaying all elements that are tabbable with the keyboard and their order index in the infobar. This is an early prototype but I would love to hear some feedback thoughts, ideas you might have about it. Thanks!

Duh, forgot to CC:

Flags: needinfo?(victoria)
Attached image taba11y

This is how another add-on is doing it, similar to what this preview does.

Some feedback gathered on a11y slack:

  • What a great idea! It may be that I'm looking at the video at a smaller size, but I found the pointer direction not to be very obvious when it is clustered around other pointers

  • This is so good! Wondering if it’d be helpful to show the stylesheet’s :focus styles, instead of a generic black outline? Maybe that’s beside the point of this feature though. Nice work

  • Neat, what happens if there's a dynamic update that changes the tab order, such as if the waffle icon on Google was clicked?

  • Other questions: What does it look like if an element in the tab order is behind another element (for example, a body link temporarily covered by a navigation drawer or even two buttons the same size and position layered on top of each other)? What does it look like when an element in the tab order is outside the viewport?

Hi Yura, what you came up with is looking great!! I like that the numbered tooltips don't cover up the click targets.

I think I actually like the black focus outline since normal :focus styles can be pretty subtle. This just provides BLAMO-immediate-100% clarity as to where the focus areas are.

Regarding these questions:

What does it look like if an element in the tab order is behind another element
What does it look like when an element in the tab order is outside the viewport?

I think grid has solved these, at least the second one, so we can borrow some ideas :)

Would you like to tweet this demo so that @firefoxdevtools can RT for more feedback?

Flags: needinfo?(victoria)

What does it look like when an element in the tab order is outside the viewport?

I think grid has solved these, at least the second one, so we can borrow some ideas :)

CCing gl who might remember one of the examples of a grid that was flush with the page. The labels were inset but pointed outwards.

Flags: needinfo?(gl)

Hi Victoria, I added a bit more polish to the tool, I have not done the grid enhancement just yet, but perhaps you would have some time to give ux feedback for the tool? I have the try build here: https://treeherder.mozilla.org/#/jobs?repo=try&revision=326a59b7fc5157dfb2604a1b162e33dba313e5c6

Flags: needinfo?(victoria)

(In reply to Yura Zenevich [:yzen] from comment #8)

Hi Victoria, I added a bit more polish to the tool, I have not done the grid enhancement just yet, but perhaps you would have some time to give ux feedback for the tool? I have the try build here: https://treeherder.mozilla.org/#/jobs?repo=try&revision=326a59b7fc5157dfb2604a1b162e33dba313e5c6

In this version, the inforbar is similar to the box model infobar, except that it gets rendered on the edge only for the out of view-port elements.

Flags: needinfo?(gl)
Pushed by yura.zenevich@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/0597c1b90731
adding NodeTabbingOrderHighlighter highlighter to highlight nodes that are in the tabbing order for a particular target. r=jdescottes,rcaliman
https://hg.mozilla.org/integration/autoland/rev/31ab1181b082
adding TabbingOrderHighlighter that highlights a sequence of nodes within the tabbing order. r=jdescottes
https://hg.mozilla.org/integration/autoland/rev/9112e35d9dd4
add AccessibleWalker functionality to show/hide tabbing order overlay. r=jdescottes,devtools-backward-compat-reviewers
https://hg.mozilla.org/integration/autoland/rev/19610d9a0b86
add UI for displaying tabbing order overlay in the accessibility panel. r=jdescottes,devtools-backward-compat-reviewers

I'm just testing this feature to document for FF84 release (on FF85 nightly). Two questions:

  1. To left of the the Show Tabbing Order checkbox there is a little blue "beta" icon. Will that be present on FF84 when this is released?
  2. Is it a known issue that the tool does not redraw/regenerate the tab order icons when you open and close twisties/toggles on the page? i.e. The https://www.mozilla.org/en-US/privacy/firefox/ has expander toggles with titles like "Measure and support our marketing". If you open the toggle when the checkbox is selected the view does not draw the new tabbing order - you have to check and uncheck the checkbox. Ditto when you close the toggle.
Flags: needinfo?(yzenevich)

PS Will this also be aware of the tab behaviour of Keyboard-navigable JavaScript widgets?

(In reply to Hamish Willee from comment #17)

I'm just testing this feature to document for FF84 release (on FF85 nightly). Two questions:

  1. To left of the the Show Tabbing Order checkbox there is a little blue "beta" icon. Will that be present on FF84 when this is released?

Yes Beta flag will be there. We generally have it for a while (multiple releases) to make sure we address as many potential issues that might get reported as possible.

  1. Is it a known issue that the tool does not redraw/regenerate the tab order icons when you open and close twisties/toggles on the page? i.e. The https://www.mozilla.org/en-US/privacy/firefox/ has expander toggles with titles like "Measure and support our marketing". If you open the toggle when the checkbox is selected the view does not draw the new tabbing order - you have to check and uncheck the checkbox. Ditto when you close the toggle.

Yes, the tool is not dynamic, It will report all focusable elements at the time when it is activated.

Flags: needinfo?(yzenevich)

(In reply to Hamish Willee from comment #18)

PS Will this also be aware of the tab behaviour of Keyboard-navigable JavaScript widgets?

Somewhat related to point 2 in comment 17, if keyboard navigation is done where focus switches as it would typically when tabbing, then yes, if the widget implements custom keyboard handling then likely no. I think there would be not as much overlap between users that want to know tabbing order on a page vs users that are testing keyboard implementation of a particular widget.

Flags: needinfo?(victoria)

FYI only:

(In reply to Hamish Willee from comment #21)

FYI only:

Hi Hamish, thanks a lot for the docs. I only have one observation: we have a sentence that says All selectable items have a numbered marker and the currently selected item is highlighted in a different colour. where I think selectable and selected might be misleading since we really mean focusable and focused (for example users of assistive technology differentiate between selected/selectable states and focused/focusable).

Flags: needinfo?(hamishwillee)

Thanks very much Yura. I have modified that text to say focusable/focussed (I hadn't considered the difference).

Flags: needinfo?(hamishwillee)
Depends on: 1692152
Depends on: 1692155
Depends on: 1692175
You need to log in before you can comment on or make changes to this bug.