Image button has non-empty accessible name

Applicability

This rule applies to any input element with a type [attribute value][] of image, and that is [included in the accessibility tree][].

Expectation

Each target element has an [accessible name][] that is neither empty (""), nor the default name for this element (localized version of "Submit Query").

Assumptions

This rule assumes that all image buttons are user interface components as defined by WCAG 2.
This rule assumes that the default name for image buttons ("Submit Query"), as defined by the [HTML Accessibility API Mapping][html aam image button], is never descriptive.

Accessibility Support

The input type="image" Accessible Name Computation algorithm uses the first non-empty name, but some user agents and assistive technologies combinations stop at the first existing one, even if empty.

Background

Contrarily to img elements, an empty alt attribute (alt="") does not make an image button decorative; image buttons have a button role and are therefore exposed as interactive elements. Consequently, an empty alt attribute does not provide a "usable string" for image buttons and the computation defaults to other means of providing a name, as defined in input type="image" Accessible Name Computation algorithm.

Related rules

Button has non-empty accessible name

Bibliography

Test Cases

Passed

Passed Example 1

The image button has an [accessible name][] through the alt attribute.

<input type="image" src="/test-assets/shared/search-icon.svg" alt="Search" />

Passed Example 2

The image button has an [accessible name][] through the aria-label attribute.

<input type="image" src="/test-assets/shared/search-icon.svg" aria-label="Search" />

Passed Example 3

The image button has an [accessible name][] through the title attribute.

<input type="image" src="/test-assets/shared/search-icon.svg" title="Search" />

Passed Example 4

The image button has an [accessible name][] through the aria-labelledby attribute.

<input type="image" src="/test-assets/shared/search-icon.svg" aria-labelledby="id1" />
<div id="id1">Search</div>

Failed

Failed Example 1

The image button element has an [accessible name][] equal to the default "Submit Query". The name attribute can not be used to provide an [accessible name][].

<input type="image" name="search" src="/test-assets/shared/search-icon.svg" />

Failed Example 2

The image button has an empty alt attribute, and no other attributes that can give it an [accessible name][], hence its name is the default "Submit Query".

<input type="image" src="/test-assets/shared/search-icon.svg" alt="" />

Failed Example 3

The image button has an aria-labelledby attribute, but the referenced element does not exist. This gives the button the default [accessible name][] of "Submit Query".

<input type="image" src="/test-assets/shared/search-icon.svg" aria-labelledby="non-existing" />

Inapplicable

Inapplicable Example 1

The button element is not an image button. Success Criterion 1.1.1 Non-text Content can not fail text buttons. Only non-text content is applicable.

<button>My button</button>

Inapplicable Example 2

The input element with the type [attribute value][] of button is not an image button. Success Criterion 1.1.1 Non-text Content can not fail text buttons. Only non-text content is applicable.

<input type="button" value="My button" />

Inapplicable Example 3

The button element is tested separately from the img element. Success Criterion 4.1.2 Name, Role, Value is applied to the button, whereas the image is tested under Success Criterion 1.1.1 Non-text Content

<button><img src="/test-assets/shared/search-icon.svg" alt="Search" /></button>

Inapplicable Example 4

The img element is not a user interface component, and so is not tested for Success Criterion 4.1.2 Name, Role, Value.

<img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" />

Inapplicable Example 5

The image button is ignored by assistive technologies because it is not [included in the accessibility tree][]. These are not required to have an accessible name. If at some future state of the page the element gets [included in the accessibility tree][], an [accessible name][] will be necessary.

<input type="image" src="/test-assets/shared/search-icon.svg" style="display: none;" />

AI Prompt

Create a PHP class in the namespace "App\Services\AccessibilityAnalyzer\ActRules"
that extends "App\Services\AccessibilityAnalyzer\ActRuleRunner" and is called "ImageButtonNonEmptyAccessibleName59796f" 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 rule:

# Image button has non-empty accessible name

metadata:
    id: 59796f
    name: 'Image button has non-empty accessible name'
    rule_type: atomic
    description: "This rule checks that each image button element has a non-empty accessible name.\n"
    accessibility_requirements: { 'wcag20:1.1.1': { forConformance: true, failed: 'not satisfied', passed: 'further testing needed', inapplicable: 'further testing needed' }, 'wcag20:4.1.2': { forConformance: true, failed: 'not satisfied', passed: 'further testing needed', inapplicable: 'further testing needed' }, 'wcag-technique:G94': { forConformance: false, failed: 'not satisfied', passed: 'further testing needed', inapplicable: 'further testing needed' }, 'wcag-technique:G95': { forConformance: false, failed: 'not satisfied', passed: 'further testing needed', inapplicable: 'further testing needed' } }
    input_aspects: ['DOM Tree', 'CSS Styling']
    acknowledgments: { authors: ['Anne Thyme Nørregaard'], funding: [WAI-Tools] }
    htmlHintIgnore: [alt-require]

## Applicability

This rule applies to any `input` element with a `type` [attribute value][] of `image`, and that is [included in the accessibility tree][].

## Expectation

Each target element has an [accessible name][] that is neither empty (`""`), nor the default name for this element (localized version of "Submit Query").

## Assumptions

- This rule assumes that all image buttons are [user interface components as defined by WCAG 2](https://www.w3.org/TR/WCAG22/#dfn-user-interface-components).
- This rule assumes that the default name for image buttons ("Submit Query"), as defined by the [HTML Accessibility API Mapping][html aam image button], is never descriptive.

## Accessibility Support

The [input type="image" Accessible Name Computation algorithm](https://www.w3.org/TR/html-aam/#input-type-image-accessible-name-computation) uses the first non-empty name, but some user agents and assistive technologies combinations stop at the first existing one, even if empty.

## Background

Contrarily to `img` elements, an empty `alt` attribute (`alt=""`) does not make an image button decorative; image buttons have a button role and are therefore exposed as interactive elements. Consequently, an empty `alt` attribute does not provide a "usable string" for image buttons and the computation defaults to other means of providing a name, as defined in [input type="image" Accessible Name Computation algorithm](https://www.w3.org/TR/html-aam/#input-type-image-accessible-name-computation).

### Related rules

- [Button has non-empty accessible name](https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/)

### Bibliography

- [Understanding Success Criterion 1.1.1: Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html)
- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html)
- [WCAG Technique H36: Using alt attributes on images used as submit buttons](https://www.w3.org/WAI/WCAG22/Techniques/html/H36)
- [HTML Accessibility API Mappings for computing the accessible name of image buttons](https://www.w3.org/TR/html-aam-1.0/#input-type-image)

## Test Cases

### Passed

#### Passed Example 1

The image button has an [accessible name][] through the `alt` attribute.

```html
<input type="image" src="/test-assets/shared/search-icon.svg" alt="Search" />
```

#### Passed Example 2

The image button has an [accessible name][] through the `aria-label` attribute.

```html
<input type="image" src="/test-assets/shared/search-icon.svg" aria-label="Search" />
```

#### Passed Example 3

The image button has an [accessible name][] through the `title` attribute.

```html
<input type="image" src="/test-assets/shared/search-icon.svg" title="Search" />
```

#### Passed Example 4

The image button has an [accessible name][] through the `aria-labelledby` attribute.

```html
<input type="image" src="/test-assets/shared/search-icon.svg" aria-labelledby="id1" />
<div id="id1">Search</div>
```

### Failed

#### Failed Example 1

The image button element has an [accessible name][] equal to the default "Submit Query". The `name` attribute can not be used to provide an [accessible name][].

```html
<input type="image" name="search" src="/test-assets/shared/search-icon.svg" />
```

#### Failed Example 2

The image button has an empty `alt` attribute, and no other attributes that can give it an [accessible name][], hence its name is the default "Submit Query".

```html
<input type="image" src="/test-assets/shared/search-icon.svg" alt="" />
```

#### Failed Example 3

The image button has an `aria-labelledby` attribute, but the referenced element does not exist. This gives the button the default [accessible name][] of "Submit Query".

```html
<input type="image" src="/test-assets/shared/search-icon.svg" aria-labelledby="non-existing" />
```

### Inapplicable

#### Inapplicable Example 1

The `button` element is not an image button. [Success Criterion 1.1.1 Non-text Content](https://www.w3.org/TR/WCAG22/#non-text-content) can not fail text buttons. Only non-text content is applicable.

```html
<button>My button</button>
```

#### Inapplicable Example 2

The `input` element with the `type` [attribute value][] of `button` is not an image button. [Success Criterion 1.1.1 Non-text Content](https://www.w3.org/TR/WCAG22/#non-text-content) can not fail text buttons. Only non-text content is applicable.

```html
<input type="button" value="My button" />
```

#### Inapplicable Example 3

The `button` element is tested separately from the `img` element. [Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/TR/WCAG22/#name-role-value) is applied to the button, whereas the image is tested under [Success Criterion 1.1.1 Non-text Content](https://www.w3.org/TR/WCAG22/#non-text-content)

```html
<button><img src="/test-assets/shared/search-icon.svg" alt="Search" /></button>
```

#### Inapplicable Example 4

The `img` element is not a user interface component, and so is not tested for [Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/TR/WCAG22/#name-role-value).

```html
<img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" />
```

#### Inapplicable Example 5

The image button is ignored by assistive technologies because it is not [included in the accessibility tree][]. These are not required to have an accessible name. If at some future state of the page the element gets [included in the accessibility tree][], an [accessible name][] will be necessary.

```html
<input type="image" src="/test-assets/shared/search-icon.svg" style="display: none;" />
```