DEV Community

Cover image for Art of creating accessible link
RahulReddy for This is Learning

Posted on

Art of creating accessible link

Hyperlinks are the backbone of web navigation, allowing users to seamlessly move between web pages and access valuable content. However, creating accessible hyperlinks is essential to ensure that all users, including those with disabilities, can interact with your website effectively. In this blog post, we will explore best practices for creating accessible hyperlinks, providing examples that adhere to these guidelines.

The Importance of Accessible Hyperlinks

Accessible hyperlinks not only make your website more user-friendly but also contribute to better search engine optimization (SEO). They improve the overall user experience, leading to higher user engagement and satisfaction.

1. Use the Appropriate Role and Accessible Name

When marking up hyperlinks, it's crucial to specify the appropriate role and provide an accessible name. The role defines the nature of the element, such as whether it's a link, button, or image, while the accessible name is the text that is presented to screen reader users.

<a href="" role="link" aria-label="Visit Google">Google</a>
Enter fullscreen mode Exit fullscreen mode

2. Avoid Generic Link Text

Avoid using generic link text like "click here" or "read more." Instead, use descriptive and meaningful link text that conveys the link's purpose.

Bad practice:

<a href="">Click here to get in touch</a>
Enter fullscreen mode Exit fullscreen mode

Better Practice:

<a href="">Contact us at</a>
Enter fullscreen mode Exit fullscreen mode

3. Provide Context and File Information

When linking to files, inform users of the file format and size. This helps users understand what to expect before clicking on the link and prevents unexpected changes in context.

<a href="documents/report.pdf">Download our annual report (PDF, 2.5 MB)</a>
Enter fullscreen mode Exit fullscreen mode

4. Inform Users of New Windows or Tabs

When a hyperlink opens in a new window or tab, it's essential to inform users of this behaviour to prevent confusion.

<a href="" target="_blank" rel="noopener noreferrer">Visit (opens in a new tab)</a>
Enter fullscreen mode Exit fullscreen mode

5. Style Links for Clarity and Consistency

Use CSS to style links appropriately for different states (unvisited, visited, hovered, active, and focused). Clear and consistent link styling improves usability and helps users understand their current interaction state.

a:link {
    color: #0077cc; /* unvisited link */

a:visited {
    color: #551a8b; /* visited link */

a:hover {
    color: #ff6600; /* mouse over link */

a:active {
    color: #ff0000; /* selected link */

a:focus {
    outline: 2px solid #00f; /* keyboard focus */
Enter fullscreen mode Exit fullscreen mode
FYI: Confusion of using buttons or links. If takes somewhere use links it the submitting form or run the javascript us button


Creating accessible hyperlinks is not only a best practice for web development but also a way to improve SEO and user satisfaction. By following these guidelines and examples, you can create a web environment that is welcoming and inclusive for all users, regardless of their abilities. Making your hyperlinks accessible is a small but significant step toward a more inclusive and user-friendly website.

If you would like to support my blogs/for a coffee - BuyMeCoffee


Top comments (2)

artydev profile image

Thank you

cyrez profile image
Cyril Rezé • Edited


You don't need role link for a <a> element (it already implies it is a link).

Note: aria-label is intended for use on interactive elements, or elements made to be interactive via other ARIA declarations, when there is no appropriate text visible in the DOM that could be referenced as a label

So, setting link like bellow is ok for accessibility (a screen reader will announce the link, and we know it's Google).

<a href="">Google</a>