Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions _rules/form-control-accessible-name-e086e5.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ This rule applies to any element that is [included in the accessibility tree](#i

## Expectation

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

## Assumptions

Expand Down Expand Up @@ -166,7 +166,7 @@ The explicit label is not supported on `div` elements.

#### Failed Example 7

The [accessible name][] is only [whitespace][].
The [accessible name][] is empty.

```html
<label> <input /></label>
Expand Down
6 changes: 3 additions & 3 deletions _rules/iframe-accessible-name-cae760.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ The rule applies to `iframe` elements that are [included in the accessibility tr

## Expectation

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

## Assumptions

Expand Down Expand Up @@ -74,7 +74,7 @@ Usage of `aria-labelledby` attribute to describe the `iframe` content.

#### Passed Example 4

[Accessible name][] is not only [whitespace][].
[Accessible name][] is not empty.

```html
<iframe title=":-)" src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
Expand Down Expand Up @@ -132,7 +132,7 @@ Usage of `alt` attribute to describe content is not valid.

#### Failed Example 7

[Accessible name][] is only [whitespace][].
[Accessible name][] is empty.

```html
<iframe title=" " src="/test-assets/SC4-1-2-frame-doc.html"> </iframe>
Expand Down
16 changes: 8 additions & 8 deletions _rules/image-accessible-name-23a2a8.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ The rule applies to HTML `img` elements or any HTML element with the [semantic r

## Expectation

Each target element has an [accessible name][] that is not only [whitespace][], or is marked as [decorative][].
Each target element has an [accessible name][] that is not empty (`""`), or is marked as [decorative][].

**NOTE**: An `img` element can be marked as [decorative][], by using either `role="presentation"`, `role="none"` or an empty alt attribute, `alt=""`.
**NOTE**: An `img` element can be marked as [decorative][], by using either `role="presentation"`, `role="none"` or an empty `alt` attribute, (`alt=""` or `alt` with no value).

## Assumptions

Expand Down Expand Up @@ -116,7 +116,7 @@ The HTML `img` element is marked as [decorative][] through `role="none"`.

#### Passed Example 8

The HTML `img` element has an [accessible name][] that does not only consist of [whitespace][].
The HTML `img` element has an [accessible name][] that is not empty.

```html
<img alt=":-)" />
Expand All @@ -126,34 +126,34 @@ The HTML `img` element has an [accessible name][] that does not only consist of

#### Failed Example 1

The HTML `img` element is not marked as [decorative][] and does not have an [accessible name][].
The HTML `img` element is not marked as [decorative][] and has an empty [accessible name][].

```html
<img />
```

#### Failed Example 2

The element with role of `img` does not have an [accessible name][].
The element with role of `img` has an empty [accessible name][].

```html
<div role="img"></div>
```

#### Failed Example 3

The `img` element inside a `div` positioned off screen has no [accessible name][] and is not marked as [decorative][].
The `img` element inside a `div` positioned off screen has an empty [accessible name][] and is not marked as [decorative][].

```html
<div style="margin-left:-9999px;"><img /></div>
```

#### Failed Example 4

The HTML `img` element has an [accessible name][] that only consist of [whitespace][].
The HTML `img` element has an empty [accessible name][].

```html
<img aria-label=" " />
<img alt=" " />
```

### Inapplicable
Expand Down
12 changes: 6 additions & 6 deletions _rules/image-button-accessible-name-59796f.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ The rule applies to any HTML `input` element with a `type` attribute in the `Ima

## Expectation

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

## Assumptions

Expand Down Expand Up @@ -88,7 +88,7 @@ Image button element with [accessible name][] through `aria-labelledby`

#### Passed Example 5

[accessible name][] is not only [whitespace][].
[accessible name][] is not empty.

```html
<input type="image" name="submit" src="button.gif" alt=":-)" />
Expand All @@ -106,31 +106,31 @@ Image button element with [accessible name][] through `alt` attribute

#### Failed Example 1

Image button element with no attributes to give [accessible name][]
Image button element with empty [accessible name][].

```html
<input type="image" name="submit" src="button.gif" />
```

#### Failed Example 2

Image button element with empty `alt` attribute
Image button element with empty [accessible name][].

```html
<input type="image" name="submit" src="button.gif" alt="" />
```

#### Failed Example 3

Image button with aria-labelledby that does not reference an id that exists in the same document
Image button with empty [accessible name][] because the `aria-labelledby` attribute does not reference an id that exists in the same document.

```html
<input type="image" name="submit" src="button.gif" aria-labelledby="id1" />
```

#### Failed Example 4

[accessible name][] is only [whitespace][].
[accessible name][] is empty.

```html
<input type="image" name="submit" src="button.gif" alt=" " />
Expand Down
12 changes: 6 additions & 6 deletions _rules/link-accessible-name-c487ae.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ The rule applies to any HTML element with the [semantic role](#semantic-role) of

## Expectation

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

## Assumptions

Expand Down Expand Up @@ -158,7 +158,7 @@ When `link` is off screen.

#### Passed Example 11

`a` element where [accessible name][] does not only consist of [whitespace][].
`a` element where [accessible name][] is not empty.

```html
<a href="http://www.w3.org/WAI">:-)</a>
Expand All @@ -168,7 +168,7 @@ When `link` is off screen.

#### Failed Example 1

Image link without [accessible name][].
Image link with empty [accessible name][].

```html
<a href="http://www.w3.org/WAI"><img src="#"/></a>
Expand Down Expand Up @@ -227,15 +227,15 @@ Link with image that has empty `aria-labelledby`.

#### Failed Example 8

Link is completely empty, but still shows up in focus order, so it should have an [accessible name][].
Link is completely empty, but still shows up in focus order, so it should have an non-empty [accessible name][].

```html
<a href="http://www.w3.org/WAI"></a>
```

#### Failed Example 9

`area` element with `href` attribute does not have [accessible name][].
`area` element with `href` attribute has an empty [accessible name][].

```html
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
Expand All @@ -247,7 +247,7 @@ Link is completely empty, but still shows up in focus order, so it should have a

#### Failed Example 10

`a` element where [accessible name][] through content only consist of [whitespace][].
`a` element where [accessible name][] through content is empty.

```html
<a href="http://www.w3.org/WAI"> </a>
Expand Down
10 changes: 10 additions & 0 deletions pages/glossary/accessible-name.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,13 @@ The programmatically determined name of a user interface element that is [includ
The accessible name is calculated using the [accessible name and description computation](https://www.w3.org/TR/accname).

For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible name can be found in [HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation (working draft)](https://www.w3.org/TR/html-aam/#accessible-name-and-description-computation) and [SVG Accessibility API Mappings, Name and Description (working draft)](https://www.w3.org/TR/svg-aam/#mapping_additional).

**Note**: As per the [accessible name and description computation](https://www.w3.org/TR/accname), each element always has an accessible name. When no accessible name is provided, the element will nonetheless be assigned an empty (`""`) one.

**Note**: As per the [accessible name and description computation](https://www.w3.org/TR/accname), accessible names are [flat string](https://www.w3.org/TR/accname-1.1/#terminology) trimmed of leading and trailing whitespace. Notably, it is not possible for a non-empty accessible name to be composed only of whitespace since these must be trimmed.

#### Accessibility Support

- Because the [accessible name and description computation](https://www.w3.org/TR/accname) is not clear about which whitespace are considered, browsers behave differently when trimming and flattening the accessible name. For example, some browsers completely trim non-breaking spaces while some keep them in the accessible name.
- There exists a popular browser which does not perform the same trimming and flattening depending whether the accessible name comes from content, an `aria-label` attribute, or an `alt` attribute.
- There exists a popular browser which assign no accessible name (`null`) when none is provided, instead of assigned an empty accessible name (`""`).