[HTML5] Focus management using CSS, HTML, and JavaScript

Posted 2020-09-01 Answer1215

Something important to consider when coding a web application is managing the user‘s focus. For keyboard and screen reader users, we must ensure their focus is not dropped as content is deleted or shown in new contexts. Skip links also provide a way for users to get past a lot of content. In this lesson, you‘ll learn html, CSS and javascript techniques for focus management that can be applied to many situations.

 

For example, you have a list of items, when you want to delete an item, you and want auto foucs on next item‘s delete button.

All what you need to do is to find next item, and send focus onto it.

    $(‘.btn-delete‘).on(‘click‘, function() {
        $(this).parent().remove();
        listItems.find(‘.btn-delete‘).first().focus();
    });

 

Next thing if you want the items which are out of foucs managmenet not to have the outline when you nav around the page.

[tabindex="-1"] {
    outline: 0;
}

 

To build a skip links: It hidden by default, but when we use Tab keyboard, it will shows up.

  <ul class="skip-links">
    <li><a href="#main">Main content</a></li>
    <li><a href="#footer">Global footer</a></li>
  </ul>

ul.skip-links {
    list-style: none;
    position: absolute;
}
    ul.skip-links a {
        background-color: #fff;
        display: block;
        left: -999999px;
        padding: 1em;
        position: absolute;
    }
    ul.skip-links a:focus {
        left: 0;
    }