Accessibility: Links do not have a discernible name

[lukefretwell]

Issue

Accessibility: Links do not have a discernible name

About

Enhance your application's usability for visitors using screen readers by following these recommendations:

1. Buttons have an accessible name: When a button doesn't have an accessible name, screen readers announce it as “button”, making it unusable for users who rely on screen readers.

2. Document has a <title> element: The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search.

3. No form fields have multiple labels: Form fields with multiple labels can be confusingly announced by assistive technologies like screen readers which use either the first, the last, or all of the labels.

4. <frame> or <iframe> elements have a title: Screen reader users rely on frame titles to describe the contents of frames.

5. Image elements have [alt] attributes: Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute.

6. Image elements do not have [alt] attributes that are redundant text: Informative elements should aim for short, descriptive alternative text. Alternative text that is exactly the same as the text adjacent to the link or image is potentially confusing for screen reader users, because the text will be read twice.

7. Input buttons have discernible text: Adding discernable and accessible text to input buttons may help screen reader users understand the purpose of the input button.

8. <input type="image"> elements have [alt] text: When an image is being used as an <input> button, providing alternative text can help screen reader users understand the purpose of the button.

9. Form elements have associated labels: Labels ensure that form controls are announced properly by assistive technologies, like screen readers.

10. Links have a discernible name: Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.

11. <object> elements have alternate text: Screen readers cannot translate non-text content. Adding alternate text to <object> elements helps screen readers convey meaning to users.

12. Select elements have associated label elements: Form elements without effective labels can create frustrating experiences for screen reader users.

13. Skip links are focusable: Including a skip link can help users skip to the main content to save time.

Expectation

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.

Page

• Title: Government digital experience standards - ScanGov Standards
• URL: https://standards.scangov.org/

Issues

Label	Snippet	Selector	Explanation
Indicators	<a href="https://docs.scangov.org/indicators" style="color: inherit;">	thead > tr > th.p-3 > a	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Guidance	<a href="https://standards.scangov.org/guidance" style="color: inherit;">	thead > tr > th.p-3 > a	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
AI-friendly	<a href="/aifriendly/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
AI-friendly	<a href="/aifriendly/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Accessibility	<a href="/accessibility/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Content	<a href="/content/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Content	<a href="/content/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Content	<a href="/content/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Content	<a href="/content/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Content	<a href="/content/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Content	<a href="/content/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Content	<a href="/content/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Content	<a href="/content/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Domain	<a href="/domain/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Domain	<a href="/domain/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Domain	<a href="/domain/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Performance	<a href="/performance/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Performance	<a href="/performance/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Performance	<a href="/performance/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Performance	<a href="/performance/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Performance	<a href="/performance/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
SEO	<a href="/seo/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Security	<a href="/security/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Security	<a href="/security/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Security	<a href="/security/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Security	<a href="/security/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Security	<a href="/security/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Security	<a href="/security/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Security	<a href="/security/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Social	<a href="/social/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Social	<a href="/social/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Social	<a href="/social/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Social	<a href="/social/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Social	<a href="/social/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Social	<a href="/social/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute
Social	<a href="/social/" class="icon-link d-inline-flex align-items-start mb-1 me-1 text-decoration-none">	tr > td.p-3 > div.d-flex > a.icon-link	Fix all of the following: Element is in tab order and does not have accessible text Fix any of the following: Element does not have text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute

Issue type: link-name

Documentation

• ScanGov Names and labels docs
• Web Content Accessibility Guidelines (WCAG)