Link (anchors)

Referred HTML Tags

<a href="/some-path">

Accessible name

Any interactable HTML element requires an accessible name. This is the name that's announced or displayed by assistive technologies. An anchor element can get its accessible name by a text node wrapped within it, or a labeling attribute. The element's accessible name should imply its purpose and the expected outcome of the interaction. Therefore the accessible name should be as clear and descriptive as possible. Accessible names should be unique. In many cases, <a> tags are part of a sequential display of elements. For example, let's look at a list of articles on the homepage of a news website. Usually, each item displays an excerpt of the article, as well as a link to the full article. In many cases, the text node (and accessible name) of these links is "Read the full article" or something similar. The issue is that screen readers also use accessible names to allow the user quick access to elements on the interface via dedicated lists. If more than one element on the list has the same name, the user can't distinguish between the list's different links. learn more about accessible names here

Color contrast

The WCAG's AA conformance level requires that the color contrast ratio of texts and their backgrounds is at least 4.5:1 Where the font size is larger than 24 CSS pixels (e.g., font-size: 24px), or where the text is bold and larger than 18.5 CSS pixels, a contrast ratio of 3:1 is sufficient. Learn more about color contrast here, or test your contrast ratios using the WCAG Contrast Checker.

Visual focus indicator

Any interactable HTML element must have a discernible focus indication. People who use only the keyboard or other sequential navigation device, must get an indication of the currently active item. Unlike mouse users who point and click directly on elements, or screen reader users who receive a voice prompt about the active element, keyboard users depend on a visual indication that marks the active element. Most user agents have a default focus indicator. It is the author's responsibility to provide an alternative focus indication if the default one is overriding. Note that focus indication must not be uttered only by a change of color as visually impaired or color blind people may find it difficult to distinguish.

Equivalent WAI-ARIA Role

role=”link”

Required properties/attributes/context

Make sure that the element is focusable
Make sure that the element has an accessible name