Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Amendments to button and image button rules #1184

Closed
wants to merge 6 commits into from
Closed

Amendments to button and image button rules #1184

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5eda2cd
Merging ...59796f.md into ...97a4e1.md for #1049
EmmaJP Feb 21, 2020
2b7e502
Create image-button-name-descriptive-f3b293.md
EmmaJP Feb 22, 2020
ffe340c
Crediting Anne and Stein, whose work contributed
EmmaJP Feb 22, 2020
4c3c6b0
Delete image-button-accessible-name-59796f.md
EmmaJP Feb 22, 2020
3ddc0a1
Not necessary to call out image buttons in applicability
EmmaJP Mar 2, 2020
feeffa6
Accepting suggested example description
EmmaJP Mar 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 84 additions & 6 deletions _rules/button-accessible-name-97a4e1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@ acknowledgements:

## Applicability

The rule applies to elements that are [included in the accessibility tree][] and have a [semantic role](#semantic-role) of `button`, except for `input` elements whose `type` attribute is in the [`Image Button` state](<https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image)>).
The rule applies to elements that are [included in the accessibility tree][] and have a [semantic role](#semantic-role) of `button`, including `input` elements whose `type` attribute is in the [`Image Button` state](<https://html.spec.whatwg.org/#image-button-state-(type=image)>).
EmmaJP marked this conversation as resolved.
Show resolved Hide resolved

**Note:** `input` elements have a `type` attribute in the `Image button` state if it is set to any case-insensitive match of `image` (most of the time, using `<input type="image">`).

**Note:** The specification of the [`type`](https://html.spec.whatwg.org/#states-of-the-type-attribute) attribute describes in detail how to map the value of the attribute to its corresponding state.

Comment on lines 26 to +29
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think both these notes can now go away.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are either of these notes required later in regard a specific example. Required for understanding, as opposed to nice-to-have.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If they are only required for understanding an example or two, they should probably be moved to the description of these examples. With the new applicability which has nothing to do with type or Image button, they look completely out of the place and it is not clear why a rule about buttons need this (for example, why precising how to put an input in the Image button state, but not precise how to put it in the Button, Reset Button or Submit Button state? And why even mention input elements on a rule about buttons?)

## Expectation

Each target element has an [accessible name][] that is not empty (`""`).
Expand All @@ -39,14 +41,15 @@ Each target element has an [accessible name][] that is not empty (`""`).

## Accessibility Support

There are no major accessibility support issues known for this rule.
There is a known combination of a popular browser and assistive technology that does not by default support `title` as an [accessible name][], which may apply to `input` elements with a `type` attribute in the `Image button` state.

## Background

- [HTML Accessibility API Mappings 1.0 (working draft), 5.2 `input type="button"`, `input type="submit"` and `input type="reset"`](https://www.w3.org/TR/html-aam/#input-type-button-input-type-submit-and-input-type-reset)
- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
- [ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14)
- [ARIA16: Using aria-labelledby to provide a name for user interface controls](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16)
- [WCAG Technique H36: Using alt attributes on images used as submit buttons](https://www.w3.org/WAI/WCAG21/Techniques/html/H36)

## Test Cases

Expand Down Expand Up @@ -127,6 +130,39 @@ This `input` element has an [accessible name][] because of the default accessibl
<input type="reset" />
```

#### Passed Example 9

This `input` element with 'type' attribute in the `Image button` state has an [accessible name][] through the `alt` attribute.

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

#### Passed Example 10

This 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" />
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure this adds anything not already covered in Passed Example 3

```

#### Passed Example 11

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is a title attribute considered accessible in this situation?


#### Passed Example 12

This 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
Expand Down Expand Up @@ -172,26 +208,68 @@ This off screen `button` element has no [accessible name][] because it has no co
</html>
```

#### Failed Example 5

This `input` element with 'type' attribute in the `Image button` state has an empty [accessible name][]. 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 6

This image button has an empty `alt` attribute, and no other attributes that can give it an [accessible name][].

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

#### Failed Example 7

This image button has an `aria-labelledby` attribute, but the referenced element does not exist. This gives the button an empty [accessible name][].

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

Comment on lines +211 to +234
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These examples might be hitting the corner case of the HTML AAM overloading the accessible name computation:
https://www.w3.org/TR/html-aam-1.0/#input-type-image (step 4)
Can you try and run some tests on major browsers to check what they do?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example in Chrome and Safari, defaults to a submit button programmatically. If the image doesn't load, the word 'Submit' will become the button text.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, the description of "empty accessible name" is not correct. And these examples do not actually fail this rule (they fail the other rule given that the name is not descriptive).


### Inapplicable

#### Inapplicable Example 1

This `input` element has a `type` attribute set to `image`. These images are tested in a separate rule which also tests [success criterion 1.1.1 Non-text Content](https://www.w3.org/TR/WCAG21/#non-text-content).
This `button` element does not need an [accessible name][] because it is not included in the accessibility tree.

```html
<input type="image" value="download" alt="Download" />
<button style="display: none;"></button>
```

#### Inapplicable Example 2

This `button` element does not need an [accessible name][] because it is not included in the accessibility tree.

This `input` element with 'type' attribute in the `Image button` state does not need an [accessible name][] because it is not included in the accessibility tree.

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

#### 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/WCAG21/#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/WCAG21/#non-text-content)

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button element still has a semantic role of button and thus is applicable for the rule.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this code ever be considered an image button? Or is it a failed example?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not an image button as per the sense "input element in the Image Button state".
But this is the rule checking that elements with role of button have a (non empty) accessible name. In that case, there is an element with a role of button (the button element itself), thus the rule is applicable and passes because the button element gets its name from the content, here the, alt attribute of the image (iirc).

```

#### Inapplicable Example 3

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/WCAG21/#name-role-value).
EmmaJP marked this conversation as resolved.
Show resolved Hide resolved

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

#### Inapplicable Example 4

This `button` element has a `link` role. Links are tested in a separate rule which also tests [success criterion 2.4.4 Link Purpose (In Context)](https://www.w3.org/TR/WCAG21/#link-purpose-in-context).

```html
Expand Down
50 changes: 24 additions & 26 deletions ...es/image-button-accessible-name-59796f.md → ...s/image-button-name-descriptive-f3b293.md
100755 → 100644
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
---
id: 59796f
name: Image button has accessible name
name: Image button accessible name is descriptive
rule_type: atomic
description: |
This rule checks that each image button element has an accessible name.
This rule checks that the accessible name of an image button describes its purpose.
accessibility_requirements:
wcag20:1.1.1: # Non-Text Content (A)
forConformance: true
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
wcag20:4.1.2: # Name, Role, Value (A)
forConformance: true
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
wcag-technique:G94: # Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
forConformance: false
failed: not satisfied
Expand All @@ -30,7 +25,9 @@ input_aspects: # Remove what is not applicable
- CSS Styling
acknowledgements:
authors:
- Emma Pratt Richens
- Anne Thyme Nørregaard
- Stein Erik Skotkjerra
htmlHintIgnore:
# https://www.npmjs.com/package/htmlhint
# (used with `npm test` to ensure validity of code snippets)
Expand All @@ -41,13 +38,13 @@ htmlHintIgnore:

The rule applies to any HTML `input` element with a `type` attribute in the [`Image Button` state](<https://html.spec.whatwg.org/#image-button-state-(type=image)>), that is [included in the accessibility tree][].

**Note:** `input` elements have a `type` attribute in the `Image button` state if it is set to any case-insensitive match of `image` (most of the time, using `<input type="image">`).

**Note:** The specification of the [`type`](https://html.spec.whatwg.org/#states-of-the-type-attribute) attribute describes in detail how to map the value of the attribute to its corresponding state.

## Expectation

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

**Note:** Testing that the [accessible name][] is descriptive is not part of this rule and must be tested separately.
The [accessible name][] of the target element describes the purpose of that image button.

## Assumptions

Expand All @@ -60,67 +57,68 @@ There is a known combination of a popular browser and assistive technology that
## Background

- [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)
- [ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14)
- [ARIA16: Using aria-labelledby to provide a name for user interface controls](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16)

## Test Cases

### Passed

#### Passed Example 1

The image button has an [accessible name][] through the `alt` attribute.
This `input` element with 'type' attribute in the `Image button` state has an [accessible name][] through the `alt` attribute that describes its purpose.

```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.
The image button has an [accessible name][] through the `title` attribute that describes its purpose.

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

#### Passed Example 3

The image button has an [accessible name][] through the `title` attribute.
The image button has an [accessible name][] through the `aria-label` attribute that describes its purpose.

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

#### Passed Example 4

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

```html
<input type="image" src="/test-assets/shared/search-icon.svg" aria-labelledby="id1" />
<div id="id1">Search</div>
<h1 id="id1">Interesting buttons</h1>
<input type="image" src="/test-assets/shared/share-icon.svg" name="Share" id="id2" aria-labelledby="id2 id1" />
```

### Failed

#### Failed Example 1

The image button element has an empty [accessible name][]. The `name` attribute can not be used to provide an [accessible name][].
This `input` element with 'type' attribute in the `Image button` state has an empty [accessible name][], which cannot be descriptive. The `name` attribute does not 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][].
This image button has an `alt` attribute that is not descriptive as the [accessible name][].

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

#### 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 an empty [accessible name][], which cannot be descriptive.
Comment on lines 103 to +121
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As with the other rule. These may actually have an accessible name according to the AAM.
OTOH, this is probably easier to get failed examples here given that the default name is "Submit Query"…

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess in this instance the default would not be descriptive.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but the description should say so rather than saying that it has an empty accessible name.


```html
<input type="image" src="/test-assets/shared/search-icon.svg" aria-labelledby="non-existing" />
Expand All @@ -146,23 +144,23 @@ The `input` element with type with a `type` attribute in the `Button` state is n

#### 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/WCAG21/#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/WCAG21/#non-text-content)
This `button` element is separate from the `img` element.

```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/WCAG21/#name-role-value).
This `img` element is not button component.
Comment on lines +147 to +155
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Description of these two examples could also be in the line of "There is no input element in the Image button state" (to match applicability more closely). Likely adding the extra explanation as second sentence.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you provide some suggestions so I can better understand what you mean. Thanks.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rule is applicable to input elements in the Image Button state. So the reason that these snippets are inapplicable is the lack of such elements. It has nothing to do with button elements or components. To match the example description syntax, both these should be
"There is no input element in the Image Button state."
An extra sentence can be added. Maybe for Inapplicable Example 3 "A button element containing only an img element is not an Image Button, this rule specifically checks for input elements in the Image Button state". And for Inapplicable Example 4 "The img element alone is not an Image Button."


```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.
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.

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