Ensure links can be used by screen readers

To work with accessibility technologies, links must contain both machine-readable text, and a href attribute. If a link is not actually pointing to a page or part of a page, it should be replaced with another semantic element, such as a button, or the <a> tag should have a role of button.

For example:

<a href="/about">About us</a>

If the link contains nothing but an image, that image should specify alternative text, e.g.

<a href="/apple">
    <img src="apple.png" alt="Apple">
</a>

Before HTML5, an anchor was often used to create a target to link to, e.g.

<a name="example"></a>

This is not supported in HTML5, and the use of anchors for targets is discouraged. Use an id attribute on a non-anchor tag instead, e.g.

<div id="example"> ... </div>

Empty links (e.g. <a></a>) are often incorrectly used for buttons or controls in a JavaScript application. In these cases, you should usually define the link as having a more appropriate role, e.g. as a button. To do this, use the role attribute (e.g <a role="button">), or replace the <a> tag with a more appropriate tag, such as <button>.

For more details, see Technique H91 and learn about ARIA roles.