Dvc.org: [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:

• [x] 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.

• [x] 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 :slightly_smiling_face: 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.