Focus

Tue Apr 11 2017

Focus Interaction

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.

Focus input with mouse

 

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.

Shift and Alt Shift

 

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.

Using the space/up/down to interact with components

Focus Order

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.

Input Order

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.

Input float right

Tabindex

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>

Tabindex default

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;
  • 0 means 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>

Tabindex

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.

Focus()

We can, of course, use the JavaScript focus method to programmatically focus an element.

document.querySelector("#email").focus()

Skip Links

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.

Skip links

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.

Side Nav Navigation Error

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.

Keyboard Traps

In this example we have a modal window. When we are located in the modal we navigate around but after a while the focus escapes the modal and returns to our main page. To fix this we could set the tabindex of the page to -1 or we can handle the tab event programmatically through JavaScript so we can manually navigate our user around. Either way, it is important to have this in mind while working with focused areas in our application.

Keyboard traps

 

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!