Links
Back to simple components
Links must appear different then surrounding text, be able to stand on their own, and provide feedback to show they have focus.
WHEN I am on a page with a link.
AND I tab into link.
THEN I see an indication that link has focus.
WHEN I am on a page with a link.
AND I tab into link.
AND I hit 'enter'.
THEN I am directed to new location.
WHEN I am on a page with a link.
AND I have a screen reader on.
WHEN I tab into a link.
THEN The link text can stand on its own.
AND I tab into link.
THEN I see an indication that link has focus.
WHEN I am on a page with a link.
AND I tab into link.
AND I hit 'enter'.
THEN I am directed to new location.
WHEN I am on a page with a link.
AND I have a screen reader on.
WHEN I tab into a link.
THEN The link text can stand on its own.
More Information
Links MUST meet the following:
- Be marked up as a
<a href="#">. If not possible, element should have role="link". - Have discernible text [ WCAG 4.1.2 ].
- Be unique and be able to stand on its own [ WCAG 2.4.4 ].
- Appear different then non link text visually, and not by color alone [ WCAG 1.4.1 ].
- Links that go to same destination must be labeled the same or very similar [ WCAG 3.2.4 ].
- Provide an visual indication they have focus when in focus [ WCAG 2.4.7 ].
- Be able to be reached and activated using a keyboard [ WCAG 2.1.1 ].
Links also SHOULD meet the following:
- Not be used when a button would better serve.
- Not have 'link' in the text.
- Links that open new tabs / windows should indicate that they do.
- Have the cursor style change to pointer.