diff --git a/_rules/form-control-accessible-name-e086e5.md b/_rules/form-control-accessible-name-e086e5.md index 9a270e81cf..e04d81d235 100644 --- a/_rules/form-control-accessible-name-e086e5.md +++ b/_rules/form-control-accessible-name-e086e5.md @@ -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 @@ -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 diff --git a/_rules/iframe-accessible-name-cae760.md b/_rules/iframe-accessible-name-cae760.md index d03c516d3d..162315c6e7 100644 --- a/_rules/iframe-accessible-name-cae760.md +++ b/_rules/iframe-accessible-name-cae760.md @@ -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 @@ -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 @@ -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 diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md index b767c56d75..9c9a431f6c 100644 --- a/_rules/image-accessible-name-23a2a8.md +++ b/_rules/image-accessible-name-23a2a8.md @@ -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 @@ -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 :-) @@ -126,7 +126,7 @@ 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 @@ -134,7 +134,7 @@ The HTML `img` element is not marked as [decorative][] and does not have an [acc #### 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
@@ -142,7 +142,7 @@ The element with role of `img` does not have an [accessible name][]. #### 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
@@ -150,10 +150,10 @@ The `img` element inside a `div` positioned off screen has no [accessible name][ #### 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 - + ``` ### Inapplicable diff --git a/_rules/image-button-accessible-name-59796f.md b/_rules/image-button-accessible-name-59796f.md index bc9bf8e168..2b8f323497 100644 --- a/_rules/image-button-accessible-name-59796f.md +++ b/_rules/image-button-accessible-name-59796f.md @@ -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 @@ -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 @@ -106,7 +106,7 @@ 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 @@ -114,7 +114,7 @@ Image button element with no attributes to give [accessible name][] #### Failed Example 2 -Image button element with empty `alt` attribute +Image button element with empty [accessible name][]. ```html @@ -122,7 +122,7 @@ Image button element with empty `alt` attribute #### 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 @@ -130,7 +130,7 @@ Image button with aria-labelledby that does not reference an id that exists in t #### Failed Example 4 -[accessible name][] is only [whitespace][]. +[accessible name][] is empty. ```html diff --git a/_rules/link-accessible-name-c487ae.md b/_rules/link-accessible-name-c487ae.md index f97c667263..4d94b963e6 100644 --- a/_rules/link-accessible-name-c487ae.md +++ b/_rules/link-accessible-name-c487ae.md @@ -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 @@ -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 :-) @@ -168,7 +168,7 @@ When `link` is off screen. #### Failed Example 1 -Image link without [accessible name][]. +Image link with empty [accessible name][]. ```html @@ -227,7 +227,7 @@ 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 @@ -235,7 +235,7 @@ Link is completely empty, but still shows up in focus order, so it should have 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 Planets @@ -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 diff --git a/pages/glossary/accessible-name.md b/pages/glossary/accessible-name.md index 61effec7d7..20283585f8 100644 --- a/pages/glossary/accessible-name.md +++ b/pages/glossary/accessible-name.md @@ -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 (`""`).