search

pradyunsg / sphinx-inline-tabs

Add inline tabbed content to your Sphinx documentation. (maintained, though extremely stable as of Jan 2022)
https://sphinx-inline-tabs.readthedocs.io/
MIT License
82 stars 14 forks source link

Investigate accessibility of this tab design #2

Open pradyunsg opened 4 years ago

pradyunsg commented 4 years ago

I'm not a 100% sure if this tab design is super accessible, even though it does work and is keyboard-navigable. Me/Someone should probably spend some time investigating whether this design is indeed accessible, and how we can improve things here if needed.

A useful place to start reading would be https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role.

not-my-profile commented 3 years ago

Just wanted to open an issue; but am replying here since it's relevant:

Disabling the focus outline is bad for keyboard accessibility.

https://github.com/pradyunsg/sphinx-inline-tabs/blob/97e409eec35f67224f48e13311fe8448d7027778/src/sphinx_inline_tabs/static/tabs.css#L58

If you hit Tab you should see which element has the focus, making the focus invisible makes keyboard navigation very confusing.

pradyunsg commented 2 years ago

bad for keyboard accessibility.

Yea... experimenting with this extension a bunch, it seems to me that there's a bit of work necessary to improve the keyboard accessibility of this extensions.

nineteendo commented 2 weeks ago

There should be at least a single distinction when the tabs are focused:

.tab-set > input:focus + label {
    outline-style: auto;
}

Because it's easy to lose track of what is selected.

nineteendo commented 2 weeks ago

Also, the tabs don't sync when selected with the keyboard.