diff --git a/_rules/link-in-context-descriptive-5effbb.md b/_rules/link-in-context-descriptive-5effbb.md index 95070ef88c..174800c93b 100755 --- a/_rules/link-in-context-descriptive-5effbb.md +++ b/_rules/link-in-context-descriptive-5effbb.md @@ -36,7 +36,7 @@ This rule applies to any [inheriting semantic][] `link` for which all the follow ## Expectation -The [accessible name][] of each target element together with its [programmatically determined link context][] describes the purpose of the link. +The [accessible name][] of each target element together with its [accessible description][] and [programmatically determined link context][] describes the purpose of the link. ## Background @@ -46,6 +46,8 @@ The [accessible name][] of each target element together with its [programmatical - This rule assumes that all [semantic][semantic role] `link` elements are used as links. An element marked up as a link, but that does not behave as a link would not fail success criteria [2.4.4 Link Purpose (In Context)][sc244] or [2.4.9 Link Purpose (Link only)][sc249]. +- This rule assumes that "link text" as referred to in WCAG encompasses both the [accessible name][] and [description][accessible description] of the target element. + ### Accessibility Support - Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some [semantic][semantic role] `link` elements can fail this rule with some technology but users of other technologies would not experience any accessibility issue. @@ -98,6 +100,28 @@ The [accessible name][] describes the purpose of the link. #### Passed Example 3 +The [accessible name][] together with the [accessible description][] describes the purpose of the link. + +```html +More + +

This product consists of several web pages.

+``` + +#### Passed Example 4 + +The [accessible name][] together with the [accessible description][] describes the purpose of the link. + +```html +More + + + +

This product consists of several web pages.

+``` + +#### Passed Example 5 + The [accessible name][] (from the link's text), together with its [programmatically determined link context][] (available from the text in the closest `p` ancestor), describes the purpose of the link. ```html @@ -106,7 +130,7 @@ The [accessible name][] (from the link's text), together with its [programmatica

This product consists of several web pages.

``` -#### Passed Example 4 +#### Passed Example 6 The [accessible name][] (from the link's text) describes the purpose of the link. @@ -116,7 +140,7 @@ The [accessible name][] (from the link's text) describes the purpose of the link

This product consists of several web pages.

``` -#### Passed Example 5 +#### Passed Example 7 The [programmatically determined link context][] (provided by the ancestor with a role of `listitem` and text "Ulysses") and the [accessible name][] (from the link's text) describe the purpose of the links. @@ -137,7 +161,7 @@ The [programmatically determined link context][] (provided by the ancestor with ``` -#### Passed Example 6 +#### Passed Example 8 The [programmatically determined link context][] (provided by the table header [assigned](https://html.spec.whatwg.org/multipage/tables.html#algorithm-for-assigning-header-cells) to the cell containing the link) and the [accessible name][] (from the link's text) describe the purpose of the links. @@ -158,7 +182,7 @@ The [programmatically determined link context][] (provided by the table header [ ``` -#### Passed Example 7 +#### Passed Example 9 The [accessible name][] describes the purpose of the link. @@ -180,7 +204,7 @@ The [accessible name][] describes the purpose of the link. ``` -#### Passed Example 8 +#### Passed Example 10 The [programmatically determined link context][] (provided by the cell containing the link) and the [accessible name][] (from the link's text) describe the purpose of the links. @@ -201,7 +225,7 @@ The [programmatically determined link context][] (provided by the cell containin ``` -#### Passed Example 9 +#### Passed Example 11 The [programmatically determined link context][] (provided by the element referenced by the `aria-describedby` attribute) and the [accessible name][] (from the link's text) describe the purpose of the links. @@ -339,6 +363,7 @@ This `a` element is not a [semantic][semantic role] `link`, because it has no `h ``` [accessible name]: #accessible-name 'Definition of Accessible Name' +[accessible description]: #accessible-description 'Definition of Accessible Description' [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' [presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' [programmatically determined link context]: #programmatically-determined-link-context 'Definition of Programmatically Determined Link Context' diff --git a/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md b/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md index 7874f41f37..7d86b680a0 100755 --- a/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md +++ b/_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md @@ -40,9 +40,10 @@ This rule applies to any set of two or more [HTML or SVG elements][] for which a - the elements are in the same [web page (HTML)][]; and - the elements are [included in the accessibility tree][included in the accessibility tree]; and - the elements have [matching][] [accessible names][accessible name] that are not empty (`""`); and -- the elements have the same [programmatically determined link context][]. +- the elements have [matching][] [accessible descriptions][accessible description]; and +- have the same [programmatically determined link context][]. -**Note:** The test target for this rule is the full set of link elements that share the same [matching][] [accessible name][] and [programmatically determined link context][]. +**Note:** The test target for this rule is the full set of link elements that share the same [matching][] [accessible name][], [accessible description][] and [programmatically determined link context][]. ## Expectation @@ -84,7 +85,7 @@ There are no accessibility support issues known. #### Passed Example 1 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context] and link to the [same resource][]. +These two HTML `a` elements have the same non-empty [accessible name][], empty [accessible description][], the same [context][programmatically determined link context], and resolve to the [same resource][]. ```html @@ -98,7 +99,7 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog #### Passed Example 2 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], and resolve to the [same resource][] after an instant redirect. +These two HTML `a` elements have the same non-empty [accessible name][], empty [accessible description][], the same [context][programmatically determined link context], and resolve to the [same resource][] after an instant redirect. ```html @@ -113,7 +114,7 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog #### Passed Example 3 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], and resolve to identical resources. +These two HTML `a` elements have the same non-empty [accessible name][], empty [accessible description][], the same [context][programmatically determined link context], and resolve to identical resources. ```html @@ -129,7 +130,7 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog #### Passed Example 4 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], and resolve to pages that serve the same purpose because the content section is the same. +These two HTML `a` elements have the same [accessible name][], empty [accessible description][], the same [context][programmatically determined link context], and resolve to pages that serve the same purpose because the content section is the same. ```html @@ -145,7 +146,7 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog #### Passed Example 5 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], and go to pages that fulfill the same purpose in relation to the link because they contain the same relevant information. +These two HTML `a` elements have the same [accessible name][], empty [accessible description][], the same [context][programmatically determined link context], and go to pages that fulfill the same purpose in relation to the link because they contain the same relevant information. ```html @@ -160,7 +161,7 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog #### Passed Example 6 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], and go to pages that use different layouts but have the same purpose. +These two HTML `a` elements have the same [accessible name][], empty [accessible description][], the same [context][programmatically determined link context], and go to pages that use different layouts but have the same purpose. ```html @@ -176,7 +177,7 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog #### Passed Example 7 -These two HTML `span` elements have an [explicit role][] of link, the same [accessible name][], the same [context][programmatically determined link context], and link to the [same resource][]. +These two HTML `span` elements have an [explicit role][] of link, the same [accessible name][], empty [accessible description][], the same [context][programmatically determined link context], and link to the [same resource][]. ```html @@ -202,7 +203,7 @@ These two HTML `span` elements have an [explicit role][] of link, the same [acce #### Passed Example 8 -These two SVG `a` and HTML `a` elements have the same [accessible name][], same [context][programmatically determined link context] and link to the [same resource][]. +These two SVG `a` and HTML `a` elements have the same [accessible name][], empty [accessible description][], same [context][programmatically determined link context] and link to the [same resource][]. ```html @@ -220,7 +221,7 @@ These two SVG `a` and HTML `a` elements have the same [accessible name][], same #### Passed Example 9 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], but resolve to different resources. However, the purpose of these links is [ambiguous to users in general](https://www.w3.org/TR/WCAG22/#dfn-ambiguous-to-users-in-general). Thus all readers are unsure about the destination and the person with a disability is not at any disadvantage. +These two HTML `a` elements have the same [accessible name][], the same [accessible description][], and the same [context][programmatically determined link context], but go to different resources. However, there is no visual information to let users know that both links resolve to non-equivalent resources. ```html @@ -256,7 +257,7 @@ These two HTML `a` elements have the same [accessible name][] and are nested wit #### Failed Example 2 -These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], but go to different resources. +These two HTML `a` elements have the same [accessible name][], the same [accessible description][] and [context][programmatically determined link context]. They link to web pages that are similar, but have different information in their content. ```html @@ -400,7 +401,7 @@ These two SVG `a` elements have the same [accessible name][] and [context][progr #### Failed Example 8 -These two HTML `a` elements with the same [accessible name][] and [context][programmatically determined link context] resolve to the [same resource][] after redirect, but the redirect is not instant. +These two HTML `a` elements with the same [accessible name][], the same [accessible description][], and the same [context][programmatically determined link context], resolve to the [same resource][] after redirect, but the redirect is not instant. ```html @@ -448,7 +449,28 @@ These two HTML `a` elements have different [accessible names][accessible name]. #### Inapplicable Example 3 -These two HTML `a` elements have the same [accessible name][] and link to the [same resource][] but different [programmatically determined link contexts][programmatically determined link context]. +These two HTML `a` elements have the same [accessible names][accessible name] but different [accessible descriptions][accessible description]. + +```html + +

+ Contact + Contact +

+ +``` + +#### Inapplicable Example 4 + +These two HTML `a` elements have the same [accessible name][], , the same [accessible description][], and link to the [same resource][] but different [programmatically determined link contexts][programmatically determined link context]. ```html @@ -465,7 +487,7 @@ These two HTML `a` elements have the same [accessible name][] and link to the [s ``` -#### Inapplicable Example 4 +#### Inapplicable Example 5 These two `span` elements do not have a [semantic role][] of link. @@ -483,9 +505,9 @@ These two `span` elements do not have a [semantic role][] of link. ``` -#### Inapplicable Example 5 +#### Inapplicable Example 6 -These two HTML `a` elements have the same [accessible name][] and link to the [same resource][] but different [programmatically determined link contexts][programmatically determined link context]. Even though the two contexts in this example are _identical_, they are not the _same_. That is: even though they have equivalent content, they do not consist of the same DOM elements. +These two HTML `a` elements have the same [accessible name][], the same [accessible description][], and link to the [same resource][] but different [programmatically determined link contexts][programmatically determined link context]. Even though the two contexts in this example are *identical*, they are not the *same*. That is: even though they have equivalent content, they do not consist of the same DOM elements. ```html @@ -500,16 +522,16 @@ These two HTML `a` elements have the same [accessible name][] and link to the [s ``` -#### Inapplicable Example 6 +#### Inapplicable Example 7 -These two HTML `a` elements have the same [accessible name][] but different [programmatically determined link contexts][programmatically determined link context] because the `div` elements place them in different display blocks. +These two HTML `a` elements have the same [accessible name][], the same [accessible description][], but different [programmatically determined link contexts][programmatically determined link context] because the `div` elements place them in different display blocks. ```html
Read more about the W3C WAI
Read more about the W3C internationalization
``` -#### Inapplicable Example 7 +#### Inapplicable Example 8 These two HTML `a` elements have the same [accessible name][] and [context][programmatically determined link context], but the second one is not [included in the accessibility tree][included in the accessibility tree]. @@ -524,6 +546,7 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog ``` [accessible name]: #accessible-name 'Definition of accessible name' +[accessible description]: #accessible-description 'Definition of Accessible Description' [document]: https://dom.spec.whatwg.org/#concept-document 'Definition of document' [equivalent resource]: #equivalent-resource 'Definition of Equivalent Resource' [explicit role]: #explicit-role 'Definition of explicit role' diff --git a/pages/glossary/accessible-description.md b/pages/glossary/accessible-description.md new file mode 100755 index 0000000000..aa26abafed --- /dev/null +++ b/pages/glossary/accessible-description.md @@ -0,0 +1,21 @@ +--- +title: Accessible Description +key: accessible-description +unambiguous: true +objective: true +input_aspects: + - Accessibility tree + - CSS styling + - DOM tree +--- + +The _accessible description_ is the programmatically determined description of a user interface element that is [included in the accessibility tree](#included-in-the-accessibility-tree). The accessible description provides information that complements the [accessible name][]. + +The accessible description is calculated using the [accessible name and description computation][]. + +For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible description 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][], each element with the 'aria-describedby' property always has an accessible description. + +[accessible name]: #accessible-name 'Definition of Accessible Name' +[accessible name and description computation]: https://www.w3.org/TR/accname 'Accessible Name and Description Computation' diff --git a/pages/glossary/programmatically-determined-link-context.md b/pages/glossary/programmatically-determined-link-context.md index 547901014c..672a5aadbd 100755 --- a/pages/glossary/programmatically-determined-link-context.md +++ b/pages/glossary/programmatically-determined-link-context.md @@ -13,8 +13,7 @@ The _programmatically determined context_ of a link (or _programmatically determ - being an [ancestor][] of the link in the [flat tree][] with a [semantic role][] of `listitem`; or - being the closest [ancestor][] of the link in the [flat tree][] that generates a [block container][]; or - being the closest [ancestor][] of the link in the [flat tree][] that has a [semantic role][] of `cell` or `gridcell`; or -- being a header cell [assigned][] to the closest [ancestor][] of the link in the [flat tree][] that has a [semantic role][] of `cell` or `gridcell`; or -- being referenced by an `aria-describedby` attribute of the link. +- being a header cell [assigned][] to the closest [ancestor][] of the link in the [flat tree][] that has a [semantic role][] of `cell` or `gridcell`. This definition is based on (but not equivalent to) the [WCAG definition of programmatically determined link context](https://www.w3.org/TR/WCAG22/#dfn-programmatically-determined-link-context).