Introduction

Have you ever created a button in HTML and styled it with CSS? Well, if you are a Front-End developer, I guess you have done it a lot. But, what about your buttons accessibility? Have you ever tried to use your own website with a keyboard only? In this article my goal is to show you a tip to improve accessibility in the buttons that you create for allowing as many users as possible to interact with your website in a good manner.

The Problem

Firstly, let's start with the most common button that you would see. (I'll be using an anchor to keep HTML semantic in the example, but what I'll show you applies to buttons, links, or anything that is clickable.)

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Simple website</title>
  </head>
  <body>
    <header class="header">
      <nav>
        <ul class="header-ul">
          <li><a class="header-link" href="/">Home</a></li>
          <li><a class="header-link" href="/info">Info</a></li>
          <li><a class="header-link" href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --header-bg: #0a0a0a;
  --header-font: #fff;
}

.header {
  padding: 10px;
  background: var(--header-bg);
}

.header-ul {
  display: flex;
  justify-content: flex-end;
  column-gap: 10px;
  list-style-type: none;
}

.header-link {
  color: var(--header-font);
  text-decoration: none;
  padding: 10px;
  display: block;
  position: relative;
  outline: 0; /**Most CSS resets out there apply this rule in some form.*/
}

.header-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 5px;
  background-color: var(--header-font);
  transition: all 0.4s ease;
}

.header-link:hover::before {
  width: 100%;
}

The functioning

You can see in the GIF above that the styling is working properly, but, there is one problem, if someone with a disability that could only use the keyboard to navigate inside the website tried to use it they would not be able to see the style on the hover effect, because the hover pseudo-class activate only when your cursor enters the element.

Using Only Keyboard

Applying Focus Style

To fix this problem, we could use the pseudo-class focus. This pseudo-class is activated for the current element that has received focus, such as a click or tab navigation in our example.

.header-link:hover::before,
.header-link:focus::before {
  width: 100%;
}

We can still reuse the style from the hover effect; we just need to apply it too when the element is being focused with the syntax (class, element tag or element id):focus

After Applying The Focus Pseudo-Class

In the GIF above is being demonstrated the example with the focus, now the user know which link is been current seen when using the keyboard instead of seeing nothing, this is a little change in our code but can benefit tons of users out there who use only the keyboard to navigate on the website.

A Tip To Improve Buttons Accessibility In Your Websites