inert.js use this script to manage the focus behavior on the visible elements
Focus
Focus: selecting an element and then directing all the keyboard events to that element.
The order of the elements inserted on the page is known as the tab order.
Tab order is inferred by the DOM order of the markup.
If you work on a really big site or an application, try tabbing through the user experience and see if we have a sensible tab order and if not, maybe we need to go in and sort of arrange the DOM a little bit to make things a bit nicer for the users.
TabIndex
// to programatically setting the focus
document.querySelector('[tabindex="-1"]').focus();
tabindex = -1 can be useful for situations where maybe we need to manage focus or move focus somewhere else in the page for the more efficient tabbing experience of the user, or you can use it when you need to temporarily disable a custom interactive control.
tabindex > 0 will on top of the tab order.
tabindex value of greater than zero is kind of considered an anti-pattern, and the reason is becuase, a bunch of different components on your page all with different tabindex values that are greater than zero, your focus order is just going to kind of bounce around like a pinball. It might not make a lot of sense to the users and who use a screen reader, so you really don't have any guarantee that those users are going to necessarily land on those higher tabindex controls before something else in the document.
So the general best practice, if you want something to be higher in the tab order, you should just move it earlier in the DOM.
Screen Readers
Non-sighted users use screen readers to navigate the page.
a Screen reader navigates the DOM in a linear fashion.
The accessible tree will be created and given to the screen reader and it generates the spoken UI for the user.
Voice Over - for MAC
NVDA (Non-visual desktop access) - is an open-source screen reader for windows.
you can start running the program by holding Ctrl + Alt + N.
To close NVDA, press NVDA + Q.
Best Practices:
TabIndex - if you want something to be higher in the tab order don't set tabIndex value to greater than 0, rather you should just move it earlier in the DOM.
Stick to the native elements ex: buttons, don't use <a> or <div> as a clickable button.
- reasons: 1) this will cause issues with Screen readers.
- 2) disable buttons will be removed from the focus order, button disbaled divs can have the focus order
- 3) native buttons have the keyboard support like spacebar/enter key but div/anchor elements doesn't.
- (Screen readers will announce like 'Sign up' group if you use div as a button but if you use a native button, then it actually announce the proper role to the user like 'Sign up' button and the user can take an action to sign up for our application.
High level Accessibility Audits:
Some of the things I look for are: - Does the tab order make sense and can I reach all controls on the page? - Is there a clear focus indicator for interactive controls? - Are there any offscreen elements that should not be focusable? - Can I traverse the page with a screen reader without getting stuck? - Is there appropriate alt text on images? - Do custom controls work with a screen reader? - Is the user alerted to new content added to the page? - Are there appropriate headings? - Are there landmark elements? - Is the text high contrast enough to be readable? And here are some of the tools I like to use: - Chrome aXe extension: https://goo.gl/67Bm24 - Chrome accessibility devtools extension: https://goo.gl/DvAxi2 - aXe-core: https://github.com/dequelabs/axe-core for accessibility automated testing in the build process