From a957748181fbfc757046c23e3d34e1b3e8247b78 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Tue, 2 Feb 2021 10:02:59 +0000 Subject: [PATCH 01/15] ARIAMixin --- .../en-us/web/api/element/arialive/index.html | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 files/en-us/web/api/element/arialive/index.html diff --git a/files/en-us/web/api/element/arialive/index.html b/files/en-us/web/api/element/arialive/index.html new file mode 100644 index 000000000000000..ddf0e061c74df14 --- /dev/null +++ b/files/en-us/web/api/element/arialive/index.html @@ -0,0 +1,59 @@ +--- +title: Element.ariaLive +slug: Web/API/Element/ariaLive +tags: + - API + - Property + - Reference + - ariaLive + - AriaAttributes + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaLive property when used in the {{domxref("Element")}} interface reflects the value of the aria-live attribute.

+ +

Syntax

+ +
var ariaLive = element.ariaLive;
+element.ariaLive = ariaLive
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-live attribute on the element with an id of planetInfo is set to "polite". We then update the value to "assertive".

+ +
<div role="region" id="planetInfo" aria-live="polite"<
+  <h2 id="planetTitle">No planet selected</h2>
+  <p id="planetDescription">Select a planet to view its description</p>
+</div>
+ +
let el = document.getElementById('planetInfo');
+console.log(el.ariaLive); // "polite"
+el.ariaLive = "assertive";
+console.log(el.ariaLive); // assertive
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-arialive','ariaLive')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaLive")}}

From f73a6da5b9d7d6f58f8d3c3a2cadefdad11169ec Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Wed, 3 Feb 2021 07:33:12 +0000 Subject: [PATCH 02/15] Update files/en-us/web/api/element/arialive/index.html Co-authored-by: Joe Medley --- files/en-us/web/api/element/arialive/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/element/arialive/index.html b/files/en-us/web/api/element/arialive/index.html index ddf0e061c74df14..eda54a337108f6f 100644 --- a/files/en-us/web/api/element/arialive/index.html +++ b/files/en-us/web/api/element/arialive/index.html @@ -11,7 +11,7 @@ ---
{{DefaultAPISidebar("DOM")}}
-

The ariaLive property when used in the {{domxref("Element")}} interface reflects the value of the aria-live attribute.

+

The ariaLive property of the {{domxref("Element")}} interface reflects the value of the aria-live attribute.

Syntax

From 651d3cc1c7cd9fb1b6736ce8d757a9815d49ce1c Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Thu, 4 Feb 2021 12:16:33 +0000 Subject: [PATCH 03/15] more aria properties --- .../web/api/element/ariaatomic/index.html | 57 ++++++++++++ .../api/element/ariaautocomplete/index.html | 65 ++++++++++++++ .../en-us/web/api/element/ariabusy/index.html | 57 ++++++++++++ .../web/api/element/ariacolcount/index.html | 87 ++++++++++++++++++ .../web/api/element/ariacolindex/index.html | 89 +++++++++++++++++++ .../web/api/element/ariacolspan/index.html | 73 +++++++++++++++ .../web/api/element/ariaexpanded/index.html | 65 ++++++++++++++ .../web/api/element/ariahaspopup/index.html | 65 ++++++++++++++ .../web/api/element/ariarowcount/index.html | 87 ++++++++++++++++++ .../web/api/element/ariarowindex/index.html | 89 +++++++++++++++++++ .../web/api/element/ariarowspan/index.html | 74 +++++++++++++++ .../web/api/element/ariavaluemax/index.html | 59 ++++++++++++ .../web/api/element/ariavaluemin/index.html | 59 ++++++++++++ .../web/api/element/ariavaluenow/index.html | 59 ++++++++++++ .../web/api/element/ariavaluetext/index.html | 59 ++++++++++++ files/en-us/web/api/element/index.html | 85 ++++++++++++++++++ 16 files changed, 1129 insertions(+) create mode 100644 files/en-us/web/api/element/ariaatomic/index.html create mode 100644 files/en-us/web/api/element/ariaautocomplete/index.html create mode 100644 files/en-us/web/api/element/ariabusy/index.html create mode 100644 files/en-us/web/api/element/ariacolcount/index.html create mode 100644 files/en-us/web/api/element/ariacolindex/index.html create mode 100644 files/en-us/web/api/element/ariacolspan/index.html create mode 100644 files/en-us/web/api/element/ariaexpanded/index.html create mode 100644 files/en-us/web/api/element/ariahaspopup/index.html create mode 100644 files/en-us/web/api/element/ariarowcount/index.html create mode 100644 files/en-us/web/api/element/ariarowindex/index.html create mode 100644 files/en-us/web/api/element/ariarowspan/index.html create mode 100644 files/en-us/web/api/element/ariavaluemax/index.html create mode 100644 files/en-us/web/api/element/ariavaluemin/index.html create mode 100644 files/en-us/web/api/element/ariavaluenow/index.html create mode 100644 files/en-us/web/api/element/ariavaluetext/index.html diff --git a/files/en-us/web/api/element/ariaatomic/index.html b/files/en-us/web/api/element/ariaatomic/index.html new file mode 100644 index 000000000000000..0f5b52eb541fff4 --- /dev/null +++ b/files/en-us/web/api/element/ariaatomic/index.html @@ -0,0 +1,57 @@ +--- +title: Element.ariaAtomic +slug: Web/API/Element/ariaAtomic +tags: + - API + - Property + - Reference + - ariaAtomic + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaAtomic property of the {{domxref("Element")}} interface reflects the value of the aria-atomic attribute.

+ +

Syntax

+ +
var ariaAtomic = element.ariaAtomic;
+element.ariaAtomic = ariaAtomic
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-atomic attribute on the element with an id of clock is set to "true". Using ariaAtomic we update the value to "false".

+ +
<div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
+ +
let el = document.getElementById('clock');
+console.log(el.ariaAtomic); // true
+el.ariaAtomic = "false"
+console.log(el.ariaAtomic); // false
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariaatomic','ariaAtomic')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaAtomic")}}

diff --git a/files/en-us/web/api/element/ariaautocomplete/index.html b/files/en-us/web/api/element/ariaautocomplete/index.html new file mode 100644 index 000000000000000..5401aafaef2253a --- /dev/null +++ b/files/en-us/web/api/element/ariaautocomplete/index.html @@ -0,0 +1,65 @@ +--- +title: Element.ariaAutoComplete +slug: Web/API/Element/ariaAutoComplete +tags: + - API + - Property + - Reference + - ariaAutoComplete + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaAutoComplete property of the {{domxref("Element")}} interface reflects the value of the aria-autocomplete attribute.

+ +

Syntax

+ +
var ariaAutoComplete = element.ariaAutoComplete;
+element.ariaAutoComplete = ariaAutoComplete
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-autocomplete attribute on the element with an id of animal is set to "list". Using ariaAutoComplete we update the value to "inline".

+ +
<div class="animals-combobox">
+  <label for="animal">Animal</label>
+  <input id="animal" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true">
+  <button id="animals-button" tabindex="-1" aria-label="Open">▽</button>
+  <ul id="animals-listbox" role="listbox" aria-label="Animals">
+    <li id="animal-cat" role="option">Cat</li>
+    <li id="animal-dog" role="option">Dog</li>
+  </ul>
+</div>
+ +
let el = document.getElementById('animal');
+console.log(el.ariaAutoComplete); // list
+el.ariaAutoComplete = "inline";
+console.log(el.ariaAutoComplete); // inline
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariaautocomplete','ariaAutoComplete')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaAutoComplete")}}

diff --git a/files/en-us/web/api/element/ariabusy/index.html b/files/en-us/web/api/element/ariabusy/index.html new file mode 100644 index 000000000000000..2f682912cacadaf --- /dev/null +++ b/files/en-us/web/api/element/ariabusy/index.html @@ -0,0 +1,57 @@ +--- +title: Element.ariaBusy +slug: Web/API/Element/ariaBusy +tags: + - API + - Property + - Reference + - ariaBusy + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaBusy property of the {{domxref("Element")}} interface reflects the value of the aria-busy attribute.

+ +

Syntax

+ +
var ariaBusy = element.ariaBusy;
+element.ariaBusy = ariaBusy
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-busy attribute on the element with an id of clock is set to "false". Using ariaBusy we update the value to "true".

+ +
<div id="clock" role="timer" aria-live="polite" aria-atomic="true" aria-busy="false"></div>
+ +
let el = document.getElementById('clock');
+console.log(el.ariaBusy); // false
+el.ariaBusy = "true"
+console.log(el.ariaBusy); // true
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariabusy','ariaBusy')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaBusy")}}

diff --git a/files/en-us/web/api/element/ariacolcount/index.html b/files/en-us/web/api/element/ariacolcount/index.html new file mode 100644 index 000000000000000..e457682fc49e24d --- /dev/null +++ b/files/en-us/web/api/element/ariacolcount/index.html @@ -0,0 +1,87 @@ +--- +title: Element.ariaColCount +slug: Web/API/Element/ariaColCount +tags: + - API + - Property + - Reference + - ariaColCount + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaColCount property of the {{domxref("Element")}} interface reflects the value of the aria-rowcount attribute.

+ +

Syntax

+ +
var ariaColCount = element.ariaColCount;
+element.ariaColCount = ariaColCount
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-colcount attribute on the element with an id of semantic-table is set to "2". Using ariaColCount we update the value to "3".

+ +
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100" aria-colcount="2">
+  <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
+  <thead role="rowgroup">
+    <tr role="row">
+      <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA Role</th>
+      <th role="columnheader" aria-sort="none" aria-rowindex="1">Semantic Element</th>
+    </tr>
+  </thead>
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td role="cell" aria-rowindex="11">header</td>
+      <td role="cell" aria-rowindex="11">h1</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="16">header</td>
+      <td role="cell" aria-rowindex="16">h6</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="18">rowgroup</td>
+      <td role="cell" aria-rowindex="18">thead</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="24">term</td>
+      <td role="cell" aria-rowindex="24">dt</td>
+    </tr>
+  </tbody>
+</table>
+ +
let el = document.getElementById('semantic-table');
+console.log(el.ariaColCount); // 2
+el.ariaColCount = "3"
+console.log(el.ariaColCount); // 3
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariacolcount','ariaColCount')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaColCount")}}

+ + diff --git a/files/en-us/web/api/element/ariacolindex/index.html b/files/en-us/web/api/element/ariacolindex/index.html new file mode 100644 index 000000000000000..7a28a70fbfa56ee --- /dev/null +++ b/files/en-us/web/api/element/ariacolindex/index.html @@ -0,0 +1,89 @@ +--- +title: Element.ariaColIndex +slug: Web/API/Element/ariaColIndex +tags: + - API + - Property + - Reference + - ariaColIndex + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaColIndex property of the {{domxref("Element")}} interface reflects the value of the aria-colindex attribute.

+ +

Syntax

+ +
var ariaColIndex = element.ariaColIndex;
+element.ariaColIndex = ariaColIndex
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-colindex attribute on the element with an id of role-heading is set to "1". Using ariaColIndex we update the value to "2".

+ +
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
+  <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
+  <thead role="rowgroup">
+    <tr role="row">
+      <th role="columnheader" id="role-heading" aria-sort="none" aria-rowindex="1" aria-colindex="1">ARIA Role</th>
+      <th role="columnheader" id="element-heading" aria-sort="none" aria-rowindex="1">Semantic Element</th>
+    </tr>
+  </thead>
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td role="cell" aria-rowindex="11">header</td>
+      <td role="cell" aria-rowindex="11">h1</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="16">header</td>
+      <td role="cell" aria-rowindex="16">h6</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="18">rowgroup</td>
+      <td role="cell" aria-rowindex="18">thead</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="24">term</td>
+      <td role="cell" aria-rowindex="24">dt</td>
+    </tr>
+  </tbody>
+</table>
+ +
let el = document.getElementById('role-heading');
+console.log(el.ariaColIndex); // 1
+el.ariaColIndex = "2"
+console.log(el.ariaColIndex); // 2
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariacolindex','ariaColIndex')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaColIndex")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariacolspan/index.html b/files/en-us/web/api/element/ariacolspan/index.html new file mode 100644 index 000000000000000..09b9a0546f7b72d --- /dev/null +++ b/files/en-us/web/api/element/ariacolspan/index.html @@ -0,0 +1,73 @@ +--- +title: Element.ariaColSpan +slug: Web/API/Element/ariaColSpan +tags: + - API + - Property + - Reference + - ariaColSpan + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaColSpan property of the {{domxref("Element")}} interface reflects the value of the aria-colspan attribute.

+ +

Syntax

+ +
var ariaColSpan = element.ariaColSpan;
+element.ariaColSpan = ariaColSpan
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-colspan attribute on the element with an id of spanning-heading is set to "2". Using ariaColSpan we update the value to "3".

+ +
<table>
+  <tr>
+    <th>Heading 1</th>
+    <th>Heading 2</th>
+    <th>Heading 3</td>
+  </tr>
+  <tr>
+    <td colspan="2" aria-colspan="2" id="spanning-column">Spanning</td>
+    <td>One</td>
+  </tr>
+</table>
+ +
let el = document.getElementById('spanning-column');
+console.log(el.ariaColSpan);
+el.ariaColSpan = "3";
+console.log(el.ariaColSpan);
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariacolspan','ariaColSpan')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaColSpan")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariaexpanded/index.html b/files/en-us/web/api/element/ariaexpanded/index.html new file mode 100644 index 000000000000000..eb9d937a8f4144f --- /dev/null +++ b/files/en-us/web/api/element/ariaexpanded/index.html @@ -0,0 +1,65 @@ +--- +title: Element.ariaExpanded +slug: Web/API/Element/ariaExpanded +tags: + - API + - Property + - Reference + - ariaExpanded + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaExpanded property of the {{domxref("Element")}} interface reflects the value of the aria-expanded attribute.

+ +

Syntax

+ +
var ariaExpanded = element.ariaExpanded;
+element.ariaExpanded = ariaExpanded
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-expanded attribute on the element with an id of animal is set to "false". Using ariaExpanded we update the value to "true".

+ +
<div class="animals-combobox">
+  <label for="animal">Animal</label>
+  <input id="animal" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true">
+  <button id="animals-button" tabindex="-1" aria-label="Open">▽</button>
+  <ul id="animals-listbox" role="listbox" aria-label="Animals">
+    <li id="animal-cat" role="option">Cat</li>
+    <li id="animal-dog" role="option">Dog</li>
+  </ul>
+</div>
+ +
let el = document.getElementById('animal');
+console.log(el.ariaExpanded); // false
+el.ariaExpanded = "true";
+console.log(el.ariaExpanded); // true
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariaexpanded','ariaExpanded')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaExpanded")}}

diff --git a/files/en-us/web/api/element/ariahaspopup/index.html b/files/en-us/web/api/element/ariahaspopup/index.html new file mode 100644 index 000000000000000..5030b3d70173f68 --- /dev/null +++ b/files/en-us/web/api/element/ariahaspopup/index.html @@ -0,0 +1,65 @@ +--- +title: Element.ariaHasPopup +slug: Web/API/Element/ariaHasPopup +tags: + - API + - Property + - Reference + - ariaHasPopup + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaHasPopup property of the {{domxref("Element")}} interface reflects the value of the aria-haspopup attribute.

+ +

Syntax

+ +
var ariaHasPopup = element.ariaHasPopup;
+element.ariaHasPopup = ariaHasPopup
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-haspopup attribute on the element with an id of animal is set to "true". Using ariaHasPopup we update the value to "false".

+ +
<div class="animals-combobox">
+  <label for="animal">Animal</label>
+  <input id="animal" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true"">
+  <button id="animals-button" tabindex="-1" aria-label="Open">▽</button>
+  <ul id="animals-listbox" role="listbox" aria-label="Animals">
+    <li id="animal-cat" role="option">Cat</li>
+    <li id="animal-dog" role="option">Dog</li>
+  </ul>
+</div>
+ +
let el = document.getElementById('animal');
+console.log(el.ariaHasPopup); // true
+el.ariaHasPopup = "false";
+console.log(el.ariaHasPopup); // false
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariahaspopup','ariaHasPopup')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaHasPopup")}}

diff --git a/files/en-us/web/api/element/ariarowcount/index.html b/files/en-us/web/api/element/ariarowcount/index.html new file mode 100644 index 000000000000000..5ced783d0ba5ce7 --- /dev/null +++ b/files/en-us/web/api/element/ariarowcount/index.html @@ -0,0 +1,87 @@ +--- +title: Element.ariaRowCount +slug: Web/API/Element/ariaRowCount +tags: + - API + - Property + - Reference + - ariaRowCount + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaRowCount property of the {{domxref("Element")}} interface reflects the value of the aria-rowcount attribute.

+ +

Syntax

+ +
var ariaRowCount = element.ariaRowCount;
+element.ariaRowCount = ariaRowCount
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-rowcount attribute on the element with an id of semantic-table is set to "100", representing the total number of rows in the table, rather than the currently visible rows. Using ariaRowCount we update the value to "101".

+ +
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
+  <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
+  <thead role="rowgroup">
+    <tr role="row">
+      <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA Role</th>
+      <th role="columnheader" aria-sort="none" aria-rowindex="1">Semantic Element</th>
+    </tr>
+  </thead>
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td role="cell" aria-rowindex="11">header</td>
+      <td role="cell" aria-rowindex="11">h1</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="16">header</td>
+      <td role="cell" aria-rowindex="16">h6</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="18">rowgroup</td>
+      <td role="cell" aria-rowindex="18">thead</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="24">term</td>
+      <td role="cell" aria-rowindex="24">dt</td>
+    </tr>
+  </tbody>
+</table>
+ +
let el = document.getElementById('semantic-table');
+console.log(el.ariaRowCount); // 100
+el.ariaRowCount = "101"
+console.log(el.ariaRowCount); // 101
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariarowcount','ariaRowCount')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaRowCount")}}

+ + diff --git a/files/en-us/web/api/element/ariarowindex/index.html b/files/en-us/web/api/element/ariarowindex/index.html new file mode 100644 index 000000000000000..58112cac244aa36 --- /dev/null +++ b/files/en-us/web/api/element/ariarowindex/index.html @@ -0,0 +1,89 @@ +--- +title: Element.ariaRowIndex +slug: Web/API/Element/ariaRowIndex +tags: + - API + - Property + - Reference + - ariaRowIndex + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaRowIndex property of the {{domxref("Element")}} interface reflects the value of the aria-rowindex attribute.

+ +

Syntax

+ +
var ariaRowIndex = element.ariaRowIndex;
+element.ariaRowIndex = ariaRowIndex
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-rowindex attribute on the element with an id of role-heading is set to "1". Using ariaRowIndex we update the value to "2".

+ +
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
+  <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
+  <thead role="rowgroup">
+    <tr role="row">
+      <th role="columnheader" id="role-heading" aria-sort="none" aria-rowindex="1">ARIA Role</th>
+      <th role="columnheader" id="element-heading" aria-sort="none" aria-rowindex="1">Semantic Element</th>
+    </tr>
+  </thead>
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td role="cell" aria-rowindex="11">header</td>
+      <td role="cell" aria-rowindex="11">h1</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="16">header</td>
+      <td role="cell" aria-rowindex="16">h6</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="18">rowgroup</td>
+      <td role="cell" aria-rowindex="18">thead</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="24">term</td>
+      <td role="cell" aria-rowindex="24">dt</td>
+    </tr>
+  </tbody>
+</table>
+ +
let el = document.getElementById('role-heading');
+console.log(el.ariaRowIndex); // 1
+el.ariaRowIndex = "2"
+console.log(el.ariaRowIndex); // 2
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariarowindex','ariaRowIndex')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaRowIndex")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariarowspan/index.html b/files/en-us/web/api/element/ariarowspan/index.html new file mode 100644 index 000000000000000..0026223c1b5e03c --- /dev/null +++ b/files/en-us/web/api/element/ariarowspan/index.html @@ -0,0 +1,74 @@ +--- +title: Element.ariaRowSpan +slug: Web/API/Element/ariaRowSpan +tags: + - API + - Property + - Reference + - ariaRowSpan + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaRowSpan property of the {{domxref("Element")}} interface reflects the value of the aria-rowspan attribute.

+ +

Syntax

+ +
var ariaRowSpan = element.ariaRowSpan;
+element.ariaRowSpan = ariaRowSpan
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-rowspan attribute on the element with an id of spanning-heading is set to "3". Using ariaRowSpan we update the value to "2".

+ +
<table>
+  <tr>
+    <th id="spanning-heading" rowspan="3" aria-rowspan="3">Spanning heading</th>
+    <th>Heading</th>
+  </tr>
+  <tr>
+    <td>One</td>
+  </tr>
+  <tr>
+    <td>Two</td>
+  </tr>
+</table>
+ +
let el = document.getElementById('spanning-heading');
+console.log(el.ariaRowSpan);
+el.ariaRowSpan = "2";
+console.log(el.ariaRowSpan);
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariarowspan','ariaRowSpan')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaRowSpan")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariavaluemax/index.html b/files/en-us/web/api/element/ariavaluemax/index.html new file mode 100644 index 000000000000000..502c874a2dd29c4 --- /dev/null +++ b/files/en-us/web/api/element/ariavaluemax/index.html @@ -0,0 +1,59 @@ +--- +title: Element.ariaValueMax +slug: Web/API/Element/ariaValueMax +tags: + - API + - Property + - Reference + - ariaValueMax + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaValueMax property of the {{domxref("Element")}} interface reflects the value of the aria-valuemax attribute.

+ +

Syntax

+ +
var ariaValueMax = element.ariaValueMax;
+element.ariaValueMax = ariaValueMax
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-valuemax attribute on the element with an id of slider is set to "7". Using ariaValueMax we update the value to "6".

+ +
<div role="slider" aria-valuenow="1"
+  aria-valuemin="1" aria-valuemax="7"
+	aria-valuetext="Sunday">
+ +
let el = document.getElementById('slider');
+console.log(el.ariaValueMax); // 7
+el.ariaValueMax = "6";
+console.log(el.ariaValueMax); // 6
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariavaluemax','ariaValueMax')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaValueMax")}}

diff --git a/files/en-us/web/api/element/ariavaluemin/index.html b/files/en-us/web/api/element/ariavaluemin/index.html new file mode 100644 index 000000000000000..852fefec3ef2926 --- /dev/null +++ b/files/en-us/web/api/element/ariavaluemin/index.html @@ -0,0 +1,59 @@ +--- +title: Element.ariaValueMin +slug: Web/API/Element/ariaValueMin +tags: + - API + - Property + - Reference + - ariaValueMin + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaValueMin property of the {{domxref("Element")}} interface reflects the value of the aria-valuemin attribute.

+ +

Syntax

+ +
var ariaValueMin = element.ariaValueMin;
+element.ariaValueMin = ariaValueMin
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-valuemin attribute on the element with an id of slider is set to "1". Using ariaValueMin we update the value to "2".

+ +
<div role="slider" aria-valuenow="1"
+  aria-valuemin="1" aria-valuemax="7"
+	aria-valuetext="Sunday">
+ +
let el = document.getElementById('slider');
+console.log(el.ariaValueMin); // 1
+el.ariaValueMin = "2";
+console.log(el.ariaValueMin); // 2
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariavaluemin','ariaValueMin')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaValueMin")}}

diff --git a/files/en-us/web/api/element/ariavaluenow/index.html b/files/en-us/web/api/element/ariavaluenow/index.html new file mode 100644 index 000000000000000..9d4882082c12dfe --- /dev/null +++ b/files/en-us/web/api/element/ariavaluenow/index.html @@ -0,0 +1,59 @@ +--- +title: Element.ariaValueNow +slug: Web/API/Element/ariaValueNow +tags: + - API + - Property + - Reference + - ariaValueNow + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaValueNow property of the {{domxref("Element")}} interface reflects the value of the aria-valuenow attribute.

+ +

Syntax

+ +
var ariaValueNow = element.ariaValueNow;
+element.ariaValueNow = ariaValueNow
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-valuenow attribute on the element with an id of slider is set to "1". Using ariaValueNow we update the value to "2".

+ +
<div role="slider" aria-valuenow="1"
+  aria-valuemin="1" aria-valuemax="7"
+	aria-valuetext="Sunday">
+ +
let el = document.getElementById('slider');
+console.log(el.ariaValueNow); // 1
+el.ariaValueNow = "2";
+console.log(el.ariaValueNow); // 2
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariavaluenow','ariaValueNow')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaValueNow")}}

diff --git a/files/en-us/web/api/element/ariavaluetext/index.html b/files/en-us/web/api/element/ariavaluetext/index.html new file mode 100644 index 000000000000000..de7f46bb5b1d970 --- /dev/null +++ b/files/en-us/web/api/element/ariavaluetext/index.html @@ -0,0 +1,59 @@ +--- +title: Element.ariaValueText +slug: Web/API/Element/ariaValueText +tags: + - API + - Property + - Reference + - ariaValueText + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaValueText property of the {{domxref("Element")}} interface reflects the value of the aria-valuetext attribute.

+ +

Syntax

+ +
var ariaValueText = element.ariaValueText;
+element.ariaValueText = ariaValueText
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-valuetext attribute on the element with an id of slider is set to "Sunday" to give a human-readable value for the range. Using ariaValueText we update the value to "Monday".

+ +
<div role="slider" aria-valuenow="1"
+  aria-valuemin="1" aria-valuemax="7"
+	aria-valuetext="Sunday">
+ +
let el = document.getElementById('slider');
+console.log(el.ariaValueText); // Sunday
+el.ariaValueText = "Monday";
+console.log(el.ariaValueText); // Monday
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariavaluetext','ariaValueText')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaValueText")}}

diff --git a/files/en-us/web/api/element/index.html b/files/en-us/web/api/element/index.html index 26f3a016b4ca95c..82b2cb8e4ed7fa2 100644 --- a/files/en-us/web/api/element/index.html +++ b/files/en-us/web/api/element/index.html @@ -106,6 +106,91 @@

Properties included from Slotable

Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in. +

Properties included from ARIA

+ +

The Element interface includes the following properties, defined on the ARIAMixin mixin.

+ +
+
{{domxref("Element.ariaAtomic")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-atomic attribute.
+
{{domxref("Element.ariaAutoComplete")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-autocomplete attribute.
+
{{domxref("Element.ariaBusy")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-busy attribute.
+
{{domxref("Element.ariaChecked")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-checked attribute.
+
{{domxref("Element.ariaColCount")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-colcount attribute.
+
{{domxref("Element.ariaColIndex")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-colindex attribute.
+
{{domxref("Element.ariaColIndexText")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-colindextext attribute.
+
{{domxref("Element.ariaColSpan")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-colspan attribute.
+
{{domxref("Element.ariaCurrent")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-current attribute.
+
{{domxref("Element.ariaDescription")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-description attribute.
+
{{domxref("Element.ariaDisabled")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-disabled attribute.
+
{{domxref("Element.ariaExpanded")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-expanded attribute.
+
{{domxref("Element.ariaHasPopup")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-haspopup attribute.
+
{{domxref("Element.ariaHidden")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-hidden attribute.
+
{{domxref("Element.ariaKeyShortcuts")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-keyshortcuts attribute.
+
{{domxref("Element.ariaLabel")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-label attribute.
+
{{domxref("Element.ariaLevel")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-level attribute.
+
{{domxref("Element.ariaLive")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-live attribute.
+
{{domxref("Element.ariaModal")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-modal attribute.
+
{{domxref("Element.ariaMultiline")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-multiline attribute.
+
{{domxref("Element.ariaMultiSelectable")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-multiselectable attribute.
+
{{domxref("Element.ariaOrientation")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-orientation attribute.
+
{{domxref("Element.ariaPlaceholder")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-placeholder attribute.
+
{{domxref("Element.ariaPosInSet")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-posinset attribute.
+
{{domxref("Element.ariaPressed")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-pressed attribute.
+
{{domxref("Element.ariaReadOnly")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-readonly attribute.
+
{{domxref("Element.ariaRelevant")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-relevant attribute.
+
{{domxref("Element.ariaRequired")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-required attribute.
+
{{domxref("Element.ariaRoleDescription")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-roledescription attribute.
+
{{domxref("Element.ariaRowCount")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-rowcount attribute.
+
{{domxref("Element.ariaRowIndex")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-rowindex attribute.
+
{{domxref("Element.ariaRowSpan")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-rowspan attribute.
+
{{domxref("Element.ariaSelected")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-selected attribute.
+
{{domxref("Element.ariaSetSize")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-setsize attribute.
+
{{domxref("Element.ariaSort")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-sort attribute.
+
{{domxref("Element.ariaValueMax")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-valueMax attribute.
+
{{domxref("Element.ariaValueMin")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-valueMin attribute.
+
{{domxref("Element.ariaValueNow")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-valueNow attribute.
+
{{domxref("Element.ariaValueText")}}
+
Is a {{domxref("DOMString")}} reflecting the aria-valuetext attribute.
+
+

Event handlers

From 006719f2f5a9a67dedbc2cf968114dfa78ac6ca1 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Thu, 4 Feb 2021 16:01:05 +0000 Subject: [PATCH 04/15] more aria properties --- .../api/element/ariacolindextext/index.html | 89 +++++++++++++++++++ .../api/element/ariadescription/index.html | 57 ++++++++++++ .../web/api/element/ariahidden/index.html | 57 ++++++++++++ .../web/api/element/arialabel/index.html | 57 ++++++++++++ .../api/element/ariarowindextext/index.html | 89 +++++++++++++++++++ .../web/api/element/ariaselected/index.html | 63 +++++++++++++ .../web/api/element/ariasetsize/index.html | 63 +++++++++++++ .../en-us/web/api/element/ariasort/index.html | 89 +++++++++++++++++++ 8 files changed, 564 insertions(+) create mode 100644 files/en-us/web/api/element/ariacolindextext/index.html create mode 100644 files/en-us/web/api/element/ariadescription/index.html create mode 100644 files/en-us/web/api/element/ariahidden/index.html create mode 100644 files/en-us/web/api/element/arialabel/index.html create mode 100644 files/en-us/web/api/element/ariarowindextext/index.html create mode 100644 files/en-us/web/api/element/ariaselected/index.html create mode 100644 files/en-us/web/api/element/ariasetsize/index.html create mode 100644 files/en-us/web/api/element/ariasort/index.html diff --git a/files/en-us/web/api/element/ariacolindextext/index.html b/files/en-us/web/api/element/ariacolindextext/index.html new file mode 100644 index 000000000000000..498b87f4ce5e467 --- /dev/null +++ b/files/en-us/web/api/element/ariacolindextext/index.html @@ -0,0 +1,89 @@ +--- +title: Element.ariaColIndexText +slug: Web/API/Element/ariaColIndexText +tags: + - API + - Property + - Reference + - ariaColIndexText + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaColIndexText property of the {{domxref("Element")}} interface reflects the value of the aria-colindextext attribute.

+ +

Syntax

+ +
var ariaColIndexText = element.ariaColIndexText;
+element.ariaColIndexText = ariaColIndexText
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-colindex attribute on the element with an id of role-heading is set to "Aria Role column". Using ariaColIndexText we update the value to the string "New column name".

+ +
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
+  <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
+  <thead role="rowgroup">
+    <tr role="row">
+      <th role="columnheader" id="role-heading" aria-sort="none" aria-rowindex="1" aria-colindex="1" aria-colindextext="Aria Role column">ARIA Role</th>
+      <th role="columnheader" id="element-heading" aria-sort="none" aria-rowindex="1">Semantic Element</th>
+    </tr>
+  </thead>
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td role="cell" aria-rowindex="11">header</td>
+      <td role="cell" aria-rowindex="11">h1</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="16">header</td>
+      <td role="cell" aria-rowindex="16">h6</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="18">rowgroup</td>
+      <td role="cell" aria-rowindex="18">thead</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="24">term</td>
+      <td role="cell" aria-rowindex="24">dt</td>
+    </tr>
+  </tbody>
+</table>
+ +
let el = document.getElementById('role-heading');
+console.log(el.ariaColIndexText); // "Aria Role"
+el.ariaColIndexText = "New column name"
+console.log(el.ariaColIndexText); // "New column name"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariacolindextext','ariaColIndexText')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaColIndexText")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariadescription/index.html b/files/en-us/web/api/element/ariadescription/index.html new file mode 100644 index 000000000000000..69051ed70551e7a --- /dev/null +++ b/files/en-us/web/api/element/ariadescription/index.html @@ -0,0 +1,57 @@ +--- +title: Element.ariaDescription +slug: Web/API/Element/ariaDescription +tags: + - API + - Property + - Reference + - ariaDescription + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaDescription property of the {{domxref("Element")}} interface reflects the value of the aria-description attribute.

+ +

Syntax

+ +
var ariaDescription = element.ariaDescription;
+element.ariaDescription = ariaDescription
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-description attribute on the element with an id of close-button is set to the string "A longer description of the function of this element". Using ariaDescription we can update the value.

+ +
<button aria-label="Close" aria-description="A longer description of the function of this element" id="close-button">X</button>
+ +
let el = document.getElementById('close-button');
+console.log(el.ariaDescription); // "A longer description of the function of this element"
+el.ariaDescription = "A different description"
+console.log(el.ariaDescription); // "A different description"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariadescription','ariaDescription')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaDescription")}}

diff --git a/files/en-us/web/api/element/ariahidden/index.html b/files/en-us/web/api/element/ariahidden/index.html new file mode 100644 index 000000000000000..66f4d41c1712545 --- /dev/null +++ b/files/en-us/web/api/element/ariahidden/index.html @@ -0,0 +1,57 @@ +--- +title: Element.ariaHidden +slug: Web/API/Element/ariaHidden +tags: + - API + - Property + - Reference + - ariaHidden + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaHidden property of the {{domxref("Element")}} interface reflects the value of the aria-hidden attribute.

+ +

Syntax

+ +
var ariaHidden = element.ariaHidden;
+element.ariaHidden = ariaHidden
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-hidden attribute on the element with an id of hidden is set to "true". Using ariaHidden we update the value to "false".

+ +
<div id="hidden" aria-hidden="true">Some things are better left unsaid.</div>
+ +
let el = document.getElementById('hidden');
+console.log(el.ariaHidden); // true
+el.ariaHidden = "false"
+console.log(el.ariaHidden); // false
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariahidden','ariaHidden')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaHidden")}}

diff --git a/files/en-us/web/api/element/arialabel/index.html b/files/en-us/web/api/element/arialabel/index.html new file mode 100644 index 000000000000000..0df7f46d827a840 --- /dev/null +++ b/files/en-us/web/api/element/arialabel/index.html @@ -0,0 +1,57 @@ +--- +title: Element.ariaLabel +slug: Web/API/Element/ariaLabel +tags: + - API + - Property + - Reference + - ariaLabel + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaLabel property of the {{domxref("Element")}} interface reflects the value of the aria-label attribute.

+ +

Syntax

+ +
var ariaLabel = element.ariaLabel;
+element.ariaLabel = ariaLabel
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-label attribute on the element with an id of close-button is set to "Close". Using ariaLabel we update the value to "Close dialog".

+ +
<button aria-label="Close" id="close-button">X</button>
+ +
let el = document.getElementById('close-button');
+console.log(el.ariaLabel); // "Close"
+el.ariaLabel = "Close dialog"
+console.log(el.ariaLabel); // "Close dialog"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-arialabel','ariaLabel')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaLabel")}}

diff --git a/files/en-us/web/api/element/ariarowindextext/index.html b/files/en-us/web/api/element/ariarowindextext/index.html new file mode 100644 index 000000000000000..3eb975ea3902cd8 --- /dev/null +++ b/files/en-us/web/api/element/ariarowindextext/index.html @@ -0,0 +1,89 @@ +--- +title: Element.ariaRowIndexText +slug: Web/API/Element/ariaRowIndexText +tags: + - API + - Property + - Reference + - ariaRowIndexText + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaRowIndexText property of the {{domxref("Element")}} interface reflects the value of the aria-rowindextext attribute.

+ +

Syntax

+ +
var ariaRowIndexText = element.ariaRowIndexText;
+element.ariaRowIndexText = ariaRowIndexText
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-rowindextext attribute on the element with an id of role-heading is set to "Heading row". Using ariaRowIndexText we update the value to "Updated heading row".

+ +
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
+  <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
+  <thead role="rowgroup">
+    <tr role="row">
+      <th role="columnheader" id="role-heading" aria-sort="none" aria-rowindex="1" aria-rowindextext="Heading row">ARIA Role</th>
+      <th role="columnheader" id="element-heading" aria-sort="none" aria-rowindex="1">Semantic Element</th>
+    </tr>
+  </thead>
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td role="cell" aria-rowindex="11">header</td>
+      <td role="cell" aria-rowindex="11">h1</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="16">header</td>
+      <td role="cell" aria-rowindex="16">h6</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="18">rowgroup</td>
+      <td role="cell" aria-rowindex="18">thead</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="24">term</td>
+      <td role="cell" aria-rowindex="24">dt</td>
+    </tr>
+  </tbody>
+</table>
+ +
let el = document.getElementById('role-heading');
+console.log(el.ariaRowIndexText); // "Heading row"
+el.ariaRowIndexText = "Updated heading row"
+console.log(el.ariaRowIndexText); // "Updated heading row"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariarowindextext','ariaRowIndexText')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaRowIndexText")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariaselected/index.html b/files/en-us/web/api/element/ariaselected/index.html new file mode 100644 index 000000000000000..99963f0f3a16bd5 --- /dev/null +++ b/files/en-us/web/api/element/ariaselected/index.html @@ -0,0 +1,63 @@ +--- +title: Element.ariaSelected +slug: Web/API/Element/ariaSelected +tags: + - API + - Property + - Reference + - ariaSelected + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaSelected property of the {{domxref("Element")}} interface reflects the value of the aria-selected attribute.

+ +

Syntax

+ +
var ariaSelected = element.ariaSelected;
+element.ariaSelected = ariaSelected
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-selected attribute on the element with an id of tab-id is set to "true". Using ariaSelected we update the value to "false".

+ +
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">Tab label</button>
+ +
let el = document.getElementById('tab-id');
+console.log(el.ariaSelected); // true
+el.ariaSelected = "false";
+console.log(el.ariaSelected); // false
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariavaluemax','ariaSelected')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaSelected")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariasetsize/index.html b/files/en-us/web/api/element/ariasetsize/index.html new file mode 100644 index 000000000000000..81a9cdc5178f39f --- /dev/null +++ b/files/en-us/web/api/element/ariasetsize/index.html @@ -0,0 +1,63 @@ +--- +title: Element.ariaSetSize +slug: Web/API/Element/ariaSetSize +tags: + - API + - Property + - Reference + - ariaSetSize + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaSetSize property of the {{domxref("Element")}} interface reflects the value of the aria-setsize attribute.

+ +

Syntax

+ +
var ariaSetSize = element.ariaSetSize;
+element.ariaSetSize = ariaSetSize
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-setsize attribute on the element with an id of tab-id is set to "3", to inform a device that there are currently 3 tabs in the group. Using ariaSetSize we update the value to "4".

+ +
<button role="tab" aria-selected="true" aria-setsize="3" aria-controls="tabpanel-id" id="tab-id">Tab label</button>
+ +
let el = document.getElementById('tab-id');
+console.log(el.ariaSetSize); // 3
+el.ariaSetSize = "4";
+console.log(el.ariaSetSize); // 4
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariasetsize','ariaSetSize')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaSetSize")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariasort/index.html b/files/en-us/web/api/element/ariasort/index.html new file mode 100644 index 000000000000000..9beae81360c5c71 --- /dev/null +++ b/files/en-us/web/api/element/ariasort/index.html @@ -0,0 +1,89 @@ +--- +title: Element.ariaSort +slug: Web/API/Element/ariaSort +tags: + - API + - Property + - Reference + - ariaSort + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaSort property of the {{domxref("Element")}} interface reflects the value of the aria-sort attribute.

+ +

Syntax

+ +
var ariaSort = element.ariaSort;
+element.ariaSort = ariaSort
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-sort attribute on the element with an id of role-heading is set to "none". Using ariaSort we update the value to "ascending".

+ +
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
+  <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
+  <thead role="rowgroup">
+    <tr role="row">
+      <th role="columnheader" id="role-heading" aria-sort="none" aria-rowindex="1" aria-colindex="1">ARIA Role</th>
+      <th role="columnheader" id="element-heading" aria-sort="none" aria-rowindex="1">Semantic Element</th>
+    </tr>
+  </thead>
+  <tbody role="rowgroup">
+    <tr role="row">
+      <td role="cell" aria-rowindex="11">header</td>
+      <td role="cell" aria-rowindex="11">h1</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="16">header</td>
+      <td role="cell" aria-rowindex="16">h6</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="18">rowgroup</td>
+      <td role="cell" aria-rowindex="18">thead</td>
+    </tr>
+    <tr role="row">
+      <td role="cell" aria-rowindex="24">term</td>
+      <td role="cell" aria-rowindex="24">dt</td>
+    </tr>
+  </tbody>
+</table>
+ +
let el = document.getElementById('role-heading');
+console.log(el.ariaSort); // none
+el.ariaSort = "ascending"
+console.log(el.ariaSort); // ascending
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariasort','ariaSort')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaSort")}}

+ +

See also

+ + From a12f1229869d3c6bf5938ae83f256c371d4f268f Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Fri, 5 Feb 2021 12:36:07 +0000 Subject: [PATCH 05/15] last batch of attributes. --- .../web/api/element/ariaatomic/index.html | 8 +- .../api/element/ariaautocomplete/index.html | 12 ++- .../en-us/web/api/element/ariabusy/index.html | 9 +- .../web/api/element/ariachecked/index.html | 80 +++++++++++++++++ .../web/api/element/ariacolcount/index.html | 2 +- .../web/api/element/ariacolindex/index.html | 2 +- .../web/api/element/ariacolspan/index.html | 2 +- .../web/api/element/ariacurrent/index.html | 86 +++++++++++++++++++ .../web/api/element/ariadisabled/index.html | 69 +++++++++++++++ .../web/api/element/ariaexpanded/index.html | 11 ++- .../web/api/element/ariahaspopup/index.html | 19 +++- .../web/api/element/ariahidden/index.html | 11 ++- .../api/element/ariakeyshortcuts/index.html | 57 ++++++++++++ .../web/api/element/arialevel/index.html | 69 +++++++++++++++ .../en-us/web/api/element/arialive/index.html | 11 ++- .../web/api/element/ariamodal/index.html | 71 +++++++++++++++ .../web/api/element/ariamultiline/index.html | 77 +++++++++++++++++ .../element/ariamultiselectable/index.html | 80 +++++++++++++++++ .../api/element/ariaorientation/index.html | 73 ++++++++++++++++ .../api/element/ariaplaceholder/index.html | 69 +++++++++++++++ .../web/api/element/ariaposinset/index.html | 59 +++++++++++++ .../web/api/element/ariapressed/index.html | 79 +++++++++++++++++ .../web/api/element/ariareadonly/index.html | 77 +++++++++++++++++ .../web/api/element/ariarelevant/index.html | 68 +++++++++++++++ .../web/api/element/ariarequired/index.html | 77 +++++++++++++++++ .../element/ariaroledescription/index.html | 62 +++++++++++++ .../web/api/element/ariarowcount/index.html | 2 +- .../web/api/element/ariarowindex/index.html | 2 +- .../web/api/element/ariarowspan/index.html | 2 +- .../web/api/element/ariaselected/index.html | 11 ++- .../web/api/element/ariasetsize/index.html | 2 +- .../en-us/web/api/element/ariasort/index.html | 13 ++- .../web/api/element/ariavaluemax/index.html | 2 +- .../web/api/element/ariavaluemin/index.html | 2 +- .../web/api/element/ariavaluenow/index.html | 2 +- 35 files changed, 1259 insertions(+), 19 deletions(-) create mode 100644 files/en-us/web/api/element/ariachecked/index.html create mode 100644 files/en-us/web/api/element/ariacurrent/index.html create mode 100644 files/en-us/web/api/element/ariadisabled/index.html create mode 100644 files/en-us/web/api/element/ariakeyshortcuts/index.html create mode 100644 files/en-us/web/api/element/arialevel/index.html create mode 100644 files/en-us/web/api/element/ariamodal/index.html create mode 100644 files/en-us/web/api/element/ariamultiline/index.html create mode 100644 files/en-us/web/api/element/ariamultiselectable/index.html create mode 100644 files/en-us/web/api/element/ariaorientation/index.html create mode 100644 files/en-us/web/api/element/ariaplaceholder/index.html create mode 100644 files/en-us/web/api/element/ariaposinset/index.html create mode 100644 files/en-us/web/api/element/ariapressed/index.html create mode 100644 files/en-us/web/api/element/ariareadonly/index.html create mode 100644 files/en-us/web/api/element/ariarelevant/index.html create mode 100644 files/en-us/web/api/element/ariarequired/index.html create mode 100644 files/en-us/web/api/element/ariaroledescription/index.html diff --git a/files/en-us/web/api/element/ariaatomic/index.html b/files/en-us/web/api/element/ariaatomic/index.html index 0f5b52eb541fff4..437e0ffccf49fcd 100644 --- a/files/en-us/web/api/element/ariaatomic/index.html +++ b/files/en-us/web/api/element/ariaatomic/index.html @@ -20,7 +20,13 @@

Syntax

element.ariaAtomic = ariaAtomic

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+
+
false
+
Assistive technologies will present only the changed node or nodes.
+
true
+
Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.
+

Examples

diff --git a/files/en-us/web/api/element/ariaautocomplete/index.html b/files/en-us/web/api/element/ariaautocomplete/index.html index 5401aafaef2253a..20d1700833b73fa 100644 --- a/files/en-us/web/api/element/ariaautocomplete/index.html +++ b/files/en-us/web/api/element/ariaautocomplete/index.html @@ -20,7 +20,17 @@

Syntax

element.ariaAutoComplete = ariaAutoComplete

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+
+
inline
+
When a user is providing input, text suggesting one way to complete the provided input may be dynamically inserted after the caret.
+
list
+
When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed.
+
both
+
When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.
+
none
+
When a user is providing input, an automatic suggestion that attempts to predict how the user intends to complete the input is not displayed.
+

Examples

diff --git a/files/en-us/web/api/element/ariabusy/index.html b/files/en-us/web/api/element/ariabusy/index.html index 2f682912cacadaf..06d6d058005388d 100644 --- a/files/en-us/web/api/element/ariabusy/index.html +++ b/files/en-us/web/api/element/ariabusy/index.html @@ -20,7 +20,14 @@

Syntax

element.ariaBusy = ariaBusy

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
There are no expected updates for the element.
+
false
+
The element is being updated.
+

Examples

diff --git a/files/en-us/web/api/element/ariachecked/index.html b/files/en-us/web/api/element/ariachecked/index.html new file mode 100644 index 000000000000000..3d9812b28bea11b --- /dev/null +++ b/files/en-us/web/api/element/ariachecked/index.html @@ -0,0 +1,80 @@ +--- +title: Element.ariaChecked +slug: Web/API/Element/ariaChecked +tags: + - API + - Property + - Reference + - ariaChecked + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaChecked property of the {{domxref("Element")}} interface reflects the value of the aria-checked attribute.

+ +

Syntax

+ +
var ariaChecked = element.ariaChecked;
+element.ariaChecked = ariaChecked
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
The element is checked.
+
mixed
+
Indicates a mixed mode value for a tri-state checkbox or menuitemcheckbox.
+
false
+
The element supports being checked but is not currently checked.
+
undefined
+
The element does not support being checked.
+
+ +

Examples

+ +

In this example the aria-checked attribute on the element with an id of checkBoxInput is set to "false" indicating that this input is currently unchecked. Using ariaChecked we update the value to "true".

+ +
<span role="checkbox" id="checkBoxInput" aria-checked="false" tabindex="0" aria-labelledby="chk1-label">
+</span> <label id="chk1-label">Remember my preferences</label>
+ +
let el = document.getElementById('checkBoxInput');
+console.log(el.ariaChecked); // "false"
+el.ariaChecked = "true"
+console.log(el.ariaChecked); // "true"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("input")}} element with type="checkbox" as this element has built in semantics and does not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariachecked','ariaChecked')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaChecked")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariacolcount/index.html b/files/en-us/web/api/element/ariacolcount/index.html index e457682fc49e24d..b936ea835f5e8d1 100644 --- a/files/en-us/web/api/element/ariacolcount/index.html +++ b/files/en-us/web/api/element/ariacolcount/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaColCount = ariaColCount

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains an integer.

Examples

diff --git a/files/en-us/web/api/element/ariacolindex/index.html b/files/en-us/web/api/element/ariacolindex/index.html index 7a28a70fbfa56ee..ec19155a6a4a5ba 100644 --- a/files/en-us/web/api/element/ariacolindex/index.html +++ b/files/en-us/web/api/element/ariacolindex/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaColIndex = ariaColIndex

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains an integer.

Examples

diff --git a/files/en-us/web/api/element/ariacolspan/index.html b/files/en-us/web/api/element/ariacolspan/index.html index 09b9a0546f7b72d..7221779ea40ef09 100644 --- a/files/en-us/web/api/element/ariacolspan/index.html +++ b/files/en-us/web/api/element/ariacolspan/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaColSpan = ariaColSpan

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains an integer.

Examples

diff --git a/files/en-us/web/api/element/ariacurrent/index.html b/files/en-us/web/api/element/ariacurrent/index.html new file mode 100644 index 000000000000000..e00503f58c9050d --- /dev/null +++ b/files/en-us/web/api/element/ariacurrent/index.html @@ -0,0 +1,86 @@ +--- +title: Element.ariaCurrent +slug: Web/API/Element/ariaCurrent +tags: + - API + - Property + - Reference + - ariaCurrent + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaCurrent property of the {{domxref("Element")}} interface reflects the value of the aria-current attribute.

+ +

Syntax

+ +
var ariaCurrent = element.ariaCurrent;
+element.ariaCurrent = ariaCurrent
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
page
+
Represents the current page within a set of pages.
+
step
+
Represents the current step within a process.
+
location
+
Represents the current location within an environment or context.
+
date
+
Represents the current date within a collection of dates.
+
time
+
Represents the current time within a set of times.
+
true
+
Represents the current item within a set.
+
false
+
Does not represent the current item within a set.
+
+ +

Examples

+ +

In this example a set of links are used for site navigation. The aria-current attribute indicates the current page. The value page is incorporated into the screenreader announcement. Using ariaCurrent we can update that value.

+ +
<nav>
+  <ul>
+    <li><a id="link-home" href="/" aria-current="page">Home</a></li>
+    <li><a href="/">About</a></li>
+    <li><a href="/">Contact</a></li>
+  </ul>
+</nav>
+ +
let el = document.getElementById('link-home');
+console.log(el.ariaCurrent); // "page"
+el.ariaCurrent = "tab"
+console.log(el.ariaCurrent); // "tab"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariacurrent','ariaCurrent')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaCurrent")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariadisabled/index.html b/files/en-us/web/api/element/ariadisabled/index.html new file mode 100644 index 000000000000000..91d9cbc5928e3e2 --- /dev/null +++ b/files/en-us/web/api/element/ariadisabled/index.html @@ -0,0 +1,69 @@ +--- +title: Element.ariaDisabled +slug: Web/API/Element/ariaDisabled +tags: + - API + - Property + - Reference + - ariaDisabled + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaDisabled property of the {{domxref("Element")}} interface reflects the value of the aria-disabled attribute.

+ +

Syntax

+ +
var ariaDisabled = element.ariaDisabled;
+element.ariaDisabled = ariaDisabled
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
The element is enabled.
+
false
+
The element and all focusable descendants are disabled and its value cannot be changed by the user.
+
+ +

Examples

+ +

In this example the aria-disabled attribute on the element with an id of saveChanges is set to "true" indicating that this input is currently disabled. Using ariaDisabled we update the value to "false".

+ +
<div id="saveChanges" tabindex="0" role="button" aria-disabled="true">Save</div>
+ +
let el = document.getElementById('saveChanges');
+console.log(el.ariaDisabled); // "true"
+el.ariaDisabled = "false"
+console.log(el.ariaDisabled); // "false"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("input")}} element with type="button" or the {{htmlelement("button")}} element as these have built in semantics and do not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariadisabled','ariaDisabled')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaDisabled")}}

diff --git a/files/en-us/web/api/element/ariaexpanded/index.html b/files/en-us/web/api/element/ariaexpanded/index.html index eb9d937a8f4144f..c70998fd890e959 100644 --- a/files/en-us/web/api/element/ariaexpanded/index.html +++ b/files/en-us/web/api/element/ariaexpanded/index.html @@ -20,7 +20,16 @@

Syntax

element.ariaExpanded = ariaExpanded

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
The grouping element this element owns or controls is collapsed.
+
false
+
The grouping element this element owns or controls is expanded.
+
undefined
+
The element does not own or control a grouping element that is expandable.
+

Examples

diff --git a/files/en-us/web/api/element/ariahaspopup/index.html b/files/en-us/web/api/element/ariahaspopup/index.html index 5030b3d70173f68..bf19992d7f14f6d 100644 --- a/files/en-us/web/api/element/ariahaspopup/index.html +++ b/files/en-us/web/api/element/ariahaspopup/index.html @@ -20,7 +20,24 @@

Syntax

element.ariaHasPopup = ariaHasPopup

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
false
+
The element does not have a popup.
+
true
+
The element has a popup that is a menu.
+
menu
+
The element has a popup that is a menu.
+
listbox
+
The element has a popup that is a listbox.
+
tree
+
The element has a popup that is a tree.
+
grid
+
The element has a popup that is a grid.
+
dialog
+
The element has a popup that is a dialog.
+

Examples

diff --git a/files/en-us/web/api/element/ariahidden/index.html b/files/en-us/web/api/element/ariahidden/index.html index 66f4d41c1712545..129a4e6f72fa807 100644 --- a/files/en-us/web/api/element/ariahidden/index.html +++ b/files/en-us/web/api/element/ariahidden/index.html @@ -20,7 +20,16 @@

Syntax

element.ariaHidden = ariaHidden

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
The element is hidden from the accessibility API.
+
false
+
The element is exposed to the accessibility API as if it was rendered.
+
undefined
+
The element's hidden state is determined by the user agent based on whether it is rendered.
+

Examples

diff --git a/files/en-us/web/api/element/ariakeyshortcuts/index.html b/files/en-us/web/api/element/ariakeyshortcuts/index.html new file mode 100644 index 000000000000000..c9ff4a1e728e3fa --- /dev/null +++ b/files/en-us/web/api/element/ariakeyshortcuts/index.html @@ -0,0 +1,57 @@ +--- +title: Element.ariaKeyShortcuts +slug: Web/API/Element/ariaKeyShortcuts +tags: + - API + - Property + - Reference + - ariaKeyShortcuts + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaKeyShortcuts property of the {{domxref("Element")}} interface reflects the value of the aria-keyshortcuts attribute.

+ +

Syntax

+ +
var ariaKeyShortcuts = element.ariaKeyShortcuts;
+element.ariaKeyShortcuts = ariaKeyShortcuts
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-disabled attribute on the element with an id of skip-link is set to "Alt+Shift+A". Using ariaKeyShortcuts we update the value to "Alt+Shift+M".

+ +
<a id="skip-link" href="#content" aria-keyshortcuts="Alt+Shift+A">Skip to content</a>
+ +
let el = document.getElementById('saveChanges');
+console.log(el.ariaKeyShortcuts); // "Alt+Shift+A"
+el.ariaKeyShortcuts = "Alt+Shift+M"
+console.log(el.ariaKeyShortcuts); // "Alt+Shift+M"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariakeyshortcuts','ariaKeyShortcuts')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaKeyShortcuts")}}

diff --git a/files/en-us/web/api/element/arialevel/index.html b/files/en-us/web/api/element/arialevel/index.html new file mode 100644 index 000000000000000..d38cb35d0276561 --- /dev/null +++ b/files/en-us/web/api/element/arialevel/index.html @@ -0,0 +1,69 @@ +--- +title: Element.ariaLevel +slug: Web/API/Element/ariaLevel +tags: + - API + - Property + - Reference + - ariaLevel + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaLevel property of the {{domxref("Element")}} interface reflects the value of the aria-level attribute.

+ +

Syntax

+ +
var ariaLevel = element.ariaLevel;
+element.ariaLevel = ariaLevel
+ +

Value

+

A {{domxref("DOMString")}} containing an integer.

+ +

Examples

+ +

In this example the aria-level attribute on the element with an id of main-heading is set to "1". Using ariaLevel we update the value to "2".

+ +
<div role="heading" id="main-heading" aria-level="1">This is a main page heading</div>
+
+ +
let el = document.getElementById('main-heading');
+console.log(el.ariaLevel); // "1"
+el.ariaLevel = "2"
+console.log(el.ariaLevel); // "2"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("h1")}} or other correct heading level as these have built in semantics and do not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-arialevel','ariaLevel')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaLevel")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/arialive/index.html b/files/en-us/web/api/element/arialive/index.html index eda54a337108f6f..e3e357b94896116 100644 --- a/files/en-us/web/api/element/arialive/index.html +++ b/files/en-us/web/api/element/arialive/index.html @@ -19,7 +19,16 @@

Syntax

element.ariaLive = ariaLive

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
assertive
+
Indicates that updates to the region have the highest priority and should be presented the user immediately.
+
off
+
Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region.
+
polite
+
Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing.
+

Examples

diff --git a/files/en-us/web/api/element/ariamodal/index.html b/files/en-us/web/api/element/ariamodal/index.html new file mode 100644 index 000000000000000..4ac52957df1ac22 --- /dev/null +++ b/files/en-us/web/api/element/ariamodal/index.html @@ -0,0 +1,71 @@ +--- +title: Element.ariaModal +slug: Web/API/Element/ariaModal +tags: + - API + - Property + - Reference + - ariaModal + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaModal property of the {{domxref("Element")}} interface reflects the value of the aria-modal attribute.

+ +

Syntax

+ +
var ariaModal = element.ariaModal;
+element.ariaModal = ariaModal
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
The element is modal.
+
false
+
The element is not modal.
+
+ +

Examples

+ +

In this example the aria-modal attribute on the element with an id of address-modal is set to "true" indicating that this is a modal dialog. Using ariaModal we update the value to "false".

+ +
<div role="dialog" id="address-modal" aria-labelledby="dialog1Title"
+  aria-describedby="dialog1Desc" aria-modal="true"></div>
+ +
let el = document.getElementById('address-modal');
+console.log(el.ariaModal); // "true"
+el.ariaModal = "false"
+console.log(el.ariaModal); // "false"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariamodal','ariaModal')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaModal")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariamultiline/index.html b/files/en-us/web/api/element/ariamultiline/index.html new file mode 100644 index 000000000000000..33a60512495e7f1 --- /dev/null +++ b/files/en-us/web/api/element/ariamultiline/index.html @@ -0,0 +1,77 @@ +--- +title: Element.ariaMultiline +slug: Web/API/Element/ariaMultiline +tags: + - API + - Property + - Reference + - ariaMultiline + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaMultiline property of the {{domxref("Element")}} interface reflects the value of the aria-multiline attribute.

+ +

Syntax

+ +
var ariaMultiline = element.ariaMultiline;
+element.ariaMultiline = ariaMultiline
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
This is a multi-line text box.
+
false
+
This is a single-line text box.
+
+ +

Examples

+ +

In this example the aria-multiline attribute on the element with an id of txtBoxInput is set to "true" indicating that this box allows for multiple lines of input. Using ariaPlaceholder we update the value to "false".

+ +
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
+<div role="textbox" id="txtBoxInput" contenteditable="true" aria-multiline="true"
+  aria-labelledby="txtboxMultilineLabel" aria-required="true"></div>
+ +
let el = document.getElementById('txtBoxInput');
+console.log(el.ariaMultiline); // "true"
+el.ariaMultiline = "false"
+console.log(el.ariaMultiline); // "false"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariamultiline','ariaMultiline')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaMultiline")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariamultiselectable/index.html b/files/en-us/web/api/element/ariamultiselectable/index.html new file mode 100644 index 000000000000000..fe9c66b148ef69e --- /dev/null +++ b/files/en-us/web/api/element/ariamultiselectable/index.html @@ -0,0 +1,80 @@ +--- +title: Element.ariaMultiselectable +slug: Web/API/Element/ariaMultiselectable +tags: + - API + - Property + - Reference + - ariaMultiselectable + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaMultiselectable property of the {{domxref("Element")}} interface reflects the value of the aria-multiselectable attribute.

+ +

Syntax

+ +
var ariaMultiselectable = element.ariaMultiselectable;
+element.ariaMultiselectable = ariaMultiselectable
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
More than one item may be selected at a time.
+
false
+
Only one item may be selected.
+
+ +

Examples

+ +

+ +
<div role="listbox" tabindex="0" id="listbox1"
+  aria-multiselectable="true" aria-labelledby="listbox1label" aria-activedescendant="listbox1-1">
+  <div role="option" id="listbox1-1" class="selected" aria-selected="true">Green</div>
+  <div role="option" id="listbox1-2">Orange</div>
+  <div role="option" id="listbox1-3">Red</div<
+</div>
+ +
let el = document.getElementById('listbox1');
+console.log(el.ariaMultiselectable); // "true"
+el.ariaMultiselectable = "false"
+console.log(el.ariaMultiselectable); // "false"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("select")}} element as this has built in semantics and does not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariamultiselectable','ariaMultiselectable')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaMultiselectable")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariaorientation/index.html b/files/en-us/web/api/element/ariaorientation/index.html new file mode 100644 index 000000000000000..5da11bb8f32b781 --- /dev/null +++ b/files/en-us/web/api/element/ariaorientation/index.html @@ -0,0 +1,73 @@ +--- +title: Element.ariaOrientation +slug: Web/API/Element/ariaOrientation +tags: + - API + - Property + - Reference + - ariaOrientation + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaOrientation property of the {{domxref("Element")}} interface reflects the value of the aria-orientation attribute.

+ +

Syntax

+ +
var ariaOrientation = element.ariaOrientation;
+element.ariaOrientation = ariaOrientation
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
horizontal
+
The element is horizontal.
+
vertical
+
The element is vertical.
+
undefined
+
The element's orientation is unknown.
+
+ +

Examples

+ +

In this example the aria-orientation attribute on the element with an id of handle_zoomSlider is set to "vertical". Using ariaOrientation we update the value to "horizontal".

+ +
<a href="#" id="handle_zoomSlider"
+  role="slider"
+  aria-orientation="vertical"
+  aria-valuemin="0"
+  aria-valuemax="17"
+  aria-valuenow="14" >
+<span>11</span>
+</a>
+ +
let el = document.getElementById('handle_zoomSlider');
+console.log(el.ariaOrientation); // "vertical"
+el.ariaOrientation = "horizontal"
+console.log(el.ariaOrientation); // "horizontal"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariaorientation','ariaOrientation')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaOrientation")}}

diff --git a/files/en-us/web/api/element/ariaplaceholder/index.html b/files/en-us/web/api/element/ariaplaceholder/index.html new file mode 100644 index 000000000000000..f2a3f95ebf10b89 --- /dev/null +++ b/files/en-us/web/api/element/ariaplaceholder/index.html @@ -0,0 +1,69 @@ +--- +title: Element.ariaPlaceholder +slug: Web/API/Element/ariaPlaceholder +tags: + - API + - Property + - Reference + - ariaPlaceholder + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaPlaceholder property of the {{domxref("Element")}} interface reflects the value of the aria-placeholder attribute.

+ +

Syntax

+ +
var ariaPlaceholder = element.ariaPlaceholder;
+element.ariaPlaceholder = ariaPlaceholder
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

+ +
<div id="txtboxLabel">Enter your five-digit zipcode</div>
+<div role="textbox" id="txtBoxInput" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxLabel"></div>
+ +
let el = document.getElementById('txtBoxInput');
+console.log(el.ariaPlaceholder); // "5-digit zipcode"
+el.ariaPlaceholder = "12345"
+console.log(el.ariaPlaceholder); // "12345"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariaplaceholder','ariaPlaceholder')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaPlaceholder")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariaposinset/index.html b/files/en-us/web/api/element/ariaposinset/index.html new file mode 100644 index 000000000000000..4ae77933322fdb2 --- /dev/null +++ b/files/en-us/web/api/element/ariaposinset/index.html @@ -0,0 +1,59 @@ +--- +title: Element.ariaPosInSet +slug: Web/API/Element/ariaPosInSet +tags: + - API + - Property + - Reference + - ariaPosInSet + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaPosInSet property of the {{domxref("Element")}} interface reflects the value of the aria-posinset attribute.

+ +

Syntax

+ +
var ariaPosInSet = element.ariaPosInSet;
+element.ariaPosInSet = ariaPosInSet
+ +

Value

+

A {{domxref("DOMString")}} containing an integer.

+ +

Examples

+ +

In this example the aria-posinset attribute on the element with an id of article2 is set to "2". Using ariaPosInSet we update the value to "3".

+ +
<article id="article1" aria-posinset="1"> ... </article>
+<article id="article1" aria-posinset="2"> ... </article>
+
+ +
let el = document.getElementById('article2');
+console.log(el.ariaPosInSet); // "2"
+el.ariaPosInSet = "3"
+console.log(el.ariaPosInSet); // "3"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariaposinset','ariaPosInSet')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaPosInSet")}}

diff --git a/files/en-us/web/api/element/ariapressed/index.html b/files/en-us/web/api/element/ariapressed/index.html new file mode 100644 index 000000000000000..20df831424e23d8 --- /dev/null +++ b/files/en-us/web/api/element/ariapressed/index.html @@ -0,0 +1,79 @@ +--- +title: Element.ariaPressed +slug: Web/API/Element/ariaPressed +tags: + - API + - Property + - Reference + - ariaPressed + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaPressed property of the {{domxref("Element")}} interface reflects the value of the aria-pressed attribute.

+ +

Syntax

+ +
var ariaPressed = element.ariaPressed;
+element.ariaPressed = ariaPressed
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
The element is pressed.
+
false
+
The element supports being pressed but is not currently pressed.
+
mixed
+
Indicates a mixed mode value for a tri-state toggle button.
+
undefined
+
The element does not support being pressed.
+
+ +

Examples

+ +

In this example the aria-pressed attribute on the element with an id of saveChanges is set to "false" indicating that this input is currently not pressed. Using ariaPressed we update the value to "true".

+ +
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>
+ +
let el = document.getElementById('saveChanges');
+console.log(el.ariaPressed); // "false"
+el.ariaPressed = "true"
+console.log(el.ariaPressed); // "true"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("input")}} element with type="button" or the {{htmlelement("button")}} element as these have built in semantics and do not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariapressed','ariaPressed')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaPressed")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariareadonly/index.html b/files/en-us/web/api/element/ariareadonly/index.html new file mode 100644 index 000000000000000..2d05ac01b61a3dc --- /dev/null +++ b/files/en-us/web/api/element/ariareadonly/index.html @@ -0,0 +1,77 @@ +--- +title: Element.ariaReadOnly +slug: Web/API/Element/ariaReadOnly +tags: + - API + - Property + - Reference + - ariaReadOnly + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaReadOnly property of the {{domxref("Element")}} interface reflects the value of the aria-readonly attribute.

+ +

Syntax

+ +
var ariaReadOnly = element.ariaReadOnly;
+element.ariaReadOnly = ariaReadOnly
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
The user cannot change the value of the element.
+
false
+
The user can set the value of the element.
+
+ +

Examples

+ +

In this example the aria-readonly attribute on the element with an id of txtBoxInput is set to "true" indicating that this input is currently read only. Using ariaReadOnly we update the value to "false".

+ +
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
+<div role="textbox" id="txtBoxInput" contenteditable="true" aria-multiline="true"
+  aria-labelledby="txtboxMultilineLabel" aria-readonly="true"></div>
+ +
let el = document.getElementById('txtBoxInput');
+console.log(el.ariaReadOnly); // "true"
+el.ariaReadOnly = "false"
+console.log(el.ariaReadOnly); // "false"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariareadonly','ariaReadOnly')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaReadOnly")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariarelevant/index.html b/files/en-us/web/api/element/ariarelevant/index.html new file mode 100644 index 000000000000000..355928b0316281e --- /dev/null +++ b/files/en-us/web/api/element/ariarelevant/index.html @@ -0,0 +1,68 @@ +--- +title: Element.ariaRelevant +slug: Web/API/Element/ariaRelevant +tags: + - API + - Property + - Reference + - ariaRelevant + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaRelevant property of the {{domxref("Element")}} interface reflects the value of the aria-relevant attribute. This is used to describe what changes in an aria-live region and relevant and should be announced.

+ +

Syntax

+ +
var ariaRelevant = element.ariaRelevant;
+element.ariaRelevant = ariaRelevant
+ +

Value

+

A {{domxref("DOMString")}} containing one or more of the following values, space separated:

+ +
+
additions
+
Additions of Element Nodes within the live region should be considered relevant.
+
removals
+
Deletion of Nodes from the live region should be considered relevant.
+
text
+
Changes to the textual content of existing nodes should be considered relevant.
+
all
+
Equivalent to additions removals text.
+
+ +

Examples

+ +

In this example the aria-relevant attribute on the element with an id of text is set to "all". Using ariaRelevant we update the value to "text".

+ +
<div id="clock" role="timer" aria-live="polite" aria-atomic="true" aria-relevant="all"></div>
+ +
let el = document.getElementById('clock');
+console.log(el.ariaRelevant); // all
+el.ariaRelevant = "text"
+console.log(el.ariaRelevant); // text
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariarelevant','ariaRelevant')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaRelevant")}}

diff --git a/files/en-us/web/api/element/ariarequired/index.html b/files/en-us/web/api/element/ariarequired/index.html new file mode 100644 index 000000000000000..d03d125217b7707 --- /dev/null +++ b/files/en-us/web/api/element/ariarequired/index.html @@ -0,0 +1,77 @@ +--- +title: Element.ariaRequired +slug: Web/API/Element/ariaRequired +tags: + - API + - Property + - Reference + - ariaRequired + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaRequired property of the {{domxref("Element")}} interface reflects the value of the aria-required attribute.

+ +

Syntax

+ +
var ariaRequired = element.ariaRequired;
+element.ariaRequired = ariaRequired
+ +

Value

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
Users need to provide input on an element before a form is submitted.
+
false
+
User input is not necessary to submit the form.
+
+ +

Examples

+ +

In this example the aria-required attribute on the element with an id of txtBoxInput is set to "true" indicating that this input must be completed. Using ariaRequired we update the value to "false".

+ +
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
+<div role="textbox" id="txtBoxInput" contenteditable="true" aria-multiline="true"
+  aria-labelledby="txtboxMultilineLabel" aria-required="true"></div>
+ +
let el = document.getElementById('txtBoxInput');
+console.log(el.ariaRequired); // "true"
+el.ariaRequired = "false"
+console.log(el.ariaRequired); // "false"
+ +
+

Note

+

Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariarequired','ariaRequired')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaRequired")}}

+ +

See also

+ + diff --git a/files/en-us/web/api/element/ariaroledescription/index.html b/files/en-us/web/api/element/ariaroledescription/index.html new file mode 100644 index 000000000000000..81a0e45e301eb31 --- /dev/null +++ b/files/en-us/web/api/element/ariaroledescription/index.html @@ -0,0 +1,62 @@ +--- +title: Element.ariaRoleDescription +slug: Web/API/Element/ariaRoleDescription +tags: + - API + - Property + - Reference + - ariaRoleDescription + - AriaAttributes + - AriaMixin + - Element +--- +
{{DefaultAPISidebar("DOM")}}
+ +

The ariaRoleDescription property of the {{domxref("Element")}} interface reflects the value of the aria-roledescription attribute.

+ +

Syntax

+ +
var ariaRoleDescription = element.ariaRoleDescription;
+element.ariaRoleDescription = ariaRoleDescription
+ +

Value

+

A {{domxref("DOMString")}}.

+ +

Examples

+ +

In this example the aria-roledescription attribute on the element with an id of myApplication has been set. Using ariaRoleDescription we can update the value.

+ +
<div id="myApplication" role="application" aria-roledescription="a description of this widget">...</div>
+ +
let el = document.getElementById('myApplication');
+console.log(el.ariaRoleDescription); // "a description of this widget"
+el.ariaRoleDescription = "an updated description of this widget"
+console.log(el.ariaRoleDescription); // "an updated description of this widget"
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ARIA 1.2','#dom-ariamixin-ariaorientation','ariaRoleDescription')}}{{Spec2('ARIA 1.2')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.ariaRoleDescription")}}

+ + + diff --git a/files/en-us/web/api/element/ariarowcount/index.html b/files/en-us/web/api/element/ariarowcount/index.html index 5ced783d0ba5ce7..cc069baa805db58 100644 --- a/files/en-us/web/api/element/ariarowcount/index.html +++ b/files/en-us/web/api/element/ariarowcount/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaRowCount = ariaRowCount

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains an integer.

Examples

diff --git a/files/en-us/web/api/element/ariarowindex/index.html b/files/en-us/web/api/element/ariarowindex/index.html index 58112cac244aa36..6ffbaa5e621bd88 100644 --- a/files/en-us/web/api/element/ariarowindex/index.html +++ b/files/en-us/web/api/element/ariarowindex/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaRowIndex = ariaRowIndex

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains an integer.

Examples

diff --git a/files/en-us/web/api/element/ariarowspan/index.html b/files/en-us/web/api/element/ariarowspan/index.html index 0026223c1b5e03c..2a17426a4000453 100644 --- a/files/en-us/web/api/element/ariarowspan/index.html +++ b/files/en-us/web/api/element/ariarowspan/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaRowSpan = ariaRowSpan

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains an integer.

Examples

diff --git a/files/en-us/web/api/element/ariaselected/index.html b/files/en-us/web/api/element/ariaselected/index.html index 99963f0f3a16bd5..d7f5156b4a21cf9 100644 --- a/files/en-us/web/api/element/ariaselected/index.html +++ b/files/en-us/web/api/element/ariaselected/index.html @@ -20,7 +20,16 @@

Syntax

element.ariaSelected = ariaSelected

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
true
+
The item is selected.
+
false
+
The item is not selected.
+
undefined
+
The item is not selectable.
+

Examples

diff --git a/files/en-us/web/api/element/ariasetsize/index.html b/files/en-us/web/api/element/ariasetsize/index.html index 81a9cdc5178f39f..f45ecad548c9aa2 100644 --- a/files/en-us/web/api/element/ariasetsize/index.html +++ b/files/en-us/web/api/element/ariasetsize/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaSetSize = ariaSetSize

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} containing an integer.

Examples

diff --git a/files/en-us/web/api/element/ariasort/index.html b/files/en-us/web/api/element/ariasort/index.html index 9beae81360c5c71..493e6e38e699f5c 100644 --- a/files/en-us/web/api/element/ariasort/index.html +++ b/files/en-us/web/api/element/ariasort/index.html @@ -20,7 +20,18 @@

Syntax

element.ariaSort = ariaSort

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} with one of the following values:

+ +
+
ascending
+
Items are sorted in ascending order by this column.
+
descending
+
Items are sorted in descending order by this column.
+
none
+
There is no defined sort applied to the column.
+
other
+
A sort algorithm other than ascending or descending has been applied.
+

Examples

diff --git a/files/en-us/web/api/element/ariavaluemax/index.html b/files/en-us/web/api/element/ariavaluemax/index.html index 502c874a2dd29c4..4bca29fd9b81ce7 100644 --- a/files/en-us/web/api/element/ariavaluemax/index.html +++ b/files/en-us/web/api/element/ariavaluemax/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaValueMax = ariaValueMax

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains a number.

Examples

diff --git a/files/en-us/web/api/element/ariavaluemin/index.html b/files/en-us/web/api/element/ariavaluemin/index.html index 852fefec3ef2926..13fff544ae82874 100644 --- a/files/en-us/web/api/element/ariavaluemin/index.html +++ b/files/en-us/web/api/element/ariavaluemin/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaValueMin = ariaValueMin

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains a number.

Examples

diff --git a/files/en-us/web/api/element/ariavaluenow/index.html b/files/en-us/web/api/element/ariavaluenow/index.html index 9d4882082c12dfe..e8654fb1309ed23 100644 --- a/files/en-us/web/api/element/ariavaluenow/index.html +++ b/files/en-us/web/api/element/ariavaluenow/index.html @@ -20,7 +20,7 @@

Syntax

element.ariaValueNow = ariaValueNow

Value

-

A {{domxref("DOMString")}}.

+

A {{domxref("DOMString")}} which contains a number.

Examples

From 28dc3556cfb3bc8fcefe76c483f996512cfd6e76 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Tue, 9 Feb 2021 13:29:22 +0000 Subject: [PATCH 06/15] Update files/en-us/web/api/element/ariaatomic/index.html Co-authored-by: Joe Medley --- files/en-us/web/api/element/ariaatomic/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/element/ariaatomic/index.html b/files/en-us/web/api/element/ariaatomic/index.html index 437e0ffccf49fcd..e071d22128b77cb 100644 --- a/files/en-us/web/api/element/ariaatomic/index.html +++ b/files/en-us/web/api/element/ariaatomic/index.html @@ -30,7 +30,7 @@

Value

Examples

-

In this example the aria-atomic attribute on the element with an id of clock is set to "true". Using ariaAtomic we update the value to "false".

+

In this example the aria-atomic attribute on the element with an ID of "clock" is set to "true". Using ariaAtomic we update the value to "false".

<div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
From d394aeb3c2c90ca979882518b828283ca4e2b748 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Tue, 9 Feb 2021 13:29:44 +0000 Subject: [PATCH 07/15] Update files/en-us/web/api/element/ariaautocomplete/index.html Co-authored-by: Joe Medley --- files/en-us/web/api/element/ariaautocomplete/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/element/ariaautocomplete/index.html b/files/en-us/web/api/element/ariaautocomplete/index.html index 20d1700833b73fa..52fcfe94c0d6d84 100644 --- a/files/en-us/web/api/element/ariaautocomplete/index.html +++ b/files/en-us/web/api/element/ariaautocomplete/index.html @@ -29,7 +29,7 @@

Value

both
When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.
none
-
When a user is providing input, an automatic suggestion that attempts to predict how the user intends to complete the input is not displayed.
+
When a user is providing input, there is no display of an automatic suggestion that attempts to predict how the user intends to complete the input.

Examples

From ff9f5452274c79d30f45a3744f6421d31574e71f Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Tue, 9 Feb 2021 13:29:56 +0000 Subject: [PATCH 08/15] Update files/en-us/web/api/element/ariaautocomplete/index.html Co-authored-by: Joe Medley --- files/en-us/web/api/element/ariaautocomplete/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/element/ariaautocomplete/index.html b/files/en-us/web/api/element/ariaautocomplete/index.html index 52fcfe94c0d6d84..7a4c83231434db6 100644 --- a/files/en-us/web/api/element/ariaautocomplete/index.html +++ b/files/en-us/web/api/element/ariaautocomplete/index.html @@ -34,7 +34,7 @@

Value

Examples

-

In this example the aria-autocomplete attribute on the element with an id of animal is set to "list". Using ariaAutoComplete we update the value to "inline".

+

In this example the aria-autocomplete attribute on the element with an ID of animal is set to "list". Using ariaAutoComplete we update the value to "inline".

<div class="animals-combobox">
   <label for="animal">Animal</label>

From c97b9c55ee3dd5907e5a420d3b2c641f4791bc71 Mon Sep 17 00:00:00 2001
From: Rachel Andrew 
Date: Tue, 9 Feb 2021 13:30:09 +0000
Subject: [PATCH 09/15] Update
 files/en-us/web/api/element/ariaatomic/index.html

Co-authored-by: Joe Medley 
---
 files/en-us/web/api/element/ariaatomic/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/element/ariaatomic/index.html b/files/en-us/web/api/element/ariaatomic/index.html
index e071d22128b77cb..956135fe9b3ccd7 100644
--- a/files/en-us/web/api/element/ariaatomic/index.html
+++ b/files/en-us/web/api/element/ariaatomic/index.html
@@ -22,7 +22,7 @@ 
Syntax

 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 

-  
false

+  
"false"

   
Assistive technologies will present only the changed node or nodes.

   
true

   
Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.


From 0f29bb036fcb5c21c187cf8ef90ce7cb701e4fbe Mon Sep 17 00:00:00 2001
From: Rachel Andrew 
Date: Tue, 9 Feb 2021 13:31:05 +0000
Subject: [PATCH 10/15] Update
 files/en-us/web/api/element/ariaexpanded/index.html

Co-authored-by: Joe Medley 
---
 files/en-us/web/api/element/ariaexpanded/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/element/ariaexpanded/index.html b/files/en-us/web/api/element/ariaexpanded/index.html
index c70998fd890e959..da5e6391a4d3f22 100644
--- a/files/en-us/web/api/element/ariaexpanded/index.html
+++ b/files/en-us/web/api/element/ariaexpanded/index.html
@@ -26,7 +26,7 @@ 
Value

   
true

   
The grouping element this element owns or controls is collapsed.

   
false

-  
	The grouping element this element owns or controls is expanded.

+  
The grouping element this element owns or controls is expanded.

   
undefined

   
The element does not own or control a grouping element that is expandable.

 


From 8c50fc96adc02cc12997024bc60d8adb40af839c Mon Sep 17 00:00:00 2001
From: Rachel Andrew 
Date: Tue, 9 Feb 2021 13:33:50 +0000
Subject: [PATCH 11/15] Update
 files/en-us/web/api/element/ariahidden/index.html

Co-authored-by: Joe Medley 
---
 files/en-us/web/api/element/ariahidden/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/element/ariahidden/index.html b/files/en-us/web/api/element/ariahidden/index.html
index 129a4e6f72fa807..e8daec342ccc793 100644
--- a/files/en-us/web/api/element/ariahidden/index.html
+++ b/files/en-us/web/api/element/ariahidden/index.html
@@ -26,7 +26,7 @@ 
Value

   
true

   
The element is hidden from the accessibility API.

   
false

-  
The element is exposed to the accessibility API as if it was rendered.

+  
The element is exposed to the accessibility API as if it were rendered.

   
undefined

   
The element's hidden state is determined by the user agent based on whether it is rendered.

 

From 9bd51eda171e0793475e2eeac931b90a238eeb91 Mon Sep 17 00:00:00 2001
From: Rachel Andrew 
Date: Tue, 9 Feb 2021 15:49:28 +0000
Subject: [PATCH 12/15] fixes post review

---
 .../api/element/ariaautocomplete/index.html   | 10 +--
 .../en-us/web/api/element/ariabusy/index.html |  8 +-
 .../web/api/element/ariachecked/index.html    | 12 +--
 .../web/api/element/ariacolcount/index.html   |  6 +-
 .../web/api/element/ariacolindex/index.html   |  4 +-
 .../api/element/ariacolindextext/index.html   |  4 +-
 .../web/api/element/ariacolspan/index.html    |  4 +-
 .../web/api/element/ariacurrent/index.html    | 18 ++---
 .../api/element/ariadescription/index.html    |  4 +-
 .../web/api/element/ariadisabled/index.html   |  8 +-
 .../web/api/element/ariaexpanded/index.html   | 10 +--
 .../web/api/element/ariahaspopup/index.html   | 18 ++---
 .../web/api/element/ariahidden/index.html     |  6 +-
 .../api/element/ariakeyshortcuts/index.html   |  4 +-
 .../web/api/element/arialabel/index.html      |  4 +-
 .../web/api/element/arialevel/index.html      | 14 ++--
 .../en-us/web/api/element/arialive/index.html | 10 +--
 .../web/api/element/ariamodal/index.html      |  8 +-
 .../web/api/element/ariamultiline/index.html  | 18 ++---
 .../element/ariamultiselectable/index.html    | 38 ++++-----
 .../api/element/ariaorientation/index.html    | 10 +--
 .../api/element/ariaplaceholder/index.html    | 14 ++--
 .../web/api/element/ariaposinset/index.html   |  4 +-
 .../web/api/element/ariapressed/index.html    | 22 ++---
 .../web/api/element/ariareadonly/index.html   | 18 ++---
 .../web/api/element/ariarelevant/index.html   | 12 +--
 .../web/api/element/ariarequired/index.html   | 18 ++---
 .../element/ariaroledescription/index.html    |  4 +-
 .../web/api/element/ariarowcount/index.html   |  4 +-
 .../web/api/element/ariarowindex/index.html   |  4 +-
 .../api/element/ariarowindextext/index.html   |  4 +-
 .../web/api/element/ariarowspan/index.html    |  4 +-
 .../web/api/element/ariaselected/index.html   | 12 +--
 .../web/api/element/ariasetsize/index.html    |  4 +-
 .../en-us/web/api/element/ariasort/index.html | 12 +--
 .../web/api/element/ariavaluemax/index.html   |  4 +-
 .../web/api/element/ariavaluemin/index.html   |  4 +-
 .../web/api/element/ariavaluenow/index.html   |  4 +-
 .../web/api/element/ariavaluetext/index.html  |  4 +-
 files/en-us/web/api/element/index.html        | 80 ++++++++++---------
 40 files changed, 226 insertions(+), 224 deletions(-)

diff --git a/files/en-us/web/api/element/ariaautocomplete/index.html b/files/en-us/web/api/element/ariaautocomplete/index.html
index 7a4c83231434db6..af6edc6422aa9b8 100644
--- a/files/en-us/web/api/element/ariaautocomplete/index.html
+++ b/files/en-us/web/api/element/ariaautocomplete/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaAutoComplete property of the {{domxref("Element")}} interface reflects the value of the aria-autocomplete attribute.

+
The ariaAutoComplete property of the {{domxref("Element")}} interface reflects the value of the aria-autocomplete attribute, which indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.

 
 
Syntax

 
@@ -22,13 +22,13 @@ 
Syntax

 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 

-  
inline

+  
"inline"

   
When a user is providing input, text suggesting one way to complete the provided input may be dynamically inserted after the caret.

-  
list

+  
"list"

   
When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed.

-  
both

+  
"both"

   
When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.

-  
none

+  
"none"

   
When a user is providing input, there is no display of an automatic suggestion that attempts to predict how the user intends to complete the input.

 

 
diff --git a/files/en-us/web/api/element/ariabusy/index.html b/files/en-us/web/api/element/ariabusy/index.html
index 06d6d058005388d..baccc775458dd43 100644
--- a/files/en-us/web/api/element/ariabusy/index.html
+++ b/files/en-us/web/api/element/ariabusy/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaBusy property of the {{domxref("Element")}} interface reflects the value of the aria-busy attribute.

+
The ariaBusy property of the {{domxref("Element")}} interface reflects the value of the aria-busy attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.

 
 
Syntax

 
@@ -23,15 +23,15 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
There are no expected updates for the element.

-  
false

+  
"false"

   
The element is being updated.

 

 
 
Examples

 
-
In this example the aria-busy attribute on the element with an id of clock is set to "false". Using ariaBusy we update the value to "true".

+
In this example the aria-busy attribute on the element with an ID of clock is set to "false". Using ariaBusy we update the value to "true".

 
 
<div id="clock" role="timer" aria-live="polite" aria-atomic="true" aria-busy="false"></div>

 
diff --git a/files/en-us/web/api/element/ariachecked/index.html b/files/en-us/web/api/element/ariachecked/index.html
index 3d9812b28bea11b..39ff05927fd0238 100644
--- a/files/en-us/web/api/element/ariachecked/index.html
+++ b/files/en-us/web/api/element/ariachecked/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaChecked property of the {{domxref("Element")}} interface reflects the value of the aria-checked attribute.

+
The ariaChecked property of the {{domxref("Element")}} interface reflects the value of the aria-checked attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.

 
 
Syntax

 
@@ -23,19 +23,19 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
The element is checked.

-  
mixed

+  
"mixed"

   
Indicates a mixed mode value for a tri-state checkbox or menuitemcheckbox.

-  
false

+  
"false"

   
The element supports being checked but is not currently checked.

-  
undefined

+  
"undefined"

   
The element does not support being checked.

 

 
 
Examples

 
-
In this example the aria-checked attribute on the element with an id of checkBoxInput is set to "false" indicating that this input is currently unchecked. Using ariaChecked we update the value to "true".

+
In this example the aria-checked attribute on the element with an ID of checkBoxInput is set to "false" indicating that this input is currently unchecked. Using ariaChecked we update the value to "true".

 
 
<span role="checkbox" id="checkBoxInput" aria-checked="false" tabindex="0" aria-labelledby="chk1-label">
 </span> <label id="chk1-label">Remember my preferences</label>

diff --git a/files/en-us/web/api/element/ariacolcount/index.html b/files/en-us/web/api/element/ariacolcount/index.html
index b936ea835f5e8d1..501472961042340 100644
--- a/files/en-us/web/api/element/ariacolcount/index.html
+++ b/files/en-us/web/api/element/ariacolcount/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaColCount property of the {{domxref("Element")}} interface reflects the value of the aria-rowcount attribute.

+
The ariaColCount property of the {{domxref("Element")}} interface reflects the value of the aria-colcount attribute, which defines the number of columns in a table, grid, or treegrid.

 
 
Syntax

 
@@ -20,11 +20,11 @@ 
Syntax

 element.ariaColCount = ariaColCount

Value

-

A {{domxref("DOMString")}} which contains an integer.

+

A {{domxref("DOMString")}}.

Examples

-

In this example the aria-colcount attribute on the element with an id of semantic-table is set to "2". Using ariaColCount we update the value to "3".

+

In this example the aria-colcount attribute on the element with an ID of semantic-table is set to "2". Using ariaColCount we update the value to "3".

<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100" aria-colcount="2">
   <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
diff --git a/files/en-us/web/api/element/ariacolindex/index.html b/files/en-us/web/api/element/ariacolindex/index.html
index ec19155a6a4a5ba..bd86edb359d5e25 100644
--- a/files/en-us/web/api/element/ariacolindex/index.html
+++ b/files/en-us/web/api/element/ariacolindex/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaColIndex property of the {{domxref("Element")}} interface reflects the value of the aria-colindex attribute.

+
The ariaColIndex property of the {{domxref("Element")}} interface reflects the value of the aria-colindex attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-colindex attribute on the element with an id of role-heading is set to "1". Using ariaColIndex we update the value to "2".

+
In this example the aria-colindex attribute on the element with an ID of role-heading is set to "1". Using ariaColIndex we update the value to "2".

 
 
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
   <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
diff --git a/files/en-us/web/api/element/ariacolindextext/index.html b/files/en-us/web/api/element/ariacolindextext/index.html
index 498b87f4ce5e467..824d29dd5753fae 100644
--- a/files/en-us/web/api/element/ariacolindextext/index.html
+++ b/files/en-us/web/api/element/ariacolindextext/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaColIndexText property of the {{domxref("Element")}} interface reflects the value of the aria-colindextext attribute.

+
The ariaColIndexText property of the {{domxref("Element")}} interface reflects the value of the aria-colindextext attribute, which defines a human readable text alternative of aria-colindex.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-colindex attribute on the element with an id of role-heading is set to "Aria Role column". Using ariaColIndexText we update the value to the string "New column name".

+
In this example the aria-colindex attribute on the element with an ID of role-heading is set to "Aria Role column". Using ariaColIndexText we update the value to the string "New column name".

 
 
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
   <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
diff --git a/files/en-us/web/api/element/ariacolspan/index.html b/files/en-us/web/api/element/ariacolspan/index.html
index 7221779ea40ef09..26f8b9ccd2b5342 100644
--- a/files/en-us/web/api/element/ariacolspan/index.html
+++ b/files/en-us/web/api/element/ariacolspan/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaColSpan property of the {{domxref("Element")}} interface reflects the value of the aria-colspan attribute.

+
The ariaColSpan property of the {{domxref("Element")}} interface reflects the value of the aria-colspan attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-colspan attribute on the element with an id of spanning-heading is set to "2". Using ariaColSpan we update the value to "3".

+
In this example the aria-colspan attribute on the element with an ID of spanning-heading is set to "2". Using ariaColSpan we update the value to "3".

 
 
<table>
   <tr>
diff --git a/files/en-us/web/api/element/ariacurrent/index.html b/files/en-us/web/api/element/ariacurrent/index.html
index e00503f58c9050d..f397071e0bbb50f 100644
--- a/files/en-us/web/api/element/ariacurrent/index.html
+++ b/files/en-us/web/api/element/ariacurrent/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaCurrent property of the {{domxref("Element")}} interface reflects the value of the aria-current attribute.

+
The ariaCurrent property of the {{domxref("Element")}} interface reflects the value of the aria-current attribute, which indicates the element that represents the current item within a container or set of related elements.

 
 
Syntax

 
@@ -23,19 +23,19 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
page

+  
"page"

   
Represents the current page within a set of pages.

-  
step

+  
"step"

   
Represents the current step within a process.

-  
location

-  
Represents the current location within an environment or context.

-  
date

+  
"location"

+  
Represents the current location, for example the current page in a breadcrumbs hierarchy.

+  
"date"

   
Represents the current date within a collection of dates.

-  
time

+  
"time"

   
Represents the current time within a set of times.

-  
true

+  
"true"

   
Represents the current item within a set.

-  
false

+  
"false"

   
Does not represent the current item within a set.

 

 
diff --git a/files/en-us/web/api/element/ariadescription/index.html b/files/en-us/web/api/element/ariadescription/index.html
index 69051ed70551e7a..5d9f9767cf69c2f 100644
--- a/files/en-us/web/api/element/ariadescription/index.html
+++ b/files/en-us/web/api/element/ariadescription/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaDescription property of the {{domxref("Element")}} interface reflects the value of the aria-description attribute.

+
The ariaDescription property of the {{domxref("Element")}} interface reflects the value of the aria-description attribute, which defines a string value that describes or annotates the current element.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-description attribute on the element with an id of close-button is set to the string "A longer description of the function of this element". Using ariaDescription we can update the value.

+
In this example the aria-description attribute on the element with an ID of close-button is set to the string "A longer description of the function of this element". Using ariaDescription we can update the value.

 
 
<button aria-label="Close" aria-description="A longer description of the function of this element" id="close-button">X</button>

 
diff --git a/files/en-us/web/api/element/ariadisabled/index.html b/files/en-us/web/api/element/ariadisabled/index.html
index 91d9cbc5928e3e2..31f03efebabc82b 100644
--- a/files/en-us/web/api/element/ariadisabled/index.html
+++ b/files/en-us/web/api/element/ariadisabled/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaDisabled property of the {{domxref("Element")}} interface reflects the value of the aria-disabled attribute.

+
The ariaDisabled property of the {{domxref("Element")}} interface reflects the value of the aria-disabled attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

 
 
Syntax

 
@@ -23,15 +23,15 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
The element is enabled.

-  
false

+  
"false"

   
The element and all focusable descendants are disabled and its value cannot be changed by the user.

 

 
 
Examples

 
-
In this example the aria-disabled attribute on the element with an id of saveChanges is set to "true" indicating that this input is currently disabled. Using ariaDisabled we update the value to "false".

+
In this example the aria-disabled attribute on the element with an ID of saveChanges is set to "true" indicating that this input is currently disabled. Using ariaDisabled we update the value to "false".

 
 
<div id="saveChanges" tabindex="0" role="button" aria-disabled="true">Save</div>

 
diff --git a/files/en-us/web/api/element/ariaexpanded/index.html b/files/en-us/web/api/element/ariaexpanded/index.html
index da5e6391a4d3f22..8de9fc4dc1a5268 100644
--- a/files/en-us/web/api/element/ariaexpanded/index.html
+++ b/files/en-us/web/api/element/ariaexpanded/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaExpanded property of the {{domxref("Element")}} interface reflects the value of the aria-expanded attribute.

+
The ariaExpanded property of the {{domxref("Element")}} interface reflects the value of the aria-expanded attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

 
 
Syntax

 
@@ -23,17 +23,17 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
The grouping element this element owns or controls is collapsed.

-  
false

+  
"false"

   
The grouping element this element owns or controls is expanded.

-  
undefined

+  
"undefined"

   
The element does not own or control a grouping element that is expandable.

 

 
 
Examples

 
-
In this example the aria-expanded attribute on the element with an id of animal is set to "false". Using ariaExpanded we update the value to "true".

+
In this example the aria-expanded attribute on the element with an ID of animal is set to "false". Using ariaExpanded we update the value to "true".

 
 
<div class="animals-combobox">
   <label for="animal">Animal</label>
diff --git a/files/en-us/web/api/element/ariahaspopup/index.html b/files/en-us/web/api/element/ariahaspopup/index.html
index bf19992d7f14f6d..ee665799e8533cc 100644
--- a/files/en-us/web/api/element/ariahaspopup/index.html
+++ b/files/en-us/web/api/element/ariahaspopup/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaHasPopup property of the {{domxref("Element")}} interface reflects the value of the aria-haspopup attribute.

+
The ariaHasPopup property of the {{domxref("Element")}} interface reflects the value of the aria-haspopup attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

 
 
Syntax

 
@@ -23,25 +23,25 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
false

+  
"false"

   
The element does not have a popup.

-  
true

+  
"true"

   
The element has a popup that is a menu.

-  
menu

+  
"menu"

   
The element has a popup that is a menu.

-  
listbox

+  
"listbox"

   
The element has a popup that is a listbox.

-  
tree

+  
"tree"

   
The element has a popup that is a tree.

-  
grid

+  
"grid"

   
The element has a popup that is a grid.

-  
dialog

+  
"dialog"

   
The element has a popup that is a dialog.

 

 
 
Examples

 
-
In this example the aria-haspopup attribute on the element with an id of animal is set to "true". Using ariaHasPopup we update the value to "false".

+
In this example the aria-haspopup attribute on the element with an ID of animal is set to "true". Using ariaHasPopup we update the value to "false".

 
 
<div class="animals-combobox">
   <label for="animal">Animal</label>
diff --git a/files/en-us/web/api/element/ariahidden/index.html b/files/en-us/web/api/element/ariahidden/index.html
index e8daec342ccc793..9df7168d33a2504 100644
--- a/files/en-us/web/api/element/ariahidden/index.html
+++ b/files/en-us/web/api/element/ariahidden/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaHidden property of the {{domxref("Element")}} interface reflects the value of the aria-hidden attribute.

+
The ariaHidden property of the {{domxref("Element")}} interface reflects the value of the aria-hidden attribute, which indicates whether the element is exposed to an accessibility API.

 
 
Syntax

 
@@ -23,7 +23,7 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
The element is hidden from the accessibility API.

   
false

   
The element is exposed to the accessibility API as if it were rendered.

@@ -33,7 +33,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-hidden attribute on the element with an id of hidden is set to "true". Using ariaHidden we update the value to "false".

+
In this example the aria-hidden attribute on the element with an ID of hidden is set to "true". Using ariaHidden we update the value to "false".

 
 
<div id="hidden" aria-hidden="true">Some things are better left unsaid.</div>

 
diff --git a/files/en-us/web/api/element/ariakeyshortcuts/index.html b/files/en-us/web/api/element/ariakeyshortcuts/index.html
index c9ff4a1e728e3fa..61894af9f54f257 100644
--- a/files/en-us/web/api/element/ariakeyshortcuts/index.html
+++ b/files/en-us/web/api/element/ariakeyshortcuts/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaKeyShortcuts property of the {{domxref("Element")}} interface reflects the value of the aria-keyshortcuts attribute.

+
The ariaKeyShortcuts property of the {{domxref("Element")}} interface reflects the value of the aria-keyshortcuts attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-disabled attribute on the element with an id of skip-link is set to "Alt+Shift+A". Using ariaKeyShortcuts we update the value to "Alt+Shift+M".

+
In this example the aria-disabled attribute on the element with an ID of skip-link is set to "Alt+Shift+A". Using ariaKeyShortcuts we update the value to "Alt+Shift+M".

 
 
<a id="skip-link" href="#content" aria-keyshortcuts="Alt+Shift+A">Skip to content</a>

 
diff --git a/files/en-us/web/api/element/arialabel/index.html b/files/en-us/web/api/element/arialabel/index.html
index 0df7f46d827a840..650113ef0630231 100644
--- a/files/en-us/web/api/element/arialabel/index.html
+++ b/files/en-us/web/api/element/arialabel/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaLabel property of the {{domxref("Element")}} interface reflects the value of the aria-label attribute.

+
The ariaLabel property of the {{domxref("Element")}} interface reflects the value of the aria-label attribute, which defines a string value that labels the current element.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-label attribute on the element with an id of close-button is set to "Close". Using ariaLabel we update the value to "Close dialog".

+
In this example the aria-label attribute on the element with an ID of close-button is set to "Close". Using ariaLabel we update the value to "Close dialog".

 
 
<button aria-label="Close" id="close-button">X</button>

 
diff --git a/files/en-us/web/api/element/arialevel/index.html b/files/en-us/web/api/element/arialevel/index.html
index d38cb35d0276561..dd744511427935d 100644
--- a/files/en-us/web/api/element/arialevel/index.html
+++ b/files/en-us/web/api/element/arialevel/index.html
@@ -12,7 +12,12 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaLevel property of the {{domxref("Element")}} interface reflects the value of the aria-level attribute.

+
The ariaLevel property of the {{domxref("Element")}} interface reflects the value of the aria-level attribute, which defines the hierarchical level of an element within a structure.

+
+

+  
Note

+  
Where possible use an HTML {{htmlelement("h1")}} or other correct heading level as these have built in semantics and do not require ARIA attributes.

+

 
 
Syntax

 
@@ -24,7 +29,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-level attribute on the element with an id of main-heading is set to "1". Using ariaLevel we update the value to "2".

+
In this example the aria-level attribute on the element with an ID of main-heading is set to "1". Using ariaLevel we update the value to "2".

 
 
<div role="heading" id="main-heading" aria-level="1">This is a main page heading</div>
 

@@ -34,11 +39,6 @@ 
Examples

 el.ariaLevel = "2"
 console.log(el.ariaLevel); // "2"

 
-

-  
Note

-  
Where possible use an HTML {{htmlelement("h1")}} or other correct heading level as these have built in semantics and do not require ARIA attributes.

-

-
 
Specifications

 
 
diff --git a/files/en-us/web/api/element/arialive/index.html b/files/en-us/web/api/element/arialive/index.html
index e3e357b94896116..7057c7805245572 100644
--- a/files/en-us/web/api/element/arialive/index.html
+++ b/files/en-us/web/api/element/arialive/index.html
@@ -11,7 +11,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaLive property of the {{domxref("Element")}} interface reflects the value of the aria-live attribute.

+
The ariaLive property of the {{domxref("Element")}} interface reflects the value of the aria-live attribute, which indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
Syntax

 
@@ -22,17 +22,17 @@ 
Value
A {{domxref("DOMString")}} with one of the following values:

-  
assertive

+  
"assertive"

   
Indicates that updates to the region have the highest priority and should be presented the user immediately.

-  
off

+  
"off"

   
Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region.

-  
polite

+  
"polite"

   
Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing.

 
Examples

 
-
In this example the aria-live attribute on the element with an id of planetInfo is set to "polite". We then update the value to "assertive".

+
In this example the aria-live attribute on the element with an ID of planetInfo is set to "polite". We then update the value to "assertive".
<div role="region" id="planetInfo" aria-live="polite"<
   <h2 id="planetTitle">No planet selected</h2>
diff --git a/files/en-us/web/api/element/ariamodal/index.html b/files/en-us/web/api/element/ariamodal/index.html
index 4ac52957df1ac22..dd45c8f2248fece 100644
--- a/files/en-us/web/api/element/ariamodal/index.html
+++ b/files/en-us/web/api/element/ariamodal/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaModal property of the {{domxref("Element")}} interface reflects the value of the aria-modal attribute.

+
The ariaModal property of the {{domxref("Element")}} interface reflects the value of the aria-modal attribute, which indicates whether an element is modal when displayed.

 
 
Syntax

 
@@ -23,15 +23,15 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
The element is modal.

-  
false

+  
"false"

   
The element is not modal.

 

 
 
Examples

 
-
In this example the aria-modal attribute on the element with an id of address-modal is set to "true" indicating that this is a modal dialog. Using ariaModal we update the value to "false".

+
In this example the aria-modal attribute on the element with an ID of address-modal is set to "true" indicating that this is a modal dialog. Using ariaModal we update the value to "false".

 
 
<div role="dialog" id="address-modal" aria-labelledby="dialog1Title"
   aria-describedby="dialog1Desc" aria-modal="true"></div>

diff --git a/files/en-us/web/api/element/ariamultiline/index.html b/files/en-us/web/api/element/ariamultiline/index.html
index 33a60512495e7f1..d36e8b575dcce0f 100644
--- a/files/en-us/web/api/element/ariamultiline/index.html
+++ b/files/en-us/web/api/element/ariamultiline/index.html
@@ -12,7 +12,12 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaMultiline property of the {{domxref("Element")}} interface reflects the value of the aria-multiline attribute.

+
The ariaMultiline property of the {{domxref("Element")}} interface reflects the value of the aria-multiline attribute, which indicates whether a text box accepts multiple lines of input or only a single line.

+
+

+  
Note

+  
Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

+

 
 
Syntax

 
@@ -23,15 +28,15 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
This is a multi-line text box.

-  
false

+  
"false"

   
This is a single-line text box.

 

 
 
Examples

 
-
In this example the aria-multiline attribute on the element with an id of txtBoxInput is set to "true" indicating that this box allows for multiple lines of input. Using ariaPlaceholder we update the value to "false".

+
In this example the aria-multiline attribute on the element with an ID of txtBoxInput is set to "true" indicating that this box allows for multiple lines of input. Using ariaPlaceholder we update the value to "false".

 
 
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
 <div role="textbox" id="txtBoxInput" contenteditable="true" aria-multiline="true"
@@ -42,11 +47,6 @@ 
Examples

 el.ariaMultiline = "false"
 console.log(el.ariaMultiline); // "false"

 
-

-  
Note

-  
Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

-

-
 
Specifications

 
 

 
 
 
 
 
 
 
 
 

diff --git a/files/en-us/web/api/element/ariamultiselectable/index.html b/files/en-us/web/api/element/ariamultiselectable/index.html
index fe9c66b148ef69e..a32aa0df90c6030 100644
--- a/files/en-us/web/api/element/ariamultiselectable/index.html
+++ b/files/en-us/web/api/element/ariamultiselectable/index.html
@@ -1,37 +1,42 @@
 ---
-title: Element.ariaMultiselectable
-slug: Web/API/Element/ariaMultiselectable
+title: Element.ariaMultiSelectable
+slug: Web/API/Element/ariaMultiSelectable
 tags:
   - API
   - Property
   - Reference
-  - ariaMultiselectable
+  - ariaMultiSelectable
   - AriaAttributes
   - AriaMixin
   - Element
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaMultiselectable property of the {{domxref("Element")}} interface reflects the value of the aria-multiselectable attribute.

+
The ariaMultiSelectable property of the {{domxref("Element")}} interface reflects the value of the aria-multiselectable attribute, which indicates that the user may select more than one item from the current selectable descendants.

+
+

+  
Note

+  
Where possible use an HTML {{htmlelement("select")}} element as this has built in semantics and does not require ARIA attributes.

+
Syntax

 
-
var ariaMultiselectable = element.ariaMultiselectable;
-element.ariaMultiselectable = ariaMultiselectable

+
var ariaMultiSelectable = element.ariaMultiSelectable;
+element.ariaMultiSelectable = ariaMultiSelectable
Value
A {{domxref("DOMString")}} with one of the following values:

-  
true

+  
"true"

   
More than one item may be selected at a time.

-  
false

+  
"false"

   
Only one item may be selected.

 
Examples

 
-

+
In this example the aria-multiselectable attribute on the element with an ID of listbox1 is set to "true" indicating that this input accepts multiple selected items. Using ariaMultiSelectable we update the value to "false".
<div role="listbox" tabindex="0" id="listbox1"
   aria-multiselectable="true" aria-labelledby="listbox1label" aria-activedescendant="listbox1-1">
@@ -41,14 +46,9 @@ 
Examples

 </div>
let el = document.getElementById('listbox1');
-console.log(el.ariaMultiselectable); // "true"
-el.ariaMultiselectable = "false"
-console.log(el.ariaMultiselectable); // "false"

-
-

-  
Note

-  
Where possible use an HTML {{htmlelement("select")}} element as this has built in semantics and does not require ARIA attributes.

-

+console.log(el.ariaMultiSelectable); // "true"
+el.ariaMultiSelectable = "false"
+console.log(el.ariaMultiSelectable); // "false"
Specifications

 
@@ -60,7 +60,7 @@ 
Specifications

-   
+   
@@ -71,7 +71,7 @@ 
Browser compatibility

 
-
{{Compat("api.Element.ariaMultiselectable")}}

+
{{Compat("api.Element.ariaMultiSelectable")}}
See also

 
diff --git a/files/en-us/web/api/element/ariaorientation/index.html b/files/en-us/web/api/element/ariaorientation/index.html
index 5da11bb8f32b781..ac7d5217619c22d 100644
--- a/files/en-us/web/api/element/ariaorientation/index.html
+++ b/files/en-us/web/api/element/ariaorientation/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaOrientation property of the {{domxref("Element")}} interface reflects the value of the aria-orientation attribute.

+
The ariaOrientation property of the {{domxref("Element")}} interface reflects the value of the aria-orientation attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
Syntax

 
@@ -23,17 +23,17 @@ 
Value
A {{domxref("DOMString")}} with one of the following values:

-  
horizontal

+  
"horizontal"

   
The element is horizontal.

-  
vertical

+  
"vertical"

   
The element is vertical.

-  
undefined

+  
"undefined"

   
The element's orientation is unknown.

 
Examples

 
-
In this example the aria-orientation attribute on the element with an id of handle_zoomSlider is set to "vertical". Using ariaOrientation we update the value to "horizontal".

+
In this example the aria-orientation attribute on the element with an ID of handle_zoomSlider is set to "vertical". Using ariaOrientation we update the value to "horizontal".
<a href="#" id="handle_zoomSlider"
   role="slider"
diff --git a/files/en-us/web/api/element/ariaplaceholder/index.html b/files/en-us/web/api/element/ariaplaceholder/index.html
index f2a3f95ebf10b89..f724213b2b1d104 100644
--- a/files/en-us/web/api/element/ariaplaceholder/index.html
+++ b/files/en-us/web/api/element/ariaplaceholder/index.html
@@ -12,7 +12,12 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaPlaceholder property of the {{domxref("Element")}} interface reflects the value of the aria-placeholder attribute.

+
The ariaPlaceholder property of the {{domxref("Element")}} interface reflects the value of the aria-placeholder attribute, which defines a short hint intended to aid the user with data entry when the control has no value.

+
+

+  
Note

+  
Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

+

 
 
Syntax

 
@@ -24,7 +29,7 @@ 
Value

 
 
Examples

 
-

+
In this example the aria-placeholder attribute on the element with an ID of txtBoxInput has been set to a string. Using ariaPlaceholder we update the string to another value.

 
 
<div id="txtboxLabel">Enter your five-digit zipcode</div>
 <div role="textbox" id="txtBoxInput" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxLabel"></div>

@@ -34,11 +39,6 @@ 
Examples

 el.ariaPlaceholder = "12345"
 console.log(el.ariaPlaceholder); // "12345"

 
-

-  
Note

-  
Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

-

-
 
Specifications

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
Comment
   

   
{{SpecName('ARIA 1.2','#dom-ariamixin-ariamultiselectable','ariaMultiselectable')}}{{SpecName('ARIA 1.2','#dom-ariamixin-ariamultiselectable','ariaMultiSelectable')}}
    {{Spec2('ARIA 1.2')}}
    Initial definition.
   

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

diff --git a/files/en-us/web/api/element/ariaposinset/index.html b/files/en-us/web/api/element/ariaposinset/index.html
index 4ae77933322fdb2..f81203fceffee8a 100644
--- a/files/en-us/web/api/element/ariaposinset/index.html
+++ b/files/en-us/web/api/element/ariaposinset/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaPosInSet property of the {{domxref("Element")}} interface reflects the value of the aria-posinset attribute.

+
The ariaPosInSet property of the {{domxref("Element")}} interface reflects the value of the aria-posinset attribute, which defines an element's number or position in the current set of listitems or treeitems.
Syntax

 
@@ -24,7 +24,7 @@ 
Value
Examples

 
-
In this example the aria-posinset attribute on the element with an id of article2 is set to "2". Using ariaPosInSet we update the value to "3".

+
In this example the aria-posinset attribute on the element with an ID of article2 is set to "2". Using ariaPosInSet we update the value to "3".
<article id="article1" aria-posinset="1"> ... </article>
 <article id="article1" aria-posinset="2"> ... </article>
diff --git a/files/en-us/web/api/element/ariapressed/index.html b/files/en-us/web/api/element/ariapressed/index.html
index 20df831424e23d8..19d454f9b957948 100644
--- a/files/en-us/web/api/element/ariapressed/index.html
+++ b/files/en-us/web/api/element/ariapressed/index.html
@@ -12,7 +12,12 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaPressed property of the {{domxref("Element")}} interface reflects the value of the aria-pressed attribute.

+
The ariaPressed property of the {{domxref("Element")}} interface reflects the value of the aria-pressed attribute, which indicates the current "pressed" state of toggle buttons.

+
+

+  
Note

+  
Where possible use an HTML {{htmlelement("input")}} element with type="button" or the {{htmlelement("button")}} element as these have built in semantics and do not require ARIA attributes.

+

 
 
Syntax

 
@@ -23,19 +28,19 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
The element is pressed.

-  
false

+  
"false"

   
The element supports being pressed but is not currently pressed.

-  
mixed

+  
"mixed"

   
Indicates a mixed mode value for a tri-state toggle button.

-  
undefined

+  
"undefined"

   
The element does not support being pressed.

 

 
 
Examples

 
-
In this example the aria-pressed attribute on the element with an id of saveChanges is set to "false" indicating that this input is currently not pressed. Using ariaPressed we update the value to "true".

+
In this example the aria-pressed attribute on the element with an ID of saveChanges is set to "false" indicating that this input is currently not pressed. Using ariaPressed we update the value to "true".

 
 
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>

 
@@ -44,11 +49,6 @@ 
Examples

 el.ariaPressed = "true"
 console.log(el.ariaPressed); // "true"

 
-

-  
Note

-  
Where possible use an HTML {{htmlelement("input")}} element with type="button" or the {{htmlelement("button")}} element as these have built in semantics and do not require ARIA attributes.

-

-
 
Specifications

 
 
 
 
 
 
 
 

diff --git a/files/en-us/web/api/element/ariareadonly/index.html b/files/en-us/web/api/element/ariareadonly/index.html
index 2d05ac01b61a3dc..3f93c580c1b5007 100644
--- a/files/en-us/web/api/element/ariareadonly/index.html
+++ b/files/en-us/web/api/element/ariareadonly/index.html
@@ -12,7 +12,12 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaReadOnly property of the {{domxref("Element")}} interface reflects the value of the aria-readonly attribute.

+
The ariaReadOnly property of the {{domxref("Element")}} interface reflects the value of the aria-readonly attribute, which indicates that the element is not editable, but is otherwise operable.

+
+

+  
Note

+  
Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

+
Syntax

 
@@ -23,15 +28,15 @@ 
Value
A {{domxref("DOMString")}} with one of the following values:

-  
true

+  
"true"

   
The user cannot change the value of the element.

-  
false

+  
"false"

   
The user can set the value of the element.

 
Examples

 
-
In this example the aria-readonly attribute on the element with an id of txtBoxInput is set to "true" indicating that this input is currently read only. Using ariaReadOnly we update the value to "false".

+
In this example the aria-readonly attribute on the element with an ID of txtBoxInput is set to "true" indicating that this input is currently read only. Using ariaReadOnly we update the value to "false".
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
 <div role="textbox" id="txtBoxInput" contenteditable="true" aria-multiline="true"
@@ -42,11 +47,6 @@ 
Examples

 el.ariaReadOnly = "false"
 console.log(el.ariaReadOnly); // "false"

 
-

-  
Note

-  
Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

-

-
 
Specifications

 
 
 
 
 
 
 
 
 
 
 

diff --git a/files/en-us/web/api/element/ariarelevant/index.html b/files/en-us/web/api/element/ariarelevant/index.html
index 355928b0316281e..82abfd13641b393 100644
--- a/files/en-us/web/api/element/ariarelevant/index.html
+++ b/files/en-us/web/api/element/ariarelevant/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaRelevant property of the {{domxref("Element")}} interface reflects the value of the aria-relevant attribute. This is used to describe what changes in an aria-live region and relevant and should be announced.

+
The ariaRelevant property of the {{domxref("Element")}} interface reflects the value of the aria-relevant attribute, which indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. This is used to describe what changes in an aria-live region are relevant and should be announced.
Syntax

 
@@ -23,19 +23,19 @@ 
Value
A {{domxref("DOMString")}} containing one or more of the following values, space separated:

-  
additions

+  
"additions"

   
Additions of Element Nodes within the live region should be considered relevant.

-  
removals

+  
"removals"

   
Deletion of Nodes from the live region should be considered relevant.

-  
text

+  
"text"

   
Changes to the textual content of existing nodes should be considered relevant.

-  
all

+  
"all"

   
Equivalent to additions removals text.

 
Examples

 
-
In this example the aria-relevant attribute on the element with an id of text is set to "all". Using ariaRelevant we update the value to "text".

+
In this example the aria-relevant attribute on the element with an ID of text is set to "all". Using ariaRelevant we update the value to "text".
<div id="clock" role="timer" aria-live="polite" aria-atomic="true" aria-relevant="all"></div>

 
diff --git a/files/en-us/web/api/element/ariarequired/index.html b/files/en-us/web/api/element/ariarequired/index.html
index d03d125217b7707..7fae1a82802dd68 100644
--- a/files/en-us/web/api/element/ariarequired/index.html
+++ b/files/en-us/web/api/element/ariarequired/index.html
@@ -12,7 +12,12 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaRequired property of the {{domxref("Element")}} interface reflects the value of the aria-required attribute.

+
The ariaRequired property of the {{domxref("Element")}} interface reflects the value of the aria-required attribute, which indicates that user input is required on the element before a form may be submitted.

+
+

+  
Note

+  
Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

+
Syntax

 
@@ -23,15 +28,15 @@ 
Value
A {{domxref("DOMString")}} with one of the following values:

-  
true

+  
"true"

   
Users need to provide input on an element before a form is submitted.

-  
false

+  
"false"

   
User input is not necessary to submit the form.

 
Examples

 
-
In this example the aria-required attribute on the element with an id of txtBoxInput is set to "true" indicating that this input must be completed. Using ariaRequired we update the value to "false".

+
In this example the aria-required attribute on the element with an ID of txtBoxInput is set to "true" indicating that this input must be completed. Using ariaRequired we update the value to "false".
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
 <div role="textbox" id="txtBoxInput" contenteditable="true" aria-multiline="true"
@@ -42,11 +47,6 @@ 
Examples

 el.ariaRequired = "false"
 console.log(el.ariaRequired); // "false"

 
-

-  
Note

-  
Where possible use an HTML {{htmlelement("input")}} element with type="text" or a {{htmlelement("textarea")}} as these have built in semantics and do not require ARIA attributes.

-

-
 
Specifications

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

diff --git a/files/en-us/web/api/element/ariaroledescription/index.html b/files/en-us/web/api/element/ariaroledescription/index.html
index 81a0e45e301eb31..e0547efcb7adcee 100644
--- a/files/en-us/web/api/element/ariaroledescription/index.html
+++ b/files/en-us/web/api/element/ariaroledescription/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaRoleDescription property of the {{domxref("Element")}} interface reflects the value of the aria-roledescription attribute.

+
The ariaRoleDescription property of the {{domxref("Element")}} interface reflects the value of the aria-roledescription attribute, which defines a human-readable, author-localized description for the role of an element.
Syntax

 
@@ -24,7 +24,7 @@ 
Value
Examples

 
-
In this example the aria-roledescription attribute on the element with an id of myApplication has been set. Using ariaRoleDescription we can update the value.

+
In this example the aria-roledescription attribute on the element with an ID of myApplication has been set. Using ariaRoleDescription we can update the value.
<div id="myApplication" role="application" aria-roledescription="a description of this widget">...</div>

 
diff --git a/files/en-us/web/api/element/ariarowcount/index.html b/files/en-us/web/api/element/ariarowcount/index.html
index cc069baa805db58..156f97cd5e00f1b 100644
--- a/files/en-us/web/api/element/ariarowcount/index.html
+++ b/files/en-us/web/api/element/ariarowcount/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaRowCount property of the {{domxref("Element")}} interface reflects the value of the aria-rowcount attribute.

+
The ariaRowCount property of the {{domxref("Element")}} interface reflects the value of the aria-rowcount attribute, which defines the total number of rows in a table, grid, or treegrid.
Syntax

 
@@ -24,7 +24,7 @@ 
Value
Examples

 
-
In this example the aria-rowcount attribute on the element with an id of semantic-table is set to "100", representing the total number of rows in the table, rather than the currently visible rows. Using ariaRowCount we update the value to "101".

+
In this example the aria-rowcount attribute on the element with an ID of semantic-table is set to "100", representing the total number of rows in the table, rather than the currently visible rows. Using ariaRowCount we update the value to "101".
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
   <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
diff --git a/files/en-us/web/api/element/ariarowindex/index.html b/files/en-us/web/api/element/ariarowindex/index.html
index 6ffbaa5e621bd88..9d6edf8fc8e735d 100644
--- a/files/en-us/web/api/element/ariarowindex/index.html
+++ b/files/en-us/web/api/element/ariarowindex/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaRowIndex property of the {{domxref("Element")}} interface reflects the value of the aria-rowindex attribute.

+
The ariaRowIndex property of the {{domxref("Element")}} interface reflects the value of the aria-rowindex attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-rowindex attribute on the element with an id of role-heading is set to "1". Using ariaRowIndex we update the value to "2".

+
In this example the aria-rowindex attribute on the element with an ID of role-heading is set to "1". Using ariaRowIndex we update the value to "2".

 
 
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
   <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
diff --git a/files/en-us/web/api/element/ariarowindextext/index.html b/files/en-us/web/api/element/ariarowindextext/index.html
index 3eb975ea3902cd8..e9b6bd2b7e6cc9a 100644
--- a/files/en-us/web/api/element/ariarowindextext/index.html
+++ b/files/en-us/web/api/element/ariarowindextext/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaRowIndexText property of the {{domxref("Element")}} interface reflects the value of the aria-rowindextext attribute.

+
The ariaRowIndexText property of the {{domxref("Element")}} interface reflects the value of the aria-rowindextext attribute, which defines a human readable text alternative of aria-rowindex.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-rowindextext attribute on the element with an id of role-heading is set to "Heading row". Using ariaRowIndexText we update the value to "Updated heading row".

+
In this example the aria-rowindextext attribute on the element with an ID of role-heading is set to "Heading row". Using ariaRowIndexText we update the value to "Updated heading row".

 
 
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
   <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
diff --git a/files/en-us/web/api/element/ariarowspan/index.html b/files/en-us/web/api/element/ariarowspan/index.html
index 2a17426a4000453..28ad8508575cf35 100644
--- a/files/en-us/web/api/element/ariarowspan/index.html
+++ b/files/en-us/web/api/element/ariarowspan/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaRowSpan property of the {{domxref("Element")}} interface reflects the value of the aria-rowspan attribute.

+
The ariaRowSpan property of the {{domxref("Element")}} interface reflects the value of the aria-rowspan attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-rowspan attribute on the element with an id of spanning-heading is set to "3". Using ariaRowSpan we update the value to "2".

+
In this example the aria-rowspan attribute on the element with an ID of spanning-heading is set to "3". Using ariaRowSpan we update the value to "2".

 
 
<table>
   <tr>
diff --git a/files/en-us/web/api/element/ariaselected/index.html b/files/en-us/web/api/element/ariaselected/index.html
index d7f5156b4a21cf9..afca33272870811 100644
--- a/files/en-us/web/api/element/ariaselected/index.html
+++ b/files/en-us/web/api/element/ariaselected/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaSelected property of the {{domxref("Element")}} interface reflects the value of the aria-selected attribute.

+
The ariaSelected property of the {{domxref("Element")}} interface reflects the value of the aria-selected attribute, which indicates the current "selected" state of elements that have a selected state.

 
 
Syntax

 
@@ -23,17 +23,17 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
true

+  
"true"

   
The item is selected.

-  
false

+  
"false"

   
The item is not selected.

-  
undefined

-  
The item is not selectable.

+  
"undefined"

+  
The item is not

 

 
 
Examples

 
-
In this example the aria-selected attribute on the element with an id of tab-id is set to "true". Using ariaSelected we update the value to "false".

+
In this example the aria-selected attribute on the element with an ID of tab-id is set to "true". Using ariaSelected we update the value to "false".

 
 
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">Tab label</button>

 
diff --git a/files/en-us/web/api/element/ariasetsize/index.html b/files/en-us/web/api/element/ariasetsize/index.html
index f45ecad548c9aa2..e4eacf57da531fa 100644
--- a/files/en-us/web/api/element/ariasetsize/index.html
+++ b/files/en-us/web/api/element/ariasetsize/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaSetSize property of the {{domxref("Element")}} interface reflects the value of the aria-setsize attribute.

+
The ariaSetSize property of the {{domxref("Element")}} interface reflects the value of the aria-setsize attribute, which defines the number of items in the current set of listitems or treeitems.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-setsize attribute on the element with an id of tab-id is set to "3", to inform a device that there are currently 3 tabs in the group. Using ariaSetSize we update the value to "4".

+
In this example the aria-setsize attribute on the element with an ID of tab-id is set to "3", to inform a device that there are currently 3 tabs in the group. Using ariaSetSize we update the value to "4".

 
 
<button role="tab" aria-selected="true" aria-setsize="3" aria-controls="tabpanel-id" id="tab-id">Tab label</button>

 
diff --git a/files/en-us/web/api/element/ariasort/index.html b/files/en-us/web/api/element/ariasort/index.html
index 493e6e38e699f5c..d0c2d6435991ec5 100644
--- a/files/en-us/web/api/element/ariasort/index.html
+++ b/files/en-us/web/api/element/ariasort/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaSort property of the {{domxref("Element")}} interface reflects the value of the aria-sort attribute.

+
The ariaSort property of the {{domxref("Element")}} interface reflects the value of the aria-sort attribute, which indicates if items in a table or grid are sorted in ascending or descending order.

 
 
Syntax

 
@@ -23,19 +23,19 @@ 
Value

 
A {{domxref("DOMString")}} with one of the following values:

 
 

-  
ascending

+  
"ascending"

   
Items are sorted in ascending order by this column.

-  
descending

+  
"descending"

   
Items are sorted in descending order by this column.

-  
none

+  
"none"

   
There is no defined sort applied to the column.

-  
other

+  
"other"

   
A sort algorithm other than ascending or descending has been applied.

 

 
 
Examples

 
-
In this example the aria-sort attribute on the element with an id of role-heading is set to "none". Using ariaSort we update the value to "ascending".

+
In this example the aria-sort attribute on the element with an ID of role-heading is set to "none". Using ariaSort we update the value to "ascending".

 
 
<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100">
   <caption id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</caption>
diff --git a/files/en-us/web/api/element/ariavaluemax/index.html b/files/en-us/web/api/element/ariavaluemax/index.html
index 4bca29fd9b81ce7..e38c0024b0245e2 100644
--- a/files/en-us/web/api/element/ariavaluemax/index.html
+++ b/files/en-us/web/api/element/ariavaluemax/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaValueMax property of the {{domxref("Element")}} interface reflects the value of the aria-valuemax attribute.

+
The ariaValueMax property of the {{domxref("Element")}} interface reflects the value of the aria-valuemax attribute, which defines the maximum allowed value for a range widget.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-valuemax attribute on the element with an id of slider is set to "7". Using ariaValueMax we update the value to "6".

+
In this example the aria-valuemax attribute on the element with an ID of slider is set to "7". Using ariaValueMax we update the value to "6".

 
 
<div role="slider" aria-valuenow="1"
   aria-valuemin="1" aria-valuemax="7"
diff --git a/files/en-us/web/api/element/ariavaluemin/index.html b/files/en-us/web/api/element/ariavaluemin/index.html
index 13fff544ae82874..74158dde97623e6 100644
--- a/files/en-us/web/api/element/ariavaluemin/index.html
+++ b/files/en-us/web/api/element/ariavaluemin/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaValueMin property of the {{domxref("Element")}} interface reflects the value of the aria-valuemin attribute.

+
The ariaValueMin property of the {{domxref("Element")}} interface reflects the value of the aria-valuemin attribute, which defines the minimum allowed value for a range widget.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-valuemin attribute on the element with an id of slider is set to "1". Using ariaValueMin we update the value to "2".

+
In this example the aria-valuemin attribute on the element with an ID of slider is set to "1". Using ariaValueMin we update the value to "2".

 
 
<div role="slider" aria-valuenow="1"
   aria-valuemin="1" aria-valuemax="7"
diff --git a/files/en-us/web/api/element/ariavaluenow/index.html b/files/en-us/web/api/element/ariavaluenow/index.html
index e8654fb1309ed23..34b9e4885e0fcee 100644
--- a/files/en-us/web/api/element/ariavaluenow/index.html
+++ b/files/en-us/web/api/element/ariavaluenow/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaValueNow property of the {{domxref("Element")}} interface reflects the value of the aria-valuenow attribute.

+
The ariaValueNow property of the {{domxref("Element")}} interface reflects the value of the aria-valuenow attribute, which defines the current value for a range widget.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-valuenow attribute on the element with an id of slider is set to "1". Using ariaValueNow we update the value to "2".

+
In this example the aria-valuenow attribute on the element with an ID of slider is set to "1". Using ariaValueNow we update the value to "2".

 
 
<div role="slider" aria-valuenow="1"
   aria-valuemin="1" aria-valuemax="7"
diff --git a/files/en-us/web/api/element/ariavaluetext/index.html b/files/en-us/web/api/element/ariavaluetext/index.html
index de7f46bb5b1d970..125ec49c923468f 100644
--- a/files/en-us/web/api/element/ariavaluetext/index.html
+++ b/files/en-us/web/api/element/ariavaluetext/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaValueText property of the {{domxref("Element")}} interface reflects the value of the aria-valuetext attribute.

+
The ariaValueText property of the {{domxref("Element")}} interface reflects the value of the aria-valuetext attribute, which defines the human readable text alternative of aria-valuenow for a range widget.

 
 
Syntax

 
@@ -24,7 +24,7 @@ 
Value

 
 
Examples

 
-
In this example the aria-valuetext attribute on the element with an id of slider is set to "Sunday" to give a human-readable value for the range. Using ariaValueText we update the value to "Monday".

+
In this example the aria-valuetext attribute on the element with an ID of slider is set to "Sunday" to give a human-readable value for the range. Using ariaValueText we update the value to "Monday".

 
 
<div role="slider" aria-valuenow="1"
   aria-valuemin="1" aria-valuemax="7"
diff --git a/files/en-us/web/api/element/index.html b/files/en-us/web/api/element/index.html
index 82b2cb8e4ed7fa2..e75b4628acefc9b 100644
--- a/files/en-us/web/api/element/index.html
+++ b/files/en-us/web/api/element/index.html
@@ -112,83 +112,85 @@ 
Properties included from ARIA

 
 

   
{{domxref("Element.ariaAtomic")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-atomic attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-atomic attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

   
{{domxref("Element.ariaAutoComplete")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-autocomplete attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-autocomplete attribute, which indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.

   
{{domxref("Element.ariaBusy")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-busy attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-busy attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.

   
{{domxref("Element.ariaChecked")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-checked attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-checked attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.

   
{{domxref("Element.ariaColCount")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-colcount attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-colcount attribute, which defines the number of columns in a table, grid, or treegrid.

   
{{domxref("Element.ariaColIndex")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-colindex attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-colindex attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

   
{{domxref("Element.ariaColIndexText")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-colindextext attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-colindextext attribute, which defines a human readable text alternative of aria-colindex.

   
{{domxref("Element.ariaColSpan")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-colspan attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-colspan attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

   
{{domxref("Element.ariaCurrent")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-current attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-current attribute, which indicates the element that represents the current item within a container or set of related elements.

   
{{domxref("Element.ariaDescription")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-description attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-description attribute, which defines a string value that describes or annotates the current element.

   
{{domxref("Element.ariaDisabled")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-disabled attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-disabled attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

   
{{domxref("Element.ariaExpanded")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-expanded attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-expanded attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

   
{{domxref("Element.ariaHasPopup")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-haspopup attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-haspopup attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

   
{{domxref("Element.ariaHidden")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-hidden attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-hidden attribute, which indicates whether the element is exposed to an accessibility API.

   
{{domxref("Element.ariaKeyShortcuts")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-keyshortcuts attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-keyshortcuts attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

   
{{domxref("Element.ariaLabel")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-label attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-label attribute, which defines a string value that labels the current element.

   
{{domxref("Element.ariaLevel")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-level attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-level attribute, which defines the hierarchical level of an element within a structure.

   
{{domxref("Element.ariaLive")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-live attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-live attribute, which indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

   
{{domxref("Element.ariaModal")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-modal attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-modal attribute, which indicates whether an element is modal when displayed.

   
{{domxref("Element.ariaMultiline")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-multiline attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-multiline attribute, which indicates whether a text box accepts multiple lines of input or only a single line.

   
{{domxref("Element.ariaMultiSelectable")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-multiselectable attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-multiselectable attribute, which indicates that the user may select more than one item from the current selectable descendants.

   
{{domxref("Element.ariaOrientation")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-orientation attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-orientation attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

   
{{domxref("Element.ariaPlaceholder")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-placeholder attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-placeholder attribute, which defines a short hint intended to aid the user with data entry when the control has no value.

   
{{domxref("Element.ariaPosInSet")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-posinset attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-posinset attribute, which defines an element's number or position in the current set of listitems or treeitems.

   
{{domxref("Element.ariaPressed")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-pressed attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-pressed attribute, which indicates the current "pressed" state of toggle buttons.

   
{{domxref("Element.ariaReadOnly")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-readonly attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-readonly attribute, which indicates that the element is not editable, but is otherwise operable.

   
{{domxref("Element.ariaRelevant")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-relevant attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-relevant attribute, which indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. This is used to describe what changes in an aria-live region are relevant and should be announced.

   
{{domxref("Element.ariaRequired")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-required attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-required attribute, which indicates that user input is required on the element before a form may be submitted.

   
{{domxref("Element.ariaRoleDescription")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-roledescription attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-roledescription attribute, which defines a human-readable, author-localized description for the role of an element.

   
{{domxref("Element.ariaRowCount")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-rowcount attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-rowcount attribute, which defines the total number of rows in a table, grid, or treegrid.

   
{{domxref("Element.ariaRowIndex")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-rowindex attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-rowindex attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+  
{{domxref("Element.ariaRowIndexText")}}

+  
Is a {{domxref("DOMString")}} reflecting the aria-rowindextext attribute, which defines a human readable text alternative of aria-rowindex.

   
{{domxref("Element.ariaRowSpan")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-rowspan attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-rowspan attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

   
{{domxref("Element.ariaSelected")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-selected attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-selected attribute, which indicates the current "selected" state of elements that have a selected state.

   
{{domxref("Element.ariaSetSize")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-setsize attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-setsize attribute, which defines the number of items in the current set of listitems or treeitems.

   
{{domxref("Element.ariaSort")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-sort attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-sort attribute, which indicates if items in a table or grid are sorted in ascending or descending order.

   
{{domxref("Element.ariaValueMax")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-valueMax attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-valueMax attribute, which defines the maximum allowed value for a range widget.

   
{{domxref("Element.ariaValueMin")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-valueMin attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-valueMin attribute, which defines the minimum allowed value for a range widget.

   
{{domxref("Element.ariaValueNow")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-valueNow attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-valueNow attribute, which defines the current value for a range widget.

   
{{domxref("Element.ariaValueText")}}

-  
Is a {{domxref("DOMString")}} reflecting the aria-valuetext attribute.

+  
Is a {{domxref("DOMString")}} reflecting the aria-valuetext attribute, which defines the human readable text alternative of aria-valuenow for a range widget.

 

 
 
Event handlers


From f18a6602f279259f2723d3d3487edf1bf394a595 Mon Sep 17 00:00:00 2001
From: Rachel Andrew 
Date: Wed, 10 Feb 2021 08:30:35 +0000
Subject: [PATCH 13/15] Update
 files/en-us/web/api/element/ariaatomic/index.html

Co-authored-by: Joe Medley 
---
 files/en-us/web/api/element/ariaatomic/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/element/ariaatomic/index.html b/files/en-us/web/api/element/ariaatomic/index.html
index 956135fe9b3ccd7..b3bf407e422c94f 100644
--- a/files/en-us/web/api/element/ariaatomic/index.html
+++ b/files/en-us/web/api/element/ariaatomic/index.html
@@ -24,7 +24,7 @@ 
Value

 

   
"false"

   
Assistive technologies will present only the changed node or nodes.

-  
true

+  
"true"

   
Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.

 

 

From dec92f12983f1d9aa31cdf505ab837862e584ac1 Mon Sep 17 00:00:00 2001
From: Rachel Andrew 
Date: Wed, 10 Feb 2021 08:30:44 +0000
Subject: [PATCH 14/15] Update
 files/en-us/web/api/element/ariahidden/index.html

Co-authored-by: Joe Medley 
---
 files/en-us/web/api/element/ariahidden/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/element/ariahidden/index.html b/files/en-us/web/api/element/ariahidden/index.html
index 9df7168d33a2504..9feefc2fe657ad6 100644
--- a/files/en-us/web/api/element/ariahidden/index.html
+++ b/files/en-us/web/api/element/ariahidden/index.html
@@ -25,7 +25,7 @@ 
Value

 

   
"true"

   
The element is hidden from the accessibility API.

-  
false

+  
"false"

   
The element is exposed to the accessibility API as if it were rendered.

   
undefined

   
The element's hidden state is determined by the user agent based on whether it is rendered.


From d67c60ce975cc2415c66dce2fbedafc53519ca68 Mon Sep 17 00:00:00 2001
From: Rachel Andrew 
Date: Wed, 10 Feb 2021 09:26:08 +0000
Subject: [PATCH 15/15] putting things back that got messed up in git.

---
 files/en-us/web/api/element/ariaatomic/index.html   |  2 +-
 files/en-us/web/api/element/ariachecked/index.html  | 10 +++++-----
 files/en-us/web/api/element/ariadisabled/index.html | 10 +++++-----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/files/en-us/web/api/element/ariaatomic/index.html b/files/en-us/web/api/element/ariaatomic/index.html
index b3bf407e422c94f..83136cd159ba10d 100644
--- a/files/en-us/web/api/element/ariaatomic/index.html
+++ b/files/en-us/web/api/element/ariaatomic/index.html
@@ -12,7 +12,7 @@
 ---
 
{{DefaultAPISidebar("DOM")}}

 
-
The ariaAtomic property of the {{domxref("Element")}} interface reflects the value of the aria-atomic attribute.

+
The ariaAtomic property of the {{domxref("Element")}} interface reflects the value of the aria-atomic attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the {{domxref("aria-relevant")}} attribute.

 
 
Syntax

 
diff --git a/files/en-us/web/api/element/ariachecked/index.html b/files/en-us/web/api/element/ariachecked/index.html
index 39ff05927fd0238..9ca79dca122e008 100644
--- a/files/en-us/web/api/element/ariachecked/index.html
+++ b/files/en-us/web/api/element/ariachecked/index.html
@@ -14,6 +14,11 @@
 
 
The ariaChecked property of the {{domxref("Element")}} interface reflects the value of the aria-checked attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.

 
+

+  
Note

+  
Where possible use an HTML {{htmlelement("input")}} element with type="checkbox" as this element has built in semantics and does not require ARIA attributes.

+

+
 
Syntax

 
 
var ariaChecked = element.ariaChecked;
@@ -45,11 +50,6 @@ 
Examples

 el.ariaChecked = "true"
 console.log(el.ariaChecked); // "true"

 
-

-  
Note

-  
Where possible use an HTML {{htmlelement("input")}} element with type="checkbox" as this element has built in semantics and does not require ARIA attributes.

-

-
 
Specifications

 
 

 
 
 
 
 
 
 
 
 
 
 
 

diff --git a/files/en-us/web/api/element/ariadisabled/index.html b/files/en-us/web/api/element/ariadisabled/index.html
index 31f03efebabc82b..a3adbf9d013d48c 100644
--- a/files/en-us/web/api/element/ariadisabled/index.html
+++ b/files/en-us/web/api/element/ariadisabled/index.html
@@ -14,6 +14,11 @@
 
 
The ariaDisabled property of the {{domxref("Element")}} interface reflects the value of the aria-disabled attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

 
+

+  
Note

+  
Where possible use an HTML {{htmlelement("input")}} element with type="button" or the {{htmlelement("button")}} element as these have built in semantics and do not require ARIA attributes.

+

+
 
Syntax
var ariaDisabled = element.ariaDisabled;
@@ -40,11 +45,6 @@ 
Examples

 el.ariaDisabled = "false"
 console.log(el.ariaDisabled); // "false"

 
-

-  
Note

-  
Where possible use an HTML {{htmlelement("input")}} element with type="button" or the {{htmlelement("button")}} element as these have built in semantics and do not require ARIA attributes.

-

-
 
Specifications