Amendments to button and image button rules #1184

EmmaJP · 2020-02-22T19:27:08Z

Following decisions in conversation raised by #1049, this PR combines rules regarding buttons and image buttons having an accessible name, and creates a new rule about whether the accessible name of an image button describes its purpose.

When reviewing, please also point out any out of dates formats or phrasing. I have tried to adjust those as I've worked.

Issue(s):

related to and possibly closes One element relevant for multiple success criteria #1049

Need for Final Call:
This will require a 2 week Final Call, as it includes a new rule.

Pull Request Etiquette

When creating PR:

Make sure you're requesting to pull a branch (right side) to the develop branch (left side).

After creating PR:

Add yourself (and co-authors) as "Assignees" for PR.
Add label to indicate if it's a Rule, Definition or Chore.
Close the issue that the PR resolves (and make sure the issue is referenced in the top of this comment)
Optionally request feedback from anyone in particular by assigning them as "Reviewers".

How to Review And Approve

Go to the “Files changed” tab
Here you will have the option to leave comments on different lines.
Once the review is completed, find the “Review changes” button in the top right, select “Approve” (if you are really confident in the rule) or "Request changes" and click “Submit review”.
Make sure to also review the proposed Final Call period. In case of disagreement, the longer period wins.

Jym77

Good job!
I think the first rule ("non empty accessible name") is now a bit "heavy" with the image button examples. The point is to not single them out so we maybe don't need to insist that image button are buttons (input with a type in the Button/Reset Button/Submit Button states are also buttons but we don't have any examples of these, typically)

_rules/button-accessible-name-97a4e1.md

Jym77 · 2020-02-24T08:30:05Z

_rules/button-accessible-name-97a4e1.md

 **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.
+


I think both these notes can now go away.

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

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?)

Jym77 · 2020-02-24T08:34:45Z

_rules/button-accessible-name-97a4e1.md

+#### 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" />
+```
+


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?

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.

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

Jym77 · 2020-02-24T08:36:10Z

_rules/button-accessible-name-97a4e1.md

+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>


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

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

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

_rules/button-accessible-name-97a4e1.md

Jym77 · 2020-02-24T08:40:48Z

_rules/image-button-name-descriptive-f3b293.md

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


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"…

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

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

Jym77 · 2020-02-24T08:42:35Z

_rules/image-button-name-descriptive-f3b293.md

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


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.

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

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

Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>

EmmaJP · 2020-03-02T12:28:29Z

_rules/button-accessible-name-97a4e1.md

+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" />


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

EmmaJP · 2020-03-02T12:30:56Z

_rules/button-accessible-name-97a4e1.md

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


Is a title attribute considered accessible in this situation?

Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>

Jym77 · 2020-03-04T08:32:21Z

_rules/button-accessible-name-97a4e1.md

 **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.
+


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?)

Jym77 · 2020-03-04T08:37:29Z

_rules/button-accessible-name-97a4e1.md

+#### 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" />
+```
+


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

Jym77 · 2020-03-04T08:39:50Z

_rules/button-accessible-name-97a4e1.md

+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>


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

Jym77 · 2020-03-04T08:41:17Z

_rules/image-button-name-descriptive-f3b293.md

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


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

Jym77 · 2020-03-04T08:45:52Z

_rules/image-button-name-descriptive-f3b293.md

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


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

EmmaJP · 2020-04-09T15:04:49Z

Note - check if this has impact on image button has accessible name, which is a rule that has already been accepted by the task force and changes may need to be resubmitted. See #1120

Instead of PR #1184

WilcoFiers · 2021-11-23T10:19:15Z

Closing due to inactivity.

EmmaJP added 4 commits February 21, 2020 17:41

Merging ...59796f.md into ...97a4e1.md for #1049

5eda2cd

Create image-button-name-descriptive-f3b293.md

2b7e502

Crediting Anne and Stein, whose work contributed

ffe340c

Delete image-button-accessible-name-59796f.md

4c3c6b0

EmmaJP requested review from WilcoFiers, Jym77, skotkjerra, jeeyyy, annethyme and kasperisager February 22, 2020 19:27

EmmaJP mentioned this pull request Feb 22, 2020

One element relevant for multiple success criteria #1049

Closed

EmmaJP added reviewers wanted Rule Update Use this label for an existing rule that is being updated labels Feb 22, 2020

Jym77 requested changes Feb 24, 2020

View reviewed changes

Not necessary to call out image buttons in applicability

3ddc0a1

Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>

EmmaJP commented Mar 2, 2020

View reviewed changes

Accepting suggested example description

feeffa6

Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>

Jym77 requested changes Mar 4, 2020

View reviewed changes

kasperisager removed request for kasperisager and skotkjerra April 24, 2020 09:54

Jym77 mentioned this pull request Aug 20, 2020

ARIA required owned, do we need the no implicit requirement? bc4a75 #1413

Closed

EmmaJP added a commit that referenced this pull request Jul 21, 2021

Create new rule for image button name descriptive

79b9fd4

Instead of PR #1184

EmmaJP mentioned this pull request Jul 21, 2021

Create new rule for image button name descriptive #1673

Open

7 tasks

WilcoFiers closed this Nov 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Amendments to button and image button rules #1184

Amendments to button and image button rules #1184

EmmaJP commented Feb 22, 2020

Jym77 left a comment

Jym77 Feb 24, 2020

EmmaJP Mar 2, 2020

Jym77 Mar 4, 2020

Jym77 Feb 24, 2020

EmmaJP Mar 2, 2020

Jym77 Mar 4, 2020

Jym77 Feb 24, 2020

EmmaJP Mar 2, 2020

Jym77 Mar 4, 2020

Jym77 Feb 24, 2020

EmmaJP Mar 2, 2020

Jym77 Mar 4, 2020

Jym77 Feb 24, 2020

EmmaJP Mar 2, 2020

Jym77 Mar 4, 2020

EmmaJP Mar 2, 2020

EmmaJP Mar 2, 2020

Jym77 Mar 4, 2020

Jym77 Mar 4, 2020

Jym77 Mar 4, 2020

Jym77 Mar 4, 2020

Jym77 Mar 4, 2020

EmmaJP commented Apr 9, 2020 •

edited

Loading

WilcoFiers commented Nov 23, 2021

		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.

Amendments to button and image button rules #1184

Amendments to button and image button rules #1184

Conversation

EmmaJP commented Feb 22, 2020

Pull Request Etiquette

When creating PR:

After creating PR:

How to Review And Approve

Jym77 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EmmaJP commented Apr 9, 2020 • edited Loading

WilcoFiers commented Nov 23, 2021

EmmaJP commented Apr 9, 2020 •

edited

Loading