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.

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!

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:

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?

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.

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 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.

Depends on D94923

Depends on D94924

Depends on D94925

https://hg.mozilla.org/mozilla-central/rev/0597c1b90731
https://hg.mozilla.org/mozilla-central/rev/31ab1181b082
https://hg.mozilla.org/mozilla-central/rev/9112e35d9dd4
https://hg.mozilla.org/mozilla-central/rev/19610d9a0b86

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.

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.

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.

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

(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.

FYI only:

• Docs for this feature have been added (in preparation for FF84 release) in: Firefox Developer Tools > Accessibility Inspector > Show tabbing order.
• More info on what was done here: https://github.com/mdn/sprints/issues/3908#issuecomment-728565606

(In reply to Hamish Willee from comment #21)

FYI only:

• Docs for this feature have been added (in preparation for FF84 release) in: Firefox Developer Tools > Accessibility Inspector > Show tabbing order.
• More info on what was done here: https://github.com/mdn/sprints/issues/3908#issuecomment-728565606

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).

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