diff --git a/index.html b/index.html index a8767337..044c82f5 100644 --- a/index.html +++ b/index.html @@ -66,12 +66,15 @@

Web developers MAY use the ARIA `role` and `aria-*` attributes on HTML elements, in accordance - with the requirements described in [[wai-aria-1.1]], except where these + with the requirements described in [[wai-aria-1.1|WAI-ARIA]], except where these conflict with the strong native semantics or are equal to the implicit ARIA semantics - of a given HTML element. These constraints are intended to prevent + of a given HTML element. The implicit ARIA semantics for an HTML element are defined in the [[html-aam-1.0|HTML Accessibility API Mappings]] specification. +

+

+ The constraints defined in this specification are intended to prevent developers from making assistive technology products report nonsensical user interface (UI) information that does not represent the actual UI of the document. @@ -79,7 +82,7 @@

Web developers MUST NOT use the ARIA `role` and `aria-*` attributes in a manner that conflicts with the semantics described in the - [[[#docconformance]]] table. It is NOT RECOMMENDED for web developers + [[[#docconformance]]] and [[[#docconformance-attr]]] tables. It is NOT RECOMMENDED for web developers to set the ARIA `role` and `aria-*` attributes to values that match the implicit ARIA semantics defined in the table. Doing so is unnecessary and can potentially lead to unintended consequences. @@ -135,7 +138,6 @@

</details> -

@@ -145,12 +147,11 @@

The following table provides normative per-element document-conformance requirements for the use of ARIA markup in HTML documents and describes the implicit ARIA semantics that apply to - HTML elements as defined in - the [[html-aam-1.0|HTML Accessibility API Mappings 1.0]] specification. + HTML elements as defined in [[html-aam-1.0|HTML AAM]].

- Each language feature (element or attribute) in a cell in the first column implies the - ARIA semantics (any role, states, and properties) given in the cell in the second column + Each language feature (element) in a cell in the first column implies the + ARIA semantics (role, states, and properties) given in the cell in the second column of the same row. The third cell in each row defines which ARIA role values and `aria-*` attributes which MAY be used. Where a cell in the third column includes the term Any `role` it indicates that any `role` value apart from the @@ -162,27 +163,29 @@

While setting an ARIA `role` and/or `aria-*` attribute that matches the implicit ARIA semantics is NOT RECOMMENDED, in some situations explicitly setting - these attributes can be helpful. For instance, in user agents which lack specific implicit semantics. + these attributes can be helpful. For instance, in user agents which lack exposing specific implicit ARIA semantics.

- - - - - + + + + + + + @@ -906,7 +910,7 @@

If the `figure` has no `figcaption` descendant:
- Roles: Any `role` + Any `role`

If the `figure` has a `figcaption` descendant: @@ -1272,7 +1276,10 @@

or `switch`.

- Global `aria-*` attributes and + Authors SHOULD NOT use the `aria-checked` attribute on `input type=checkbox` elements. +

+

+ Otherwise, any global `aria-*` attributes and any `aria-*` attributes applicable to the allowed roles and implied role (if any).

@@ -1313,7 +1320,7 @@

No `role`

- Global `aria-*` attributes + Global `aria-*` attributes and any `aria-*` attributes applicable to the `textbox` role.

@@ -1329,7 +1336,7 @@

No `role`

- Global `aria-*` attributes + Global `aria-*` attributes and any `aria-*` attributes applicable to the `textbox` role.

@@ -1416,7 +1423,7 @@

No `role`

- global `aria-*` attributes + Global `aria-*` attributes and any `aria-*` attributes applicable to the `textbox` role.

@@ -1449,7 +1456,7 @@

No `role`

- Global `aria-*` attributes and `aria-required` + Global `aria-*` attributes and any `aria-*` attributes applicable to the `textbox` role.

@@ -1467,7 +1474,10 @@

`menuitemradio`

- Global `aria-*` attributes and + Authors SHOULD NOT use the `aria-checked` attribute on `input type=radio` elements. +

+

+ Otherwise, any global `aria-*` attributes and any `aria-*` attributes applicable to the `menuitemradio` role.

@@ -1490,7 +1500,10 @@

No `role`

- Global `aria-*` attributes and + Authors SHOULD NOT use the `aria-valuemax` or `aria-valuemin` attributes on `input type=range` elements. +

+

+ Otherwise, any global `aria-*` attributes and any `aria-*` attributes applicable to the `slider` role.

@@ -1596,7 +1609,7 @@

`tel`, `url`, `email`, - or with a missing or invalid `type`, with a `list` attribute + or with a missing or invalid `type`, with a `list` attribute

@@ -1623,7 +1642,7 @@

No `role`

- global `aria-*` attributes + Global `aria-*` attributes and any `aria-*` attributes applicable to the `textbox` role.

@@ -1658,7 +1677,7 @@

No `role`

- global `aria-*` attributes + Global `aria-*` attributes and any `aria-*` attributes applicable to the `textbox` role.

@@ -1889,7 +1908,7 @@

No `role`

- global `aria-*` attributes + Global `aria-*` attributes.

@@ -2014,6 +2033,9 @@

No `role`

+

+ Authors SHOULD NOT use the `aria-selected` attribute on the `option` element. +

Global `aria-*` attributes and any `aria-*` attributes applicable to the `option` role. @@ -2315,9 +2337,10 @@

Role: `menu`

+

Authors SHOULD NOT use the `aria-multiselectable` attribute on a `select` element.

- Global `aria-*` attributes and - any `aria-*` attributes applicable to the `combobox` or `menu` role. + Otherwise, any global `aria-*` attributes and + any other `aria-*` attributes applicable to the `combobox` or `menu` role.

@@ -2333,9 +2356,10 @@

No `role`

+

Authors SHOULD NOT use the `aria-multiselectable` attribute on a `select` element.

- Global `aria-*` attributes and - any `aria-*` attributes applicable to the `listbox` role. + Otherwise, any global `aria-*` attributes and + any other `aria-*` attributes applicable to the `listbox` role.

@@ -2808,71 +2832,238 @@

-

+ +
- Rules of ARIA attribute usage by HTML feature + Rules of ARIA attribute usage by HTML element
- HTML feature - -

- Implicit ARIA semantics - (explicitly assigning these in markup is NOT RECOMMENDED) -

-
- ARIA roles, states and properties which MAY be used -
+ HTML element + +

+ Implicit ARIA semantics + (explicitly assigning these in markup is NOT RECOMMENDED) +

+
+ ARIA roles, states and properties which MAY be used +
@@ -217,6 +220,7 @@

any `aria-*` attributes applicable to the allowed roles and implied role (if any).

+

Note: it is not recommended to use `aria-disabled` on an `a` element with an `href` attribute.

role=combobox @@ -1606,7 +1619,13 @@

No `role`

- Global `aria-*` attributes and + Authors SHOULD NOT use the `aria-haspopup` attribute on the indicated `input`s with a `list` attribute. +

+

+ Authors MUST NOT use the `aria-haspopup` attribute with a value other than `listbox` on the indicated `input`s with a `list` attribute. +

+

+ Otherwise, any global `aria-*` attributes and any `aria-*` attributes applicable to the `combobox` role.

+ +

+ The elements marked with No corresponding role, in the + second column of the table do not have any implicit ARIA semantics, + but they do have meaning and this meaning may be + represented in roles, states and properties not provided by ARIA, and + exposed to users of assistive technology via accessibility APIs. It is + therefore recommended that web developers add a `role` attribute to a + semantically neutral element such as a `div` or `span`, rather than + overriding the semantics of the listed elements. +

+
+

+ Authors are encouraged to make use of the following documents for + guidance on using ARIA in HTML beyond that which is provided here: +

+
    +
  • [[[using-aria]]] - A practical guide for developers on how to + add accessibility information to HTML elements using the Accessible + Rich Internet Applications specification (ARIA 1.1). +
  • +
  • [[[wai-aria-practices-1.2]]] - An author's guide to understanding + and implementing Accessible Rich Internet Applications. +
  • +
+
+ + +

+ Document conformance requirements for use of ARIA attributes with HTML attributes +

+

+ Unless otherwise stated, authors MAY use `aria-*` attributes in place of their HTML equivalents on HTML elements where the `aria-*` semantics would be expected. For example, authors MAY use `aria-disabled=true` on a `button` rather than the `disabled` attribute. However, authors SHOULD NOT use both the native HTML attribute and the `aria-*` attribute together. As stated in WAI-ARIA's Conflicts with Host Language Semantics, user agents MUST ignore WAI-ARIA attributes and use the host language (HTML) attribute with the same implicit ARIA semantics. +

+

+ The following table represents HTML elements and their attributes which have `aria-*` attribute parity. +

+

+ Each language feature (element and attribute) in a cell in the first column implies the + ARIA semantics (states, and properties) given in the cell in the second column + of the same row. The third cell in each row defines how authors can use the native HTML feature, along with requirements for using the `aria-*` attributes that supply the same implicit ARIA semantics. +

+ + + + + + + + + + + + + + + + - + + + + + + - + + + + + + - + @@ -2882,133 +3073,134 @@

allowed the `readonly` attribute in HTML.

- Only use the `aria-readonly` attribute for elements - that are not allowed to have a `readonly` - attribute in HTML. + Authors MAY use the `aria-readonly` attribute on any element that is allowed the `readonly` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-readonly` attribute. +

+

+ Authors SHOULD NOT use the `aria-readonly="true"` on any element which also has a `readonly` attribute. +

+

+ Authors MUST NOT use `aria-readonly="false"` on any element which also has a `readonly` attribute.

- + + + + + + - - + + - + + + + + + + +
+ Rules of ARIA attribute usage by HTML feature +
+ HTML feature + +

+ Implicit ARIA semantics +

+
+ HTML feature and `aria-*` attribute author guidance +
+ Any element where the `checked` + attribute is allowed + - Element with a - `disabled` attribute + `aria-checked="true"` +

+ Use the `checked` attribute on any element that is + allowed the `checked` attribute in HTML. +

+

+ Authors SHOULD NOT use the `aria-checked` attribute on any element where the checkedness of the element can be in opposition to the current value of the `aria-checked` attribute. +

+

+ Authors MAY use the `aria-checked` attribute on any other element with a WAI-ARIA role which allows the attribute. +

+
+ Any element where the + `disabled` attribute is allowed + `aria-disabled="true"`

- Use the `disabled` attribute on any element that is - - allowed the `disabled` attribute in HTML. + Use the `disabled` attribute on any element that is allowed the `disabled` attribute in HTML. +

+

+ Authors MAY use the `aria-disabled` attribute on any element that is allowed the `disabled` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-disabled` attribute. +

+

+ Authors SHOULD NOT use `aria-disabled="true"` on any element which also has a `disabled` attribute.

- Only use the `aria-disabled` attribute for elements - that are not allowed to have a `disabled` attribute in HTML. + Authors MUST NOT use `aria-disabled="false"` on any element which also has a `disabled` attribute.

+ Any element with a `hidden` + attribute + - Element with a `placeholder` attribute + `aria-hidden="true"` + +

+ Authors MAY use the `aria-hidden` attribute on any HTML element, with the following exceptions: +

+

+ Authors SHOULD NOT use the `aria-hidden` attribute on any element which also has a `hidden` attribute. +

+

+ Authors MUST NOT use `aria-hidden="true"` on an element that can still receive keyboard focus, or on an ancestor element to an element or elements which can still receive keyboard focus. +

+

+ Any elements which can receive keyboard focus, interactive elements or otherwise, MUST have their ability to receive keyboard focus removed while the `aria-hidden="true"` attribute is present. For instance, by using `tabindex="-1"` on any focusable elements with `aria-hidden="true"`, or setting `tabindex="-1"` to focusable elements that are descendants of an `aria-hidden="true"` containing element. +

+ Any element where the `placeholder` attribute is allowed + - `aria-placeholder=""` + `aria-placeholder="..."`

- Use the `placeholder` attribute on any element that is allowed the - `placeholder` attribute in HTML. + Use the `placeholder` attribute on any element that is allowed the + `placeholder` attribute in HTML. +

+

+ Authors MAY use the `aria-placeholder` attribute on any element that is allowed the `placeholder` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-placeholder` attribute.

- Only use the `aria-placeholder` attribute on elements that are - not allowed to have a `placeholder` attribute in HTML. + Authors MUST NOT use the `aria-placeholder` attribute on any element which also has a `placeholder` attribute.

+ Any element where the `max` + attribute is allowed + - Element with a - `required` attribute + `aria-valuemax="..."` - `aria-required="true"` +

+ Use the `max` attribute on any element that is + allowed the `max` attribute in HTML. It is NOT RECOMMENDED to use the `aria-valuemax` attribute on these elements. +

+

+ Authors MAY use the `aria-valuemax` attribute on any other element with a WAI-ARIA role which allows the attribute. +

+

+ Authors SHOULD NOT use `aria-valuemax` on any element which also has a `max` attribute, even if the values of each attribute match. +

+

+ Authors MUST NOT use `aria-valuemax` on any element which also has a `max` attribute, and the values of each attribute do not match. +

+
+ Any element where the `min` + attribute is allowed + + `aria-valuemin="..."`

- Use the `aria-required` attribute on any element - that is allowed the - `required` attribute in HTML. MUST NOT be set - to `false` if the `required` - attribute is set. + Use the `min` attribute on any element that is + allowed the `min` attribute in HTML. It is NOT RECOMMENDED to use the `aria-valuemin` attribute on these elements.

- MAY also be used for elements that have an ARIA role which - allows the `aria-required` attribute. + Authors MAY use the `aria-valuemin` attribute on any other element with a WAI-ARIA role which allows the attribute. +

+

+ Authors SHOULD NOT use `aria-valuemin` on any element which also has a `min` attribute, even if the values of each attribute match. +

+

+ Authors MUST NOT use `aria-valuemin` on any element which also has a `min` attribute, and the values of each attribute do not match.

- Element with a `readonly` - attribute - + Any element where the `readonly` + attribute is allowed + `aria-readonly="true"`
+

+ Element with contenteditable="true"; + or
+ Element without `contenteditable` attribute whose closest + ancestor with a `contenteditable` attribute has + `contenteditable="true"`. +

+

+ Note: this is equivalent to the `isContentEditable` + IDL attribute. +

+
- Element with a `hidden` - attribute + `aria-readonly="false"` - `aria-hidden="true"` + Authors MUST NOT set `aria-readonly="true"` on an element that has `isContentEditable="true"`. +
+ Any element where the + `required` attribute is allowed + + `aria-required="true"`

- Use the `aria-hidden` attribute on any HTML element. + Use the `required` attribute on any element + that is allowed the + `required` attribute in HTML. +

+

+ Authors MAY use the `aria-required` attribute on any element that is allowed the `required` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-required` attribute.

- Note: If an element has a `hidden` - attribute, an `aria-hidden` attribute is not required. + Authors SHOULD NOT use the `aria-required="true"` on any element which also has a `required` attribute. +

+

+ Authors MUST NOT use `aria-required="false"` on any element which also has a `required` attribute.

- Element that is a candidate for - constraint validation but that does not satisfy its - constraints -
+ Any element where the `colspan` + attribute is allowed + - `aria-invalid="true"` + `aria-colspan="..."`

- The `aria-invalid` attribute may be used on any - HTML element that allows global - `aria-*` attributes except for a submittable element that - does not satisfy its validation - constraints. + Use the `colspan` attribute on any element that is + allowed the `colspan` attribute in HTML. +

+

+ Authors MAY use the `aria-colspan` attribute on any element that is allowed the `colspan` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-colspan` attribute. +

+

+ Authors SHOULD NOT use the `aria-colspan` attribute on any element which also has a `colspan` attribute. +

+

+ Authors MUST NOT use `aria-colspan` on any element which also has a `colspan` attribute, and the values of each attribute do not match.

+ Any element where the `rowspan` + attribute is allowed + + `aria-rowspan="..."` +

- Element with contenteditable="true"; - or
- Element without `contenteditable` attribute whose closest - ancestor with a `contenteditable` attribute has - `contenteditable="true"`. + Use the `rowspan` attribute on any element that is + allowed the `rowspan` attribute in HTML.

- Note: this is equivalent to the `isContentEditable` - IDL attribute. + Authors MAY use the `aria-rowspan` attribute on any element that is allowed the `rowspan` attribute in HTML, or any element with a WAI-ARIA role which allows the `aria-rowspan` attribute. +

+

+ Authors SHOULD NOT use the `aria-rowspan` attribute on any element which also has a `rowspan` attribute. +

+

+ Authors MUST NOT use `aria-rowspan` on any element which also has a `rowspan` attribute, and the values of each attribute do not match.

+ Element that is a candidate for + constraint validation but that does not satisfy its + constraints + - `aria-readonly="false"` + `aria-invalid="true"` - Do not set `aria-readonly="true"` on an element that has - `isContentEditable="true"`. +

+ The `aria-invalid` attribute MAY be used on any + HTML element that allows global `aria-*` attributes except for a submittable element that does not satisfy its validation constraints. +

-

- The elements marked with No corresponding role, in the - second column of the table do not have any implicit ARIA semantics, - but they do have meaning and this meaning may be - represented in roles, states and properties not provided by ARIA, and - exposed to users of assistive technology via accessibility APIs. It is - therefore recommended that web developers add a `role` attribute to a - semantically neutral element such as a `div` or `span`, rather than - overriding the semantics of the listed elements. -

-
-

- Authors are encouraged to make use of the following documents for - guidance on using ARIA in HTML beyond that which is provided here: -

-
    -
  • [[[using-aria]]] - A practical guide for developers on how to - add accessibility information to HTML elements using the Accessible - Rich Internet Applications specification (ARIA 1.1). -
  • -
  • [[[wai-aria-practices-1.2]]] - An author's guide to understanding - and implementing Accessible Rich Internet Applications. -
  • -
-
-

diff --git a/makeup.css b/makeup.css index 063da0dd..13ac914d 100644 --- a/makeup.css +++ b/makeup.css @@ -35,3 +35,11 @@ a code { .simple td { padding: 10px; } + +.simple tbody th, +.simple tbody th a, +.simple tbody th code { + background: inherit; + color: inherit; + font-weight: normal; +}