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:
- they must have a 3:1 contrast ratio from the surrounding non-link text.
- 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.
Code Walkthrough of the Above Example
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 "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:
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
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
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.
Code Walkthrough of the Above Example
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
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
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:
-
tabindex="0"set (to make them keyboard accessible) -
role="link", so that a screen reader reports them correctly.
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.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.