recursal/MDN huggingface dataset:
ARIA: marquee role
==================

A `marquee` is a type of live region containing non-essential information which changes frequently.

Description
-----------

The `marquee` role defines an area as a type of live region that presents non-essential information that changes frequently. Examples of marquees include stock tickers and ad banners; information that is not necessarily sought out by the user that may be presented in any order. The main difference between a `marquee` and a `log` is that log information is presented in a meaningful order such as a by date.

Elements with the role marquee have an implicit aria-live value of `off`.

The marquee is required to have an accessible name. Use `aria-labelledby` if a visible label is present, otherwise use `aria-label`.

### Associated WAI-ARIA roles, states, and properties

`aria-live`

Defines when assistive technology should inform the user of updates to content. Elements with the role `marquee` have an implicit aria-live value of `off`, meaning screen readers will not announce changes inside the marquee, even when the user is idle.

`aria-label` or `aria-labelledby`

The `marquee` is required to have an accessible name. Use `aria-labelledby` if a visible label is present, otherwise use `aria-label`.

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # marquee |

See Also
--------

* ARIA: `alert` role
* ARIA: `log` role
* ARIA: `status` role
* ARIA: `timer` role
* ARIA live regions
ARIA: sectionhead role
======================

The **`sectionhead` role**, an abstract role, is superclass role for labels or summaries of the topic of its related section.

**Note:** The `sectionhead` role is an abstract role. It is included here for completeness of documentation. It should not be used by web authors.

Description
-----------

The structural `sectionhead` role is an abstract role for the subclass roles that identify the labels or summaries of the sections they label. The role must not be used. The four subclasses — `columnheader`, `heading`, `rowheader`, and `tab`. There are HTML element equivalents, like, `<th scope="col">` for `columnheader`, `<th scope="row">` for rowheader, and any of the HTML headings, h1 through h6 for `heading`. The `tab` role does not currently have an HTML equivalent.

Best Practices
--------------

Do not use.

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # sectionhead |

See Also
--------

* ARIA: `structure` role
* ARIA: `columnheader` role
* ARIA: `heading` role
* ARIA: `rowheader` role
* ARIA: `tab` role
ARIA: section role
==================

The **`section` role**, an abstract role, is a superclass role for renderable structural containment components.

**Note:** The `section` role is an abstract role. It is included here for completeness of documentation. It **should not be used** by web authors.

Description
-----------

 The structural `section` role is an abstract role for categorizing all the section subclass roles. The role must not be used. Some subclasses, like `alert`,
 `note`, and `tooltip` are useful, and can be used to add semantics when no semantic HTML elements quite fit the purpose of a component. Others, like `code`, `figure`, and `subscript`, aren't necessary, as there are HTML element equivalents. In this case, `<code>` `<figure>` and `<sub>`, respectively.

Best Practices
--------------

Do not use.

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # section |

See Also
--------

* ARIA: `structure` role
* ARIA: `alert` role
* ARIA: `associationlist` role
* ARIA: `associationlistitemkey` role
* ARIA: `associationlistitemvalue` role
* ARIA: `blockquote` role
* ARIA: `caption` role
* ARIA: `cell` role
* ARIA: `code` role
* ARIA: `definition` role
* ARIA: `deletion` role
* ARIA: `emphasis` role
* ARIA: `figure` role
* ARIA: `group` role
* ARIA: `img` role
* ARIA: `insertion` role
* ARIA: `landmark` role
* ARIA: `list` role
* ARIA: `listitem` role
* ARIA: `log` role
* ARIA: `mark` role
* ARIA: `marquee` role
* ARIA: `math` role
* ARIA: `note` role
* ARIA: `paragraph` role
* ARIA: `status` role
* ARIA: `strong` role
* ARIA: `subscript` role
* ARIA: `suggestion` role
* ARIA: `superscript` role
* ARIA: `table` role
* ARIA: `tabpanel` role
* ARIA: `term` role
* ARIA: `time` role
* ARIA: `tooltip` role
aria-rowindextext
=================

The `aria-rowindextext` attribute defines a human-readable text alternative of `aria-rowindex`.

Description
-----------

When you have a very long table or when you purposefully want to display just a section of a table, not all rows may be present in the DOM. When this happens, we use the `aria-rowcount` with an integer value to define how many rows the table (or grid) would have if all the rows were present and add the `aria-rowindex` property on each row and spanning cell to provide information on the row index within that larger table. When the value of `aria-rowindex` is not meaningful or does not reflect the displayed index, we can also add the `aria-rowindextext` to provide a human-readable text alternative to the `aria-rowindex` integer value.

The `aria-rowindextext` should only be included **in addition to**, not as a replacement of, the `aria-rowindex`. Some assistive technologies use the numeric row index for the purpose of keeping track of the user's position or providing alternative table navigation. The `aria-rowindextext` is useful if that integer value isn't meaningful or does not reflect the displayed index, such as a game of Chess or Battleship.

The `aria-rowindextext` is added to each `<tr>` or to elements with the `row` role. It can also be addition to cells or owned elements of each row.

Values
------

* `<string>`
    + The human-readable text alternative of the numeric `aria-rowindex`
Associated interfaces
---------------------

`Element.ariaRowIndexText`

The `ariaRowIndexText` property, part of the `Element` interface, reflects the value of the `aria-rowindextext` attribute.

`ElementInternals.ariaRowIndexText`

The `ariaRowIndexText` property, part of the `ElementInternals` interface, reflects the value of the `aria-rowindextext` attribute.

Associated roles
----------------

Used in roles:

* `cell`
* `row`

Inherited into roles:

* `columnheader`
* `gridcell`
* `rowheader`
Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-rowindextext |

See Also
--------

* `aria-rowindex`
* `aria-rowcount`
* `aria-rowspan`
* `aria-colindextext`
* `aria-colindex`
aria-checked
============

The `aria-checked` attribute indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

**Note:** Where possible use an HTML `<input>` element with `type="checkbox"` and `type="radio"` as these have built in semantics and do not require ARIA attributes.

Description
-----------

The `aria-checked` attribute indicates whether the element is checked (`true`), unchecked (`false)`, or if the checked status is indeterminate (`mixed`), meaning it is neither checked nor unchecked. The `mixed` value is supported by the tri-state input roles of `checkbox` and `menuitemcheckbox`.

The `mixed` value is not supported on `radio`, `menuitemradio`, or `switch` and elements that inherits from these. The value will be false if `mixed` is set when not supported.


```html
<span
 role="checkbox"
 id="checkBoxInput"
 aria-checked="false"
 tabindex="0"
 aria-labelledby="chk15-label"></span>
<label id="chk15-label">Subscribe to the newsletter</label>
```


**Note:** Where possible use an HTML `<input>` element with `type="checkbox"` as this element has built in semantics and does not require ARIA attributes.

The `tabindex` attribute is required to enable focus. JavaScript is required to toggle the `aria-checked` state. And, if this checkbox is part of a submittable form, more JavaScript is required to set a name and a value.

The above could have been written as:


```html
<input type="checkbox" id="chk15-label" name="Subscribe" />
<label for="chk15-label">Subscribe to the newsletter</label>
```


By using the `<input>` element with `type="checkbox"` instead of ARIA, there is no need for any JavaScript.

Values
------

false

The element supports being checked but is not currently checked.

true

The element is checked.

mixed

for `checkbox` and `menuitemcheckbox` only, equivalent to `indeterminate`, indicating a mixed mode value of neither checked nor unchecked.

undefined (default)

The element does not support being checked.

Associated roles
----------------

Used in roles:

* `checkbox`
* `menuitemcheckbox`
* `menuitemradio`
* `option`
* `radio`
* `switch`
Associated interfaces
---------------------

`Element.ariaChecked`

The `ariaChecked` property, part of the `Element` interface, reflects the value of the `aria-checked` attribute.

`ElementInternals.ariaChecked`

The `ariaChecked` property, part of the `ElementInternals` interface, reflects the value of the `aria-checked` attribute.


```js
myHTMLElement.ariaChecked = true;
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-checked |
| Unknown specification  |

See Also
--------

* `<input type="checkbox">`
* `<input type="radio">`
* `aria-pressed`
* `aria-selected`
* Two state checkbox example - w3.org
* Mix-state checkbox example - w3.org
aria-valuemin
=============

The `aria-valuemin` attribute defines the minimum allowed value for a range widget.

Description
-----------

The `aria-valuemin` attribute defines the minimum value allowed for range widgets. It is similar to the `min` attribute of `<progress>`, `<meter>`, and `<input>` of type `range`, `number` and all the date-time types.

When creating a range type role, including `meter`, `scrollbar`, `slider`, and `spinbutton` on a non-semantic element, the `aria-valuemin` enables defining a minimum that is less than the maximum value and is a required attribute of `slider`, `scrollbar` and `spinbutton`.

Declaring the minimum and maximum values allows assistive technologies to convey the size of the range to users.

The maximum value is defined with `aria-valuemax`.

**Warning:** The `range` role itself should **NOT** be used as it is an "abstract". The `aria-valuemin` attribute is used on all of the range roles subtypes.

Values
------

`<number>`

A decimal number, below the maximum value.

Associated interfaces
---------------------

`Element.ariaValueMin`

The `ariaValueMin` property, part of the `Element` interface, reflects the value of the `aria-valuemin` attribute.

`ElementInternals.ariaValueMin`

The `ariaValueMin` property, part of the `ElementInternals` interface, reflects the value of the `aria-valuemin` attribute.

Associated roles
----------------

Used in roles:

* `meter`
* `scrollbar`
* `separator`
* `slider`
* `spinbutton`

Inherited into roles:

* `meter`
* `progressbar`
* `scrollbar`
* `slider`
* `spinbutton`
Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-valuemin |

See Also
--------

* `range` role
* `<input type="range>` element `min` attribute
* `aria-valuemax`
* `aria-aria-valuenow`.
aria-valuemax
=============

The `aria-valuemax` attribute defines the maximum allowed value for a range widget.

Description
-----------

The `aria-valuemax` attribute defines the maximum value allowed for range widgets. It is similar to the `max` attribute of `<progress>`, `<meter>`, and `<input>` of type `range`, `number` and all the date-time types.

When creating a range type role, including `meter`, `scrollbar`, `slider`, and `spinbutton` on a non-semantic element, the `aria-valuemax` enables defining a maximum that is more than the minimum value and is a required attribute of `slider`, `scrollbar` and `spinbutton`.

Declaring the minimum and maximum values allows assistive technologies to convey the size of the range to users. The minimum value is defined with `aria-valuemin`.

**Warning:** The `range` role itself should **NOT** be used as it is an "abstract". The `aria-valuemax` attribute is used on all of the range roles subtypes.

Example
-------

The code below shows a simple slider with a maximum value of 9.


```html
<div id="dimesLabel">Dimes</div>
<div
 role="slider"
 aria-valuenow="0"
 aria-valuemin="0"
 aria-valuemax="9"
 aria-labelledby="dimesLabel"
 id="dimes"></div>
```

Values
------

`<number>`

An integer or decimal number that is greater than the minimum value.

Associated interfaces
---------------------

`Element.ariaValueMax`

The `ariaValueMax` property, part of the `Element` interface, reflects the value of the `aria-valuemax` attribute.

`ElementInternals.ariaValueMax`

The `ariaValueMax` property, part of the `ElementInternals` interface, reflects the value of the `aria-valuemax` attribute.

Associated roles
----------------

Used in roles:

* `meter`
* `scrollbar` (required)
* `separator`
* `slider` (required)
* `spinbutton` (required)

Inherited into roles:

* `meter`
* `progressbar`
* `scrollbar`
* `slider`
* `spinbutton`
Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-valuemax |

See Also
--------

* `range` role
* `<input type="range>` element `max` attribute
* `aria-valuemin`
* `aria-valuenow`
aria-posinset
=============

The `aria-posinset` attribute defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM.

Description
-----------

Short for "position in set", the `aria-posinset` attribute defines the position of the element within the whole set of listitems or treeitems when only a subset of the items are present in the DOM.

If all the items in a list are present in the DOM, the browser can calculate the total and the position of each, making `aria-posinset` unnecessary. When only a portion of a set is in the DOM, include `aria-posinset` to provide information about the element's position within the set along with `aria-setsize` to inform the user how many items are in the full set.

The following example shows a listbox with four element options out of the 118 in the periodic table of chemical elements.


```html
<h2 id="periodic-table">Periodic table of chemical elements</h2>
<ul role="listbox" aria-labelledby="periodic-table">
  <li role="option" aria-setsize="118" aria-posinset="1">Hydrogen</li>
  <li role="option" aria-setsize="118" aria-posinset="3">Lithium</li>
  <li role="option" aria-setsize="118" aria-posinset="11">Sodium</li>
  <li role="option" aria-setsize="118" aria-posinset="19">Potassium</li>
</ul>
```


The value of each `aria-posinset` is an integer greater than or equal to `1`, and less than or equal to the size of the set when that size is known.

**Note:** When using `aria-posinset` you must also include value for `aria-setsize`, which is the size of the entire set. If the size of the entire set is unknown, set `aria-setsize="-1"`.

For `menuitem`, `menuitemcheckbox`, or `menuitemradio`, set the value of `aria-posinset` with respect to the total number of items in the menu, excluding any separators.

In a `feed`, each `<article>` element has `aria-posinset` set to a value that represents its position in the feed along with the `aria-setsize` set to either the number of articles that have been loaded or the total number in the feed, depending on which value is most helpful to users.

Values
------

`<integer>`

Integer greater than or equal to 1, and less than or equal to the value of `aria-setsize`.

Associated interfaces
---------------------

`Element.ariaPosInSet`

The `ariaPosInSet` property, part of the `Element` interface, reflects the value of the `aria-posinset` attribute.

`ElementInternals.ariaPosInSet`

The `ariaPosInSet` property, part of the `ElementInternals` interface, reflects the value of the `aria-posinset` attribute.

Associated roles
----------------

Used in roles:

* `article`
* `associationlistitemkey`
* `associationlistitemvalue`
* `comment`
* `listitem`
* `menuitem`
* `option`
* `radio`
* `row`
* `tab`

Inherits into roles:

* `comment`
* `menuitemcheckbox`
* `menuitemradio`
* `treeitem`
Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-posinset |

See Also
--------

* `aria-setsize`
aria-atomic
===========

In ARIA live regions, the global `aria-atomic` attribute indicates whether assistive technologies such as a screen reader will present all, or only parts of, the changed region based on the change notifications defined by the `aria-relevant` attribute.

Description
-----------

Live regions are sections of a web page that are updated, whether by user interaction or not, when user focus is elsewhere. As they update outside the user's focus, assistive technologies such as screen readers may not "see" the update to report it to the user. WAI-ARIA has 4 properties that allow the developer to identify these live regions and tell the assistive technology how to process them, including `aria-live`, `aria-relevant`, `aria-busy` and `aria-atomic`.

When the content of a live region changes, the DOM is traversed from the changed element through its ancestors to find the first element with `aria-atomic` set. This determines the content that the user should be presented with.

If no ancestor has explicitly set `aria-atomic`, only the node or nodes of live region content that have been updated are read. The difference between omitting `aria-atomic` altogether and explicitly setting an ARIA live region's ancestor node with `aria-atomic="false"` is that explicitly setting `aria-atomic="false"` will stop the screen reader from going up the ancestor chain. Both lead to only the updated node being read. When set to `aria-atomic="true"`, the entire changed region as a whole will be presented, including the updated node's `label`, if there is one.

Values
------

`false` (default)

present only the changed node or nodes.

`true`

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

Associated roles
----------------

Used in **ALL** roles.

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-atomic |

See Also
--------

* Event.ariaAtomic
aria-description
================

The global `aria-description` attribute defines a string value that describes or annotates the current element.

**Note:** `aria-description` is still in W3C Editor's Draft for ARIA 1.3. For the time being, continue to use `aria-describedby`, which has been supported since ARIA 1.1.

Description
-----------

The global `aria-description` attribute provides a mechanism for the developer to describe or annotate the current element providing greater context for assistive technology users.


```html
<div
 role="application"
 aria-label="calendar"
 aria-description="Game schedule for the Boston Red Sox 2021 Season">
  <h1>Red Sox 2021</h1>
  <div role="grid">…</div>
</div>
```


The `aria-description` attribute is similar to `aria-label` in that both provide a text string to associate with the element, but a label should be short and concise, while the description can be longer as it is intended to provide more context and information.

The `aria-description` and `aria-describedby` properties have the same purpose; both provide the user with additional descriptive text for the object on which it is set. If descriptive text is available in the DOM, use `aria-describedby` instead.

The `aria-description` property should only be used when providing a visible description is not the desired user experience. The `aria-describedby` attribute takes as its value a list of `id`s of the elements that contain descriptive text about the object. The `aria-description` is used when there is no appropriate descriptive text that can be associated with the object by `id` reference. If both attributes are present, `aria-describedby` takes precedence in defining the accessible description property.

The content of the description, whether set by `aria-description` or `aria-describedby`, should be flat text. If the content is very long, has semantic meaning requirements, or has a navigational structure, use `aria-details` instead.

Values
------

`<string>`

The value is a string, an unconstrained value type, that is intended to be conveyed to the assistive technology user.

Associated interfaces
---------------------

`Element.ariaDescription`

The `ariaDescription` property, part of the `Element` interface, reflects the value of the `aria-description` attribute, which defines a string value that describes or annotates the current element.

Associated roles
----------------

Used in **ALL** roles.

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-description |

See Also
--------

* HTML `title` attribute
* `aria-describedby`
* `aria-details`
aria-rowcount
=============

The `aria-rowcount` attribute defines the total number of rows in a table, grid, or treegrid.

Description
-----------

Some tables have hundreds, even millions, of rows. Even for tables with fewer rows, loading only a subsection of rows may be a design requirement, improve performance, or improve user experience. When only a subset of rows are loaded, you do need to let all users know that only a subset of the data is being displayed. The `aria-rowcount` attribute is used to define the total number of rows in a table, grid, or treegrid.

Included on the `<table>` element or on an element with a role of `table`, the value is the number of rows in the full table, as an integer. If the total number of rows is not known, include `aria-rowcount="-1"`, which tells the browser to not count the total number of rows.

If all of the rows are loaded and in the DOM, you don't need to include `aria-rowcount` as browsers automatically count the total number of rows. However, if the rows aren't all present in the DOM at any time, this attribute is needed to provide the number of rows when the full table size is known and to tell the browser to not automatically count the rows when the total number of rows is not known.

Example
-------

The following example shows a grid with 24 rows, of which the first row and rows 7 through 9 are displayed to the user.


```html
<div role="grid" aria-rowcount="24">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Position</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="7">
      <span role="gridcell">Morgan</span>
      <span role="gridcell">Brian</span>
      <span role="gridcell">Midfielder</span>
    </div>
    <div role="row" aria-rowindex="8">
      <span role="gridcell">Abby</span>
      <span role="gridcell">Dahlkemper</span>
      <span role="gridcell">Defender</span>
    </div>
    <div role="row" aria-rowindex="9">
      <span role="gridcell">Ashlyn</span>
      <span role="gridcell">Harris</span>
      <span role="gridcell">Goalkeeper</span>
    </div>
  </div>
</div>
```

Values
------

`<integer>`

The number of rows in the full table or `-1` is the table size is not known.

Associated interfaces
---------------------

`Element.ariaRowCount`

The `ariaRowCount` property, part of the `Element` interface, reflects the value of the `aria-rowcount` attribute.

`ElementInternals.ariaRowCount`

The `ariaRowCount` property, part of the `ElementInternals` interface, reflects the value of the `aria-rowcount` attribute.

Associated roles
----------------

Used in roles:

* `table`

Inherited into roles:

* `grid`
* `treegrid`
Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # aria-rowcount |

See Also
--------

* `aria-rowindex`
* `aria-colcount`