Default link styling and accessibility

I’ve noticed that more and more designers are removing the default styling of links. By default, a link will display an outline when it receives focus from the keyboard. In other words when using the tab key to navigate through links on a page, each time you advance to a link, that link is highlighted visually by default. An outline will appear around the link.

With CSS you can override this behavior with the declaration outline:none. Please don’t do this.

After overriding the default behavior, anyone using the keyboard to navigate links on your site will receive no indication of where they are on the page. You have just provided a barrier to access for some of your users, and have most likely annoyed them. Some portion of your audience will need or prefer to use the keyboard for navigation. If they have to use your site for some reason, they will do so grudgingly. If they do not have to use your site, they may go elsewhere.

If you insist on removing the default link styling, at the very least provide an indicator with the focus pseudo-class, a:focus, so that users receive some feedback. There may be a case where the default outline looks so bad on a specific design element that you need to remove it to preserve the design integrity, but this should be an exception and not the rule.

Leave a Reply

Your email address will not be published.

%d bloggers like this: