[accessibility] keyboard navigation is broken and some interactive elements are missing focus styles.

[nisarhassan12]

According to WCAG and WAI websites and web apps must be fully operable via the keyboard.

There is a short video that tells why it is important:

Web Accessibility Perspectives: Keyboard Compatibility

Here are a few things that should be done:

• Focus styles must be added to all interactive elements(most of the elements already have them but some of them are missing focus styles). Without the focus keyboard, users can get lost i.e they won't be able to easily know where the current focus is or what interactive element they are on. https://slack.com is a good example of an accessible site. they use an outlined border around links when they receive focus:

The elements that are missing focus styles are anchors, and images that are wrapped by anchors, docs navigation, docs side panel and a few buttons.

• Apart from the focus state styles there must be a tabbing order for keyboard users and dropdowns should reveal their content when they receive focus.

• the hamburger menu is missing keyboard support i.e users should be able to open the menu via tabbing to the hamburger and then pressing enter which will make the menu appear.

• On Desktop when the hamburger menu is hidden visually it should also be inaccessible to the keyboard users as well. Currently, On the Desktop to get to the contents on any page(below the nav) I have to first tab through 2 navigations with the exact same links.

[nisarhassan12]

Sometimes what happens is designers don't like the outlines or dotted borders around elements but their value for accessibility can't be ignored.

There is a way via which we can only make the outlines or specific focus styles appear when the user is navigating the content using a keyboard. For instance, https://gitpod.io is a good example which does that.

[nisarhassan12]

I volunteer to make small Prs related to accessibility 🙂 I'll start off by making a PR for focus styles for Keyboard users only.

[nisarhassan12]

It would be nice if someone else can work on it.

[julieg18]

dropdowns should reveal their content when they receive focus.

I believe this is optional. As long as a keyboard user is able to access a dropdown by pressing enter, the dropdown is accessible. Tabbing is still missing on a couple parts of the websites but once we get those fixed, we should be good to close this issue!

Looked through the site and found areas that are having issues with keyboard navigation:

• Our banner is still focusable when hidden
• Our mobile menu and docs mobile menu can be tabbed out of
• The docs mobile menu is still focusable when hidden
• Docs details blocks cannot be opened with keyboard, but the user can still tab through the links inside the details block
• Footer is missing outlines (most likely due to its dark background)
• Our /community#testimonial iframe is not focusable but that is made by an 3rd party so as far as I know, we are unable to fix that one :(

[jorgeorpinel]

Hi @julieg18 . Should we transfer this issue to the theme repo, or is it dvc.org-specific? Assuming it's still relevant