Repository navigation
Toolbar elements are tabbable #15331
Description
Toolbar elements are tabbable
- Severity: Medium
- Affected Populations:
- Blind
- Motor Impaired
- Cognitively Impaired
- Platform(s):
- All / Universal
- Components affected:
- Editor Top Bar
Issue description
Keyboard-only users who enter the Editor Top Bar must Tab from button to
button. Although this is manageable when there's a small number of
buttons, the group of buttons is given the role of toolbar, whose
purpose (besides grouping related controls) is to lessen the number of
Tab stops keyboard users must make to navigate past widgets.
Screen reader users may be told they are entering a toolbar and expect
to be able to Tab past everything in it. Their experience does not match
the promise of the role.
Screen reader users may also miss the toolbar role when meeting the
first item (an anchor), because roles such as toolbar are sometimes only
announced when users meet items which can trigger their forms/focus
mode. Since the anchor's behaviour is semantically different from the
buttons' (the buttons deal with the editable content, the anchor simply
takes users back), it may make more sense to keep the anchor out of the
toolbar group.
Issue Code
<div role="region" aria-label="Editor top bar" class="edit-post-header" tabindex="-1">
<div role="toolbar" aria-orientation="horizontal" class="edit-post-header-toolbar" aria-label="Document tools">
<div class="components-toolbar components-toolbar edit-post-fullscreen-mode-close__toolbar">
<a href="edit.php?post_type=post" aria-label="View Posts" class="..."><svg aria-hidden="true"...>...</svg></a>
</div>
<div>
<div class="editor-inserter">
<button type="button" aria-label="Add block" aria-haspopup="true" aria-expanded="false" class="...">...</button>
</div>
</div>
<button type="button" aria-label="Undo" aria-disabled="false" class="...">...</button>
<button type="button" aria-label="Redo" aria-disabled="true" class="...">...</button>
<div class="table-of-contents">
<button type="button" aria-label="Content structure" aria-expanded="false" aria-disabled="false" class="...">...</button>
</div>
...
</div>
Remediation Guidance
Move the "View Posts..." anchor out of the role=toolbar section,
so the toolbar only has <button> children.
Although ideally it would be a better use of the toolbar pattern to
implement Arrow-keys only, and not support Tab navigation between items,
this pattern may not be familiar to all users. Adding support for the
Home and End keys (for jumping to the first and last item in the
toolbar) will help here: this will allows users who know the keyboard
pattern for ARIA toolbars to efficiently get past the toolbar, while
leaving the Tab pattern for users who do not.
Recommended Code
<div role="region" aria-label="Editor top bar" class="edit-post-header" tabindex="-1">
<div class="...">
<a href="edit.php?post_type=post" aria-label="View Posts" class="..."><svg aria-hidden="true"...>...</svg></a>
</div>
<div role="toolbar" aria-orientation="horizontal" class="edit-post-header-toolbar" aria-label="Document tools">
<div>
<div class="editor-inserter">
<button type="button" aria-label="Add block" aria-haspopup="true" aria-expanded="false" class="...">...</button>
</div>
</div>
<button type="button" aria-label="Undo" aria-disabled="false" class="...">...</button>
<button type="button" aria-label="Redo" aria-disabled="true" class="...">...</button>
<div class="table-of-contents">
<button type="button" aria-label="Content structure" aria-expanded="false" aria-disabled="false" class="...">...</button>
</div>
</div>
...
</div>
References
https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
Relevant standards
Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-8 in Tenon's report
Activity
afercia commentedon May 1, 2019
Related to the general issue (mentioned several times) that there are too many tab stops when navigating through the blocks UI. See for example #632, #3383, #5694, and #1934 (comment)
melchoyce commentedon May 4, 2019
Screenshot from full report:
afercia commentedon May 5, 2019
Note: this part:
relates to the
view_itemslink with that appears only in "Fullscreen Mode":(the icon was changed in #13403). In default mode, this link is not rendered:
This link needs to be moved out from the
role=toolbarand still be within the "navigate region" landmark.afercia commentedon May 5, 2019
Re: the toolbar general issue, there are a few options. As reported, the purpose of a role=toolbar is:
Reducing the amount of Tab stops is by far the most important goal especially when a toolbar has many buttons. Consider, for example, the "Top Toolbar" option adds several buttons:
More importantly, please consider this applies also to the block toolbars:
As mentioned in other issues and PRs: imagine a post with 10 paragraph blocks. Keyboard navigation through 10 block toolbars like the one in the screenshot above requires 90 tab stops. It could be reduced to just 10 tab stops by implementing only arrows navigation.
However, a good point is that not all users may be familiar with this pattern (although it's a standard pattern widely used also in the operating systems user interfaces).
Options to evaluate:
Keep both arrows key and Tab navigation adding support for the Home and End keys:
Implement only arrows key navigation (and maybe add the roving tabindex pattern):
gziolo commentedon Oct 18, 2019
@diegohaz works on this issue in #17875.
diegohaz commentedon Jun 25, 2020
All toolbar blocks are now working with roving tabindex on master. Should we close this?
gziolo commentedon Jun 25, 2020
Amazing work, let's close 🥳