Sexy and accessible focus state on keyboard navigation
Accessible keyboard navigation can follow your brand’s visual standards
There are some myths surrounding accessibility, and one of them is that it impacts the appearance. There are, however, several ways to create accessible and diverse sites without necessarily fleeing from the brand manual.
After all, who said an accessible site is ugly? Let’s uncomplicate it.
But what the hell is keyboard navigation?
The keyboard serves as an alternative method of navigation to the computer mouse and can be beneficial and even essential for some people. There are two main groups that need to be taken into account:
- People with visual impairments, especially low vision, may have problems seeing or following the pointer’s path on the screen;
- People with some level and type of mobility reduction in their hands, whether due to tremors, paralysis, difficulty in movement and others, derived from illnesses or disabilities, find it easier to navigate using the keyboard, which requires precise movements.
How it works
Keyboard navigation is done via the TAB key, which will navigate by functional elements, and the directional arrows will help you go back and forth, as well as entering options within a dropdown. You can test this type of browsing at any time while visiting a website on your computer.
Default browser focus
People who depend on the keyboard to navigate and use it with the aid of their eyes- that is, disregarding uses with a screen reader — depend on visual cues to know where they are on the screen.
Therefore, there is a native HTML state called focus (just like hover) that serves to define the changes that will occur when an element receives keyboard focus (if it is a focusable element, but we’ll see it later).
When an element receives focus, the default setting for that state in browsers is a blue outline around it. Some designers or developers choose to remove it via CSS, perhaps because they don’t know how important it is. In this way, the visual cue that allows this navigation disappears.
But then I need to use the infamous blue outline?
The blue border may often not match the brand and therefore may be very out of the style guide standards. The good news, however, is that there is a way out for everything.
How to make features navigable from the keyboard
First of all, we need to ensure that all functional elements are navigable. For that, we need to include the tabindex, which will ensure focus. Some elements are naturally navigable, such as form elements: <button>, <input> etc. See an example applied to a link.
Everything can be good with CSS
The outline parameter is not so flexible to customize, but you can hide it with outline: none; and use pseudo-elements to simulate that state.
We won’t go into technical details, but in short, pseudo-elements are meant to include elements without having to add them in HTML. In this case, we will use ::before .
Example
First of all, we create the button with all its size and color settings and remove the outline in focus state. Don’t forget to apply position: relative; so that the pseudo-element has a place to anchor.
Next, we define the pseudo-element’s attributes with button:focus::before, applying the selected border (in this case, we use 2px black with the border-radius a little bigger than the button).
To conform to WCAG, let’s make this border a little bigger than the button and position it so that it goes around it. To do this, we calculate the width and height so that the border has the same size as the button (100%) + the spacing and width pixels of the border itself (+4px). We apply position: absolute; to allow us to better position it and top and left of -4px so that it is centered horizontally and vertically with the button.
And in a short time, we get a result like this:
Et voilà!
This is just an example made to illustrate the explanation, but you can play around with animations and transition effects — just don’t forget to let users turn off these effects if they want, as it can cause dizziness if the person is predisposed to that.
With little effort, it is possible to create accessible products and content, without straying from the brand’s design standards. Accessibility must be beautiful, functional and inclusive all at the same time.
