Art of creating accessible link
Tags: a11y, webdev, html
Published: 2023-09-24 11:46:21

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="https://www.google.com" role="link" aria-label="Visit Google">Google</a>
```

## 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="mailto:info@example.com">Click here to get in touch</a>
```
Better Practice:

```
<a href="mailto:info@example.com">Contact us at info@example.com</a>
```

## 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>
```

## 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="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example.com (opens in a new tab)</a>
```

## 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 */
}
```
| FYI: Confusion of using buttons or links. If takes somewhere use links it the submitting form or run the javascript us button
---
## Conclusion

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](https://www.buymeacoffee.com/Rahulmreddy)

## Referrences

- [Creating the perfect link by Rian Rietveld](https://www.a11y-collective.com/blog/the-perfect-link/#h-click-here)
- [Block Links: The Search for a Perfect Solution by Vikas Parashar](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/)
- [Block Links Are a Pain (and Maybe Just a Bad Idea) by Chris Coyier](https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/)