Links

Links serve a couple of purposes on a web page, and they can be very useful for accessibility purposes, and they can also cause problems if they’re created poorly.  Lets take a look at a couple of critical things:

The Link Tag

One of the things that can confuse people who are new to HTML is that the link tag is actually an “a” tag — the “a” is for “anchor”.  The A tag always has an attribute (“href=”) the identifies where the link will take the user when the link is clicked on, and everything between the <a> tag and the closing </a> tag will be the clickable part of the page.

So, a simple link could look like this:

<a href="https://wichita.edu">Wichita State University</a>

When a screen reader encounters that, it will read the text of the link, in this case “Wichita State University” and will indicate that it’s a link.

Link Problem 1: Raw Addresses

WYSIWYG editors tend to teach us some bad habits because of the way they help us create our pages, anticipating our needs and helping to make things work for us. An example of that is the way we can simply paste a raw address into a content area, and most WYSIWYG editors will turn that into a link on the page — using the address as both the text of the link and the address it will send people to.

The problem when that happens is what the screen reader reads to a user — it will read the full address. So, a bad version of the link above might look like this:

<a href="https://www.wichita.edu">https://www.wichita.edu</a>

A screen reader that reads that to the user would have to read out the link, letter by letter, which would sound like “h-t-t-p-s-colon-backslash-backslash-w-w-w-period-w-i-c-h-t-a-period-e-d-u”. As you can imagine, that’s a major usability problem — it essentially stops the user’s ability to understand what’s going on in the content of the page and is  nearly impossible to comprehend.  And, keep in mind that my example is very simple, only including about 24 characters — web addresses can easily be four times that long.

So, it’s an accessibility and usability problem to present raw links on the page, even if our WYSIWYG editors make that possible.  In most cases, your editor will have a link tool that lets you create the link, so take the few extra seconds to create the link properly.

Link Problem 2: Generic Link Text

Another problem that we see frequently is links that are just the text “click here.”  Often, it’s part of a sentence like “Click here to go to the Wichita State University home page” where the “click here” is the link.

That seems like it ought to be fine in context, but one of the key features that a screen reader provides to a user is the ability to review just the links on a web page — this gives a user who is using a screen reader the ability to quickly scan a web page they need to pass through for the link to the next page they need. However, if we do not provide descriptive text within the link that makes it clear where the link goes to, all the user will hear is “Click Here.”

So, a good link has enough unique information to make it clear where the link will take the user.  We might rewrite that sentence to read “Go to the Wichita State University web page” and make “Wichita State University” the link text.

Links and Anchors

Links can also link to parts of a web page — which is a way to help users move around within a large page to find what they need.  This is a feature we’ll talk about in an upcoming topic.