A first important subject is focus. Focus determines where keyboard events go in the page.
We are used to focus from input fields, we usually move our mouse in the input field we want to interact with and once we click on it, it focuses and now consumes our keyboard events. Also, when it is in the focus state it usually has a ring around the area.
Also, many users use the keyboard solely for navigation with the Tab button and the Shift + Tab to move backwards. Above, we can see the menu of Full Stack Weekly, where the user navigates through the pages.
Lastly, focus and keyboard interaction is necessary for many users when interacting with UI Components. For example, the dropdown where we can select the dropdown, navigate through the options and select one.
The first thing that we’ll have to be aware of is focus order.
<label>First Name: <input type="text" /></label> <label>Last Name: <input type="text" /></label> <input type="submit" value="Submit" />
For example with the above UI elements when we press the Tab button we will navigate through them the following way.
So every time we press the Tab button we go from up to down and left to right correct? Not Always.
<label style="float:right">First Name: <input type="text" /></label> <label>Last Name: <input type="text" /></label> <input type="submit" value="Submit" />
If someone was to include the float:right the First Name is on the right. When the user clicks on the Tab button the browser will look for the first element which is the First Name input! So we have to be aware that depending of our CSS we may jump around on our side with no logical order if the DOM is nonsensical to the styling.
With the tabindex we can prioritize the navigation of our focus.
<label>Option 1 <input type="checkbox" /></label><br/> <label>Subscribe to our newsletter: <input type="text" /></label><br/> <label>Option 2 <input type="checkbox" /></label><br/> <label>Option 3 <input type="checkbox" /></label><br/> <label>Option 4 <input type="checkbox" /></label>
The default behavior that we would expect from these UI elements while navigating through the Tab focus interaction is the one above. But how could we alter the default behavior. For example we would like to bypass the “Subscribe to our newsletter” section so the user can navigate through the options only.
We can do this with the tabindex attribute. It can have the following values:
- a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
0means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
- a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.
<label>Option 1 <input tabindex="1" type="checkbox" /></label><br/> <label>Subscribe to our newsletter: <input tabindex="-1" type="text" /></label><br/> <label>Option 2 <input tabindex="0" type="checkbox" /></label><br/> <label>Option 3 <input tabindex="2" type="checkbox" /></label><br/> <label>Option 4 <input tabindex="2" type="checkbox" /></label>
So the focus will begin with the tabindex=1 element then go to 2,3, e.t.c. After that it will find 0 and ignore completely the negative ones.
Sometimes we may want to skip content and not focus our way through the whole site. So we may include on the top of our page before navigating to the menu a skip link so users can skip to the content immediately.
Off-screen Elements | Inert
Let us preview a simple example of a Side Nav. If you visit this site http://bstavroulakis.com/demos/webaccessibility/side-nav/ you can preview a simple dashboard with a side nav.
We will first navigate through the site and it will go over the hamburger menu then the search the dropdown and lastly we will lose the focus area while we click on the tab button. Why is that? While we navigate through the site the focus is in the side bar which is hidden. So we navigate through the hidden options although they aren’t visible on the screen.
To fix this we can use the inert polyfill. And if we set the side nav to
document.querySelector(“#sidenav”).inert = true
The focus won’t get locked in that section while it is off-screen. Once we select the menu we can set it to false.