Using aria-label for link purpose (2024)

FAQs

Should I use aria-label for links? ›

The aria-label attribute on links ( a elements with a href attribute) should only be used when, for whatever reason, it is not possible or not desirable to use perceivable link text. (This includes the alt attribute in image links.)

Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.

The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

SEO. Aria-labels can also help with search engine optimization (SEO). Including relevant keywords in aria-labels can make it easier for search engines like Google to understand the purpose and meaning of different elements on a page.

In addition to WCAG, another accessibility web standard related to SEO is Accessible Rich Internet Applications (ARIA). It's a code attribute that expands HTML's capabilities to make it easier to optimize your site for screen readers.

Links take the user to a new location, such as a new web page or new section of the current page. Buttons trigger some action, such as showing content on the page that was previously hidden, playing a video, or submitting a form.

ARIA is useful for revising or correcting the role of an element when a different role is necessary to expose to users. However, it is rarely in the user or author's best interest to try and use ARIA to override an interactive element, for instance a button , with a role generally exposed by a non-interactive element.

Description. The aria-hidden attribute can be used to hide non-interactive content from the accessibility API. Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree.

By default, an HTML element will use its text content as the accessibility label. If an element has aria-label , the accessible name becomes the string that it's passed in the attribute.

What is aria-label vs label? ›

The attribute doesn't replace the div, so a screen reader will read out the div text and the label associated with the input. Use a <label> . It is specifically for associating text with a form control. aria-label is designed for providing a text description of some content which a screen reader can't read out.

To sum it up, the `alt` attribute gives alternative text for non-text content, while the `aria-label` attribute gives a textual label for an element without a visible label. Both attributes make web content more accessible, but they are used in different contexts.

Keep link text short where possible. Don't write lengthy link text such as a sentence or short paragraph. Place important words at the beginning of the link text.

TL;DR. It's common to display multiple links with the same text on a web page — such as 'read more' in a list of blog posts. To improve the web page experience for people who use screen readers and accessibility tools, add an aria-label to the anchor element with text that differentiates the content of the onward links ...

The aria-label should be used to provide a text alternative to an element that has no visible text on the screen.

For the HTML <img> element, use the alt attribute. For all other elements with the img role, use aria-labelledby if a visible label is present, otherwise use aria-label .

The title attribute is only partly supported by browsers and assistive technologies. Although it is an accepted technique, it is preferable to use the aria-label attribute. A link or button can be made more explicit using the title attribute: Add the title attribute to the <a> , <button> or <input /> tag.