3

Functional images must have alternative text describing the input's purpose.

WGAC 2 criterion	1.1.1 Non-text Content (A)
Category	Images
ACT Rules	Image button has non-empty accessible name

WCAG 2 criterion

1.1.1 Non-text Content (Level A)

Tools and requirements

WAVE extension
Manual evaluation required

Note

This guideline is targeted at "functional images." Please refer to the image categorization guidance in the Definitions section if you are unsure which category the image you are assessing belongs to.

Test procedure

Confirm the functionality of the image when you interact with it. (Figure out if it is a link or if it is a button that triggers some action.) After doing so, check for the following properties on the functional image.

Every image must have an alt attribute present.
Alternative text for functional images must describe the functionality of the image.
- A linked image must have alt text equivalent to the destination. Additional text like "logo of" or "image of" may not be present.
- An image that triggers some action needs alt text equivalent to what the label of a normal button that would trigger said action would be.

AI Prompt

Create a PHP class in the namespace "App\Services\AccessibilityAnalyzer\GuidelineRules"
that extends "App\Services\AccessibilityAnalyzer\GuidelineRuleRunner" and is called "Guideline3" 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:

## Functional images must have alternative text describing the input's purpose.

### WCAG 2 criterion

1.1.1 Non-text Content (Level A)

### Tools and requirements

* WAVE extension  
* Manual evaluation required

### Note

This guideline is targeted at "[functional images](https://www.w3.org/WAI/tutorials/images/functional/)."  Please refer to the image categorization guidance in the Definitions section if you are unsure which category the image you are assessing belongs to.

### Test procedure

Confirm the functionality of the image when you interact with it.  (Figure out if it is a link or if it is a button that triggers some action.)  After doing so, check for the following properties on the functional image.

* Every image must have an `alt` attribute present.  
* Alternative text for functional images must describe the functionality of the image.  
  * A linked image must have alt text equivalent to the destination.  Additional text like "logo of" or "image of" may not be present.  
  * An image that triggers some action needs alt text equivalent to what the label of a normal button that would trigger said action would be.

Web Accessibility Reviews

AI Chat

AI Assistance Chat

AI Response

Debugging info

3