Enable

Accessible Links

Don't be fooled -- even if they look like buttons, they are links and should be marked up like links, so screen reader users know what will happen when the press it. In fact, I would argue that links should visually look like links and not buttons (kudos to Adam Silver for articulating this point extremely well).

This page will go through several different types of links, how to code them, and how to add visual cues so users can know what kind of links they are.

Native HTML5

This is the best solution to use, especially when building from scratch.

Everyone who took basic HTML knows how to code these, but there are a few things below that you may have never known about (like how to code a self-referring link). In order to pass WCAG:

  1. they must have a 3:1 contrast ratio from the surrounding non-link text.
  2. they must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus

This paragraph has a few native HTML5 links in it. It is best to use native, non-ARIA links because they are guarenteed to be used in older browsers and other user agents.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Links That "Look Like Buttons"

There are many times where you want a CTA to stick out from the rest of the text, maybe even covering a more prominent and bigger area on the screen. If you make the CTA look like a button, you are being dishonest: it looks like a button, but its not since it has a URL associated with it. In order to distinguish this from other buttons, we should make a small change to it, like adding a right pointing chevron to the CTA like the example below:

Cüneyt Arkın

is a Turkish film actor, director, producer and martial artist. He is widely considered one of the most prominent Turkish actors of all time. Arkın's films have ranged from well-received dramas to mockbusters throughout his career spanning four decades.

Learn more
Portrait shot of Cüneyt Arkın in front of a starry background

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Breadcrumbs

Breadcrumbs are usually at the top of the page after the main nav. Users can use them to navigate the heirarchy that the current page resides.

The styling of this example comes from the W3C WAI-ARIA Authoring Practices page on Breadcrumbs.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.


                    
                

Links That Open a New Window

To find out more information about this subject, read Equalized Digital's page on Links That Open a New Window or Tab (Opens in a new window)

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Using ARIA

If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.

I am not sure why anyone would code a link with anything but an <a> tag, but then again, I am not sure why someone would think Highlander II was a good idea either, so I guess anything's possible.

This paragraph has a few ARIA link tags in it. They are coded as span tags with the following attributes set:

In order for them to be functional, they need to have JavaScript added to them to make them functional. Feel free to use the script we use in this demo if you need to use it.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞