7

Adjacent text and images which navigate to the same destination should be presented and announced as one link.

WGAC 2 criterion	1.1.1 Non-text Content (A)
Category	Content
ACT Rules

WCAG 2 criterion

1.1.1 Non-text Content (Level A)

Tools and requirements

Siteimprove (Policy)

Test procedure

The most common page types that run across issues for this test are news pages, people pages, and events pages, as these often have listings with featured images next to a text link.

We have a policy in Siteimprove (enterprise app) to assist with checking this. It is titled "Adjacent Links." Note, the Siteimprove check only alerts that two links are next to each other, it does not verify if the links navigate to the same destination.

Linked images supplemented with a text link where both the image and text link navigate to the same destination must be presented to the user as a singular link. One of the following techniques must apply.

Option 1: The alt text of the image after the links are combined must be empty.

<a href="##"> <img alt="" src="imgsrc.png" /> <p>My Link Destination</p></a>

Option 2: The image is given aria-hidden="true" and tabindex="-1" so only the text link is utilized. If this is done, the image must have a text alternative that is consistent with the requirements of a functional image.

<a href="##" aria-hidden="true" tabindex="-1"> <img alt="My Link Destination" src="imgsrc.png"></a><a href="##"> <p>My link destination</p></a>

AI Prompt

Create a PHP class in the namespace "App\Services\AccessibilityAnalyzer\GuidelineRules"
that extends "App\Services\AccessibilityAnalyzer\GuidelineRuleRunner" and is called "Guideline7" that has a function with the signature "protected function findApplicableElements(Crawler $crawler): Crawler". The base class includes the function "protected function isElementIncludedInAccessibilityTree(\DOMNode $element): bool" for determining if an element is included in the accessibility tree.

Web accessibility guideline:

## Adjacent text and images which navigate to the same destination should be presented and announced as one link.

### WCAG 2 criterion

1.1.1 Non-text Content (Level A)

### Tools and requirements

* Siteimprove (Policy)

### Test procedure

The most common page types that run across issues for this test are news pages, people pages, and events pages, as these often have listings with featured images next to a text link.

We have a policy in Siteimprove (enterprise app) to assist with checking this.  It is titled "Adjacent Links."  Note, the Siteimprove check only alerts that two links are next to each other, it does not verify if the links navigate to the same destination.

Linked images supplemented with a text link where both the image and text link navigate to the same destination must be presented to the user as a singular link.  One of the following techniques must apply.

**Option 1:** The alt text of the image after the links are combined must be empty. 

| \<a href\="\#\#"\>	\<img alt\="" src\="imgsrc.png" /\>	\<p\>My Link Destination\</p\>\</a\> |
| :---- |

**Option 2:** The image is given `aria-hidden="true"` and `tabindex="-1"` so only the text link is utilized.  If this is done, the image must have a text alternative that is consistent with the requirements of a functional image.

| \<a href\="\#\#" aria-hidden\="true" tabindex\="-1"\>	\<img alt\="My Link Destination" src\="imgsrc.png"\>\</a\>\<a href\="\#\#"\>	\<p\>My link destination\</p\>\</a\> |
| :---- |

Web Accessibility Reviews

AI Chat

AI Assistance Chat

AI Response

Debugging info

7

Adjacent text and images which navigate to the same destination should be presented and announced as one link.

WCAG 2 criterion

Tools and requirements

Test procedure

AI Prompt