Element.ariaRowIndexText
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
TheariaRowIndexText
property of theElement
interface reflects the value of thearia-rowindextext
attribute, which defines a human readable text alternative of aria-rowindex.
Value
A string.
Examples
In this example thearia-rowindextext
attribute on the element with an ID ofrole-heading
is set to "Heading row". UsingariaRowIndexText
we update the value to "Updated heading row".
html
<table role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="100"> <caption> 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-rowindextext="Heading row"> 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>
js
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
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariarowindextext |