search

executablebooks / sphinx-tabs

Tabbed views for Sphinx
https://sphinx-tabs.readthedocs.io
MIT License
266 stars 68 forks source link

Improve accessibility of tabs #92

Closed foster999 closed 3 years ago

foster999 commented 4 years ago

Describe the bug

Tabs can't be selected and switched using the keyboard alone. This would help to comply with W3C's web accessibility initiative.

To Reproduce

Use the tab key to move through focusable objects on a page containing sphinx-tabs. Tab sets can't be selected or changed to show content on other tabs.

Expected behavior

Users should be able to highlight and switch tabs using the keyboard. This behaviour is exhibited by sphinx-panels tabbed content, where the tab key can be used to select the tab set and arrow keys can be used to switch tab.

foster999 commented 4 years ago

Looking into doing this, but the best approach might be to replace the a tag-based tabs here with buttons and use the tab role. The example on that link doesn't look too dissimilar to sphinx-tabs anyway 😄

A further accessibility issue is that the tab label colour doesn't contrast strongly enough against the background. #1D5C87 would be the lightest equivalent that meets the standard.

@pradyunsg it might be best to get this sorted before overhauling the JS? Happy to help with either. I'd also be supportive of changing the tabs appearance, but think we should at least provide a theme/option that looks similar to the current tabs for backwards compatibility.

pradyunsg commented 4 years ago

@pradyunsg it might be best to get this sorted before overhauling the JS?

Ahoy! I doubt I'd be coming around to the overhaul anytime soon -- it ended up being easier to write a separate minimal plugin instead. Context here.

Please do feel free to move ahead without waiting on me to do a rewrite here. :)