Improving keyboard accessibility in PushOwl Dashboard

It is important to make sure that your app is usable by keyboard without a mouse to make sure that both power users and users on assistive devices can use your app without issues. Here are common keyboard issues that we fixed in the PushOwl dashboard to make it more accessible.

1. Use semantic elements

Using semantic elements instead of div and span will fix your keyboard accessibility issues and also make sure your app is accessible by screen readers. When you have links that look like buttons it is important to make them actual links. When you build custom elements do make sure they support the same keyboard navigation as the native one for example if you build a custom checkbox it should allow selection with a space key similar to how a native checkbox does.

2. Add skip links

When your webpage has navigation links users have to navigate through them with the tab key first to reach the main content.  Skip links provide you with a way to skip the navigation and go to the main content. If you have multiple sections in your app you could even provide multiple skip links to jump directly to those sections.

3. Fixing focus order

When you tab through the elements in the page the focus should move to the next element in the page (usually from top to bottom and left to right). If elements appear in a different position visually compared to their order in the DOM, then it might cause the focus to jump to unexpected positions causing confusion.

4. Don't remove the focus indicator

When you focus the element browser adds a focus ring around the element to indicate that element is being focused. Instead of removing this focus indicator you can style it with an outline or replace it with a border in case you want this focus ring to have a border radius.

5. Roving focus for Arrow key navigation

Dropdown, like other elements, should be focusable by tab but to navigate within a dropdown you can add support for arrow keys. The way you do this is by a method called Roving focus.

In roving focus

1. You make the tabIndex of the focused element to 0 and tabIndex of all other items in the list to -1
2. When the arrow key is pressed you make the tabIndex of the next element to 0 and all other tabIndex to -1
3. When you reach the end of the list you loop over to the first element in that list

Read more about roving focus.

6. Focus trap in modal

When a modal is opened, the user should not be able to focus elements behind the modal using the keyboard till the modal gets closed. dialog element can help us do this but since browser support for dialog element is not good enough we would need js to solve this. Fortunately for us, focus-trap helps with this.

1. focus-trap gets a reference to all the focusable elements within the modal
2. When you press the tab key it checks if the next element to be focused on is one within the list if not it shifts focus to the first focusable element in the modal

Read more about focus trap.