Creating links - Accessibility side

Introduction

Accessibility is one of the most ignored subject between developers in day-to-day developing. And I argue you to visit Accessibility brief to know how accessibility is an important factor to concern on your next project


Anchor tag

The anchor tag is approximately the main building block of any project you worked on or you will work on, It can be used to refer to another:

  • Page on the same website or another website.
  • A section on the same page.
  • External resource Like PDF, images...etc.

Below we will look at how we can create an accessible link with valid HTML and meaningful text.

to create and valid link, it should consist of:

  1. Opening and closing anchor tag
  2. href attribute => that refer to the location of the link
  3. Link text => text that describes where's a link will go

Helpful & Meaningful text

Imagin blind person using screen readers to navigate the web and your link told him 'Read more' Or 'Click here' what should he get from these words? it's making his mission harder to explore your website.

so let's take an example of bad link text and how to convert it into a good one

 <!-- FROM -->
 To check our documentation <a href="documentation.html"> click here </a>
 <!-- TO -->
 Check our <a href="documentation.html"> documentation</a>

You can fix *'Read more' by including what we will be reading more about:

<!-- FROM -->
<a href="accessibility"> Read more </a>
<!-- TO -->
<a href="accessibility"> Read more about Accessibility </a>

TITLE Attribute

The title attribute is not exposed by all browsers in an accessible way meaning that people using keyboards and touch-only devices will likely never see that information. It is therefore not recommended to use the title attribute on <a> elements. If you do use it don’t double up on the accessible name of the link, this can produce unnecessary duplicate announcements to some screen readers

Okay, till know we're doing so good, But when we should

use button instead <a> tag:

  1. href attr is empty.
  2. Event handler attached to onclick event.

This will probably be triggering an action on the same page, such as opening a menu or toggling content and as such is a much better candidate for the button element.

HTML5#HTML5HTML#HTML

Comments (0)