Skip to content

Commit

Permalink
"Image button has non-empty accessible name" [59796f]: Fail default n…
Browse files Browse the repository at this point in the history
…ame ("Submit Query") (#1717)

* Reject image buttons whose name is Submit Query
* Explicitely reject default names
* Add note that default name for reset and submit button can by good

Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com>
Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
  • Loading branch information
3 people committed Nov 11, 2021
1 parent 3412636 commit 02275ad
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 6 deletions.
5 changes: 3 additions & 2 deletions _rules/button-non-empty-accessible-name-97a4e1.md
Expand Up @@ -30,8 +30,6 @@ This rule applies to elements that are [included in the accessibility tree][] an

Each target element has an [accessible name][] that is not empty (`""`).

**Note:** `input` elements with a type [attribute value][] of either `submit` or `reset` can get their [accessible name][] from a [default text](https://www.w3.org/TR/html-aam/#input-type-button-input-type-submit-and-input-type-reset), as well as from a `value` or other attribute.

## Assumptions

- The rule assumes that all buttons are [user interface components as defined by WCAG 2](https://www.w3.org/TR/WCAG21/#dfn-user-interface-components).
Expand All @@ -40,6 +38,8 @@ Each target element has an [accessible name][] that is not empty (`""`).

- Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have a [semantic role][] of `button` and fail this rule with some technology but users of other technologies would not experience any accessibility issue.

- Some elements have a role of `button` and a default accessible name defined by the [HTML Accessibility API Mapping][html aam input button], for example `input` elements whose `type` [attribute value][] is either `submit` or `reset`. This rule considers that these default names can be descriptive and therefore does not fail them.

## Background

- [Image button has non-empty accessible name](https://act-rules.github.io/rules/59796f)
Expand Down Expand Up @@ -218,6 +218,7 @@ This `button` element has an [explicit role][] of `none`; it is not [focusable][
[attribute value]: #attribute-value 'Definition of Attribute Value'
[explicit role]: #explicit-role 'Definition of explicit role'
[focusable]: #focusable 'Definition of focusable'
[html aam input button]: https://www.w3.org/TR/html-aam-1.0/#input-type-button-input-type-submit-and-input-type-reset 'HTML Accessibility API Mapping, reset and submit buttons'
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.1/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
[semantic role]: #semantic-role 'Definition of Semantic Role'
11 changes: 7 additions & 4 deletions _rules/image-button-non-empty-accessible-name-59796f.md 100644 → 100755
Expand Up @@ -45,11 +45,12 @@ This rule applies to any `input` element with a `type` [attribute value][] of `i

## Expectation

Each target element has an [accessible name][] that is not empty (`""`).
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/WCAG21/#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

Expand All @@ -61,6 +62,7 @@ There is a known combination of a popular browser and assistive technology that
- [Understanding Success Criterion 1.1.1: Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html)
- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)
- [WCAG Technique H36: Using alt attributes on images used as submit buttons](https://www.w3.org/WAI/WCAG21/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

Expand Down Expand Up @@ -105,23 +107,23 @@ The image button has an [accessible name][] through the `aria-labelledby` attrib

#### Failed Example 1

The image button element has an empty [accessible name][]. The `name` attribute can not be used to provide an [accessible name][].
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][].
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 an empty [accessible name][].
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" />
Expand Down Expand Up @@ -171,4 +173,5 @@ The image button is ignored by assistive technologies because it is not [include

[accessible name]: #accessible-name 'Definition of Accessible Name'
[attribute value]: #attribute-value 'Definition of Attribute Value'
[html aam image button]: https://www.w3.org/TR/html-aam-1.0/#input-type-image 'HTML Accessibility API Mapping, image button'
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree'

0 comments on commit 02275ad

Please sign in to comment.