In praise of accessibility, outline.

Intro

TLDR; Let's be empathic and never remove it.* Scroll to the bottom to see the code.

During my first days as a developer, I was eager to learn anything. I read a book that inspired me to focus on the Front End, was the book The design of everyday things by Donald A. Norman.

My premise is that as developers we can help improve the world, empower and provide people with and trough amazing technology.

One of the main ideas that have stick with me during all those years, is that:

If you are not a pilot and find yourself in a plane cabin trying to operate a plane, you are expected to have problems, but if you are a regular person, it should not be reasonable for you to have difficulties opening a door.

Yet this happens most often that we'd like. If you want to see a better illustrated example, read the book or google Norman doors.

Most developers are not designers, and vice-versa. As a developer you are not expected to provide designed, many times we don't have the skill, nor the sensibility for creating good design, however I think that if you see something that could improve the user experience, you should say something.

Imagine that some requirement arrives to your hands, you are asked to remove that weird line that appears when you click an icon. In CSS, it is a property called an outline.

See the bottom left on the picture, that is the outline.

This incident happened during my work, sometimes this happens, because people are in a hurry or because of mere ignorance. So this post is my creative solution with some open source code that hopefully, will enrich us all.

What is the outline?

Outlines are very similar to borders, one of the differences is that outlines never take up space, as they are drawn outside of an element's content. They usually appear when you focus on a clickable element of a website.

If you use React, you might see an error asking you to include a role attribute or a tab-index. It is in order to ensure that clickable elements in the page, are accessible for users that don't use a mouse.

Why does it matter?

Here is a short list.

• The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with diverse abilities.
• Read the intro again.
• Search Engine Optimization.
• The law in your country might require it.

How to go about it?

First of all. If you are ever asked to remove it, make sure you express your concern and make sure the people making the decisions are aware of the consequences and implications, many times designers remove it due to ignorance or lack of awareness.

Many times they might not know better, I made this code in order to explore alternatives.

Let's keep the web accessible, cheers guys.

Further resources.

• Intro to web accessibility.
• What You Should Know About Accessibility + SEO.
• Stackoverflow: What is the purpose of the role attribute in html.
• Creating an accessible tab component with React.
• An accessibility case study on Sydney Olympics Website.
• Tab Index.
• Web Accessibility Laws and Policies.
• Tool for checking contrast ratio.