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.

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

[23a2a8] Image has non-empty accessible name - Removes Inapplicable Example 1 and adds accessibility support note to cover SVG role exposed differently by browsers #2290

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
3 changes: 3 additions & 0 deletions __tests__/spelling-ignore.yml
Original file line number Diff line number Diff line change
Expand Up @@ -295,3 +295,6 @@
- A-lum-min
- B-lum-max
- B-lum-min

#Browsers Internal Roles
- SvgRoot
17 changes: 4 additions & 13 deletions _rules/image-non-empty-accessible-name-23a2a8.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ There are no assumptions.
- There are several popular browsers that do not treat images with an empty `alt` attribute (`alt=""`) as having a role of `presentation` but instead add the `img` element to the accessibility tree with a [semantic role][] of either `img` or `graphic`.
- Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some [semantic][semantic role] `img` elements can fail this rule with some technology but users of other technologies would not experience any accessibility issue.
- Images can have their role set to `presentation` through an empty `alt` attribute. [Presentational Roles Conflict Resolution][] does not specify what to do if such an image is [focusable][] (it only specifies what to do in case of explicit `role="none"` or `role="presentation"`). Some browsers expose these images and some don't. Thus, this rule may fail for technologies that expose these without creating an accessibility issue for users of other technologies.
- `svg` elements have an [implicit role][] of `graphics-document` in [svg-aam](https://www.w3.org/TR/svg-aam-1.0/#details-id-66). There are popular browsers that do not follow [svg-aam](https://www.w3.org/TR/svg-aam-1.0/#details-id-66) and instead expose SVG elements with a different [semantic role][], such as `image`, `generic` or `SvgRoot`.

### Bibliography

Expand Down Expand Up @@ -196,16 +197,6 @@ This `img` element has an [explicit role][] of `none`. However, it is [focusable

#### Inapplicable Example 1

This `svg` element has an [implicit role][] of `graphics-document`.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
```

#### Inapplicable Example 2

This [semantic][semantic role] `img` element is hidden with `aria-hidden` set to "true".

```html
Expand All @@ -216,15 +207,15 @@ This [semantic][semantic role] `img` element is hidden with `aria-hidden` set to
></div>
```

#### Inapplicable Example 3
#### Inapplicable Example 2

This `img` element is hidden with `aria-hidden` set to "true".

```html
<img src="/test-assets/shared/w3c-logo.png" aria-hidden="true" />
```

#### Inapplicable Example 4
#### Inapplicable Example 3

This `img` element is hidden because its parent has `display: none`.

Expand All @@ -234,7 +225,7 @@ This `img` element is hidden because its parent has `display: none`.
</div>
```

#### Inapplicable Example 5
#### Inapplicable Example 4

This `img` element is hidden with `visibility: hidden`.

Expand Down