# Creating valid and accessible links

DevFeed: [Creating valid and accessible links](<https://devfeed.tech/articles/creating-valid-and-accessible-links-9379.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/creating-valid-and-accessible-links/>)

Author: Emma Patricios

Published: 2019-02-15T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [web-standards](<https://devfeed.tech/topics/web-standards.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Scripting](<https://devfeed.tech/topics/scripting.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [css](<https://devfeed.tech/tags/css.md>), [html](<https://devfeed.tech/tags/html.md>), [scripting](<https://devfeed.tech/tags/scripting.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

This article explains how to create valid and accessible HTML links. It covers required link structure, meaningful link text, cautious use of the title attribute, visible keyboard focus states, and preserving native keyboard behavior.

## Source excerpt

The anchor element is often cited as the main building block of the World Wide Web. It is used to create a link to other pages, to anchors within the same page, to other resources (such as a PDF) or to an email address. How can we make sure they are accessible to everyone? Start with valid HTML To be a valid link it must have: A href attribute: The location of the anchor, page or resource. Link content Text describing where the link is going, this could be plain text or the alt attribute of an image. Opening and closing tags. Write helpful link text Common unhelpful link texts are 'click here', 'read more' and 'link'. These are problematic because when a person using a screen reader is navigating using links alone these will be read out of context. Where would you expect any of those three links to go if you heard them? It's impossible to know. Think about restructuring your sentence to remove 'click here' or 'link' and then surround the meaningful part with the link: <!-- bad --> To see our documentation <a href="/README.md">click here</a>. <!-- better --> We have made our <a href="/README.md">documentation</a> available. "Read more" can be fixed by including what we will be reading more about: <!-- bad --> <a href="/full-article">Read more</a>. <!-- better --> <a href="/full-article">Read more - Accessible Landmarks</a> What about the title attribute? The title attribute is not exposed by all browsers in an accessible way meaning that people using keyboards and touch-only devices will likely never see that information. If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute. Using the HTML title attribute - TTPGi It is therefore not recommended to use the title attribute on <a> elements. If you do use it don't double up on the accessible name of the link, this can produce unnecessary duplicate announcements to some screen readers. Focus state and keyboard Some developers/designers se