Website Accessibility Tips #4: form field focus outline

My Website Accessibility Tip #2 (link below) was about adding a strong outline to all your form fields so all users can clearly see them - tip #4 is similar, but different.

When a website visitor navigates through your website using a keyboard, it's standard practice (or it should be!) to have interactive elements, like links (image and text) and form fields to have a distinctive outline when that element receives 'focus'.

What does this mean? An element is said to have focus when it is the active element that is triggered by pressing the enter/return key or by clicking a mouse button or by giving a voice command etc.

Providing a distinctive outline to the element in focus helps all users to identify the active element and to understand what is likely to happen if they activate the element e.g. if they click on a navigation menu item, or if they start typing when a form field has focus.

Luckily for all of us, most web browsers have focus outlines already built in! Not so lucky for many of us, many websites have this in-built style overwritten, either through the design process - if the outline doesn't fit the aesthetic the designer is aiming for - or due to a particular web builder that may have been used to generate the site.

In the case of it being a design decision to hide the focus outline, this can be quickly remedied by the designer adding an outline style to the site that matches the colour palette/branding etc or by removing the restriction all together.

How can you tell if the focus outline works on your site? Visit any page on your website and start tabbing through the page using the tab key on your keyboard. If an interactive element like a link displays an outline at some point in your journey then outlines are working! Better yet, test your web forms to see if the field that receives focus also displays a distinctive outline. Forms are often overlooked or styled poorly, rendering them not friendly to users.

If your site doesn't show focus outlines, ask your web designer to fix this very useful tool for navigating your website.