Link Accessibility

As one of the most basic elements of web accessibility, hyperlinks help users navigate from one web page to another and access different types of digital content. While creating hyperlinks is easy, making them accessible to all users — including those who rely on screen readers to interact with online content — takes careful consideration. Let’s go over a few best practices on creating accessible links in text, call-to-action buttons, and images.

Generally speaking, there are three types of links that need to be accessible: 

• Hypertext: Links within text, like the example below: the Wikipedia page for hyperlinks with at least 20 links in the text alone.
• Image links: Images, including call-to-action buttons, that link to another page or file.
• Adjacent links: Two links next to each other that go to the same location. For example, an image and the text beneath it linking to the same page.

Anchor text is a linked or clickable text. Here are a few best practices for writing helpful and meaningful anchor text. 

Write clear, concise, and descriptive anchor text. Screen reader users may skip the surrounding content and just navigate the links, so make sure your anchor text makes sense out of context. 

Don't use the URL as an anchor text. For example, to send site visitors to a “Help Center,” write ”For additional support, visit our Help Center,” instead of ”For additional support, visit our Help Center at https://help.audioeye.com/hc/en-us." 

Avoid using general phrases and words, such as "click here" or "more" as anchor text — they don’t provide any helpful information and can confuse screen readers and people who can’t use a mouse or trackpad to click on content. 

Finally, make sure your links are easy to spot on the page. For example, all anchor text on this page is purple and underlined. The unique color draws attention to links and underlining text makes it more accessible to people with color blindness.

According to Web Content Accessibility Guidelines (WCAG), images (think logos, icons) and buttons that contain links are considered "functional images." 

There are several web accessibility buttons and image best practices, but the most important rule is to always add alt text that tells the user where the link will take them, instead of describing the image. For instance, the alt text for "Start Free Trial" button at the top right of this screen says “Start free trial,” instead of "Purple button reading start free trial." 

If you want an image itself to be accessible to all users and search engines (think of pictures and photographs vs buttons), then don't use it as a link and instead add a detailed description of the image in alt text. 

You can use Javascript, CSS, or HTML to make buttons or images (linked or not) accessible.

In addition to alt text mentioned earlier, you need to consider color, contrast, and, if relevant, font size and shape when creating linked buttons and images. 

When it comes to designing accessible buttons, there are three basic types to consider:

• Primary Buttons: The most important buttons on the page. For example, calls to action that are highly relevant to the page content. 
• Secondary Buttons: Actions you would like users to take, such as a free demo request.
• Tertiary Buttons: Buttons of lower priority, such as making changes to account settings.

Ultimately, it's up to you to prioritize buttons on any given page. The key is to make the most relevant and important action steps easily accessible to all users. 

Make sure your primary, secondary, and tertiary buttons are similar, but not identical. For instance, all three types can have the same shape, but different colors. One exception is when you are linking to an outside source using their logo. In that case, you don't need to change the logo to conform to your design convention.

Finally, use the same call to action for buttons that lead to the same page. For example, if you have two buttons linking to a single contact page, use "Contact Us" for both, instead of writing “Contact Us” on one and “Email us” on the other.

Link accessibility is essential to ensure WCAG and the Americans with Disabilities Act (ADA) compliance, and to make your content accessible to all users, regardless of ability. 

In summary, make sure every link you use is: 

• Clearly identified as a link
• Descriptive, but concise
• Designed following minimum-size standards (14 points for font, 44x44 pixels for images)
• Usable by screen readers, keyboards, and people with limited mobility 

This may sound like a lot of work, especially if you need to review your website and ensure each page adheres to WCAG. But it’s a lot easier when you know where to start. Use the AudioEye scanner to check your site’s accessibility score and learn which issues need to be addressed right away.