Don’t Leave Users Guessing: The Accessibility Essentials of Clickable Content

This section focuses on checking whether users can clearly tell what is and isn’t clickable on a website. Links and buttons need to be visually distinct, properly coded, and offer clear feedback, especially for users navigating with a keyboard, screen reader, or mobile device. It’s not just about appearance; it’s about functionality and accessibility.

When evaluating link behavior and appearance, you’re looking for consistent cues like underlines or hover states. Users should never have to guess whether text is interactive. You’re also checking that links and buttons are coded correctly and that any links opening in a new window are clearly communicated to all users, not just sighted ones.

What to Look For

Clear Clickability

Clickable links should stand out visually from surrounding text.
Avoid using the same color for links and non-links. For example, using identical shades of blue for both can confuse users.

Hover States and Visual Feedback

Every link and button should visibly change on hover.
If color change is the only hover cue, it must meet a 3:1 contrast ratio to be considered accessible.
Examples that fail: white text changing to light gray on hover, or buttons with no change at all.

New Window Indicators

Links that open in new windows should include a visual icon or note.
This info should also be available to screen readers using appropriate ARIA labels or additional context, otherwise, non-sighted users are left out.

Correct Semantic Structure

Links should use <a> (anchor) tags, not <div> or <span>.
Buttons should use <button> tags or an <a> tag with a proper role and label.
Avoid using title attributes for important info – they can cause screen readers to read content twice.

Real-World Examples

IBM’s website

Uses the same shade of blue for both static text and actual links, especially problematic on mobile.
Visually indicates when a link opens in a new window but doesn’t notify screen reader users.
Result: Sighted users get more information than non-sighted users.

Maryland Tax Connect

Uses anchor tags for links, but some links open new windows with no warning.
Hover effects are minimal, often just a slight color change that fails contrast guidelines.
Some “buttons” are actually <div> elements with no hover state or accessible label, making them unusable for many users.
Placeholder links like “read more” don’t stand out clearly, lacking underlines or meaningful styling.

Best Practices

Use consistent, accessible visual indicators for links (such as underlines or bold text).
Ensure hover and focus states are easy to see and meet contrast requirements.
Clearly mark when a link opens in a new tab or window, for both sighted and non-sighted users.
Stick to semantic HTML: use anchor tags for links and button tags for actions.
Manually test your site – automated tools can miss things like placeholder contrast, link clarity, and dynamic states.

Clear and consistent link behavior improves usability for everyone, and it’s an essential part of building accessible websites.

Transcript

Can the users on the website clearly tell what is and is not clickable? That’s what we’re testing in this part of the quick audit, proper links and link states.

We need to make sure that links are clear and obvious, that they have a clear hover state, identify when they’re going to open in a new window, and that links go places and buttons perform actions, and that links are coded using anchor tags.

IBM Example

Let’s take a look at IBM’s website. Here we have some information. We have this blue text, and later we have the exact same color of blue used for text down here, as well as text in this paragraph. If I’m on a mobile device, I cannot clearly tell that this text up here for developers is not clickable, while this text down here is clickable.

If I were on a mobile device, I would see this bright link blue color, and I would think I could click on that. However, it’s not clickable. That means that people don’t know what is and is not a link, so I would fault them there.

Lower on the page, we can see that they have identified that this IBM research link will open in a new window by providing an icon to visually tell us that it’s going to open in a new window.

Also going to check to see if they have provided anything for a screen reader. As far as I can tell, they have not provided any additional information to let screen reader users know that this will open in a new window.

This next link has just an arrow, and it will be opening in the same window that we’re already in. They have clearly identified what is going to open in a new window, but only for sighted users.

Maryland Tax Connect Example

Now we are going to look at the Maryland Tax Connect website. Here we are going to look at one of their links. The link has a title attribute, which it should not. The title attribute is wrong and will lead some screen readers to double read this, which is rather annoying.

This is opening in a new window, and it does not clearly identify that it will be, which is a failure. The links are correctly using the anchor tag. The hover state on these links is not sufficient. It’s only a slight change of background color. If the only difference on hover is a color change, that color needs to be a change of at least three to one.

White to very light gray is not sufficient. These links here are obvious as they are in a list, making it pretty clear that these are probably going to be links. This link here for the sign up is not sufficient. It is only a color change from the previous text. It does not have an underline or other indicator.

The same is true of the schedule a callback appointment and read more. As they are not sufficient. They should have an underline or other clear identifier to let us know that those are in fact links.

This Home button is a link, and it does not show up with any hover state at all, so that will fail. At the top Top of the website is a button for the Maryland Tax Connect main menu. It does not have any hover state, so that’s an issue, and it is coded as a div, which is also an issue.

It can’t be interacted with because of this coding. It also has no content for anyone, as all it is is three bars, and they are using AriaHiddenTrue. When testing your website for the quick audit, make sure to check your links and link states This is a manual spot checking that you’ll need to go through.

Conclusion

You need to make sure that links are clear and obvious and that they have a clear and obvious hover state. Links need to identify when they open in a new window, and that needs to be for both sighted users and non-sighted users.

Links should be coded using an anchor tag, and they should go places. Buttons should preferably be coded using a button tag, although it is possible to use an anchor tag with a roll of button. Buttons perform actions, leaving you on the same page, such as submitting a form.

Thanks for watching, and make sure to check out the other videos in the quick audit series. If this video was helpful to you, I would really appreciate if you gave it a thumbs up and shared it with your friends on social media.