recursal/MDN huggingface dataset:
aria-rowspan
============

The `aria-rowspan` attribute defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

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

Similar to the `rowspan` attribute of the `<td>` and `<th>` elements, but for cells and gridcells which are not contained in a native table, the `aria-rowspan` attribute defines the number of rows spanned by a `cell` or `gridcell` within a `table`, `grid`, or `treegrid`.

This attribute is intended for cells and gridcells which are **not** part of an HTML `<table>`. When a cell is nested in a semantic `<table>`, the `rowspan` attribute should be used when a or spans more than one row. If both are present, `rowspan` takes precedence over `aria-rowspan`. But, like all ARIA attributes, `aria-rowspan` only impacts the accessibility tree. It doesn't change your layout.

**Note:** ARIA modifies the accessibility tree and how assistive technology presents content to your users. ARIA doesn't change anything about an element's function, behavior, or appearance. When using non-semantic elements, you must use CSS to manage layout and appearance.

The value of `aria-rowspan` is an integer greater than or equal to 0 and less than the value which would cause the cell or gridcell to overlap the next cell or gridcell in the same column. Setting the value to `0` indicates that the cell or gridcell is to span all the remaining rows in the row group. The default value is `1`.

Values
------

`<integer>`

An integer greater than or equal to `0` and less than would cause a cell to overlap the next cell in the same column.

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

`Element.ariaRowSpan`

The `ariaRowSpan` property, part of the `Element` interface, reflects the value of the `aria-rowspan` attribute.

`ElementInternals.ariaRowSpan`

The `ariaRowSpan` property, part of the `ElementInternals` interface, reflects the value of the `aria-rowspan` attribute.

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

Used in roles:

* `cell`

Inherited into roles:

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

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

See Also
--------

* The `rowspan` attribute on `<td>`
* `aria-rowindex`
* `aria-colspan`
aria-orientation
================

The `aria-orientation` attribute indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

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

It may be important for the user to know the orientation to know how to navigate certain widgets, as orientation impacts the expected behaviors of the left, right, up and down arrows. The `aria-orientation` attribute is used to indicate to assistive technology users whether an element's orientation is `horizontal` or `vertical`, or `undefined`.

Several widgets have default orientations:

Horizontal by default:

* `slider`,
* `tablist`
* `toolbar`
* `menubar`

Vertical by default:

* `scrollbar`
* `tree`
* `listbox`
* `menu`

Each `separator` should have `aria-orientation` consistent with the separator's orientation.

When nodes in a tree are arranged horizontally instead of its default vertical orientation, or when a tab list is vertical instead of its default horizontal, the down arrow performs as a right arrow normally would, and the up arrow performs as a left arrow normally would. In these instances, assistive technology users need to know the widget's orientation so as to navigate correctly.

Up and down arrows are generally available for normal browser scrolling, even when focus is inside a tree or tab list. Include `aria-orientation` to enable alerting users when a widget doesn't have the default, expected orientation and associated navigation.

Always remember that ARIA only modifies how assistive technology presents content to your users; altering the behavior of arrow keys requires JavaScript.

Values
------

`horizontal`

The element is oriented horizontally.

`undefined` (default)

The element's orientation is unknown/ambiguous.

`vertical`

The element is oriented vertically.

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

`Element.ariaOrientation`

The `ariaOrientation` property, part of the `Element` interface, reflects the value of the `aria-orientation` attribute.

`ElementInternals.ariaOrientation`

The `ariaOrientation` property, part of the `ElementInternals` interface, reflects the value of the `aria-orientation` attribute.

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

Used in roles:

* `scrollbar`
* `select`
* `separator`
* `slider`
* `tablist`
* `toolbar`

Inherited into roles:

* `listbox`
* `menu`
* `menubar`
* `radiogroup`
* `tree`
* `treegrid`
Specifications
--------------

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

See Also
--------

* Understanding WCAG: Keyboard
aria-multiline
==============

The `aria-multiline` attribute indicates whether a `textbox` accepts multiple lines of input or only a single line.

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

The default behavior of the `Enter` or `Return` key differs between single-line and multi-line text fields. When user focus is in a single-line `<input type="text">`, an `Enter` or `Return` keystroke usually submits the form.

When user focus is in a multi-line `<textarea>`, the keystroke inserts a line break. Only relevant for elements with the `textbox` role set, the `aria-multiline` attribute indicates to assistive technologies whether that text box accepts multiple lines of input or only a single line, setting expectations as to what type of data to enter and what those keystroke will do.

**Note:** Where possible, use the HTML `<input>` or the `<textarea>`, as these have built in semantics and behaviors, do not require ARIA attributes or scripting, and have keyboard support built in.

If the `aria-multiline="true"` is set, it means the textbox widget will accept line breaks within the input, similar to the HTML `<textarea>`. Elements with a role of `textbox` that do not have the attribute, or with the value set to `false`, are simple text box.

Be aware of focus and keystrokes when designing text boxes. ARIA only modifies the accessibility tree and therefore how assistive technology presents the textbox to your users. ARIA doesn't change anything about an element's default function or behavior. When not using semantic HTML elements for their intended purpose and default functionality, you must use JavaScript to manage behavior and functionality, including responding to keystroke events.

Values
------

`true`

The text box accepts multiple lines of input.

`false`

The text box only accepts a single line of input.

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

`Element.ariaMultiLine`

The `ariaMultiLine` property, part of the `Element` interface, reflects the value of the `aria-multiline` attribute.

`ElementInternals.ariaMultiLine`

The `ariaMultiLine` property, part of the `ElementInternals` interface, reflects the value of the `aria-multiline` attribute.

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

Used in roles:

* `textbox`

Inherits into roles:

* `searchbox`
Specifications
--------------

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

See Also
--------

* ARIA `textbox` role
* ARIA `searchbox` role
aria-relevant
=============

Used in ARIA live regions, the global `aria-relevant` attribute indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

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

ARIA live regions are areas of a web page that are updated when user's attention may be elsewhere. When an update is outside of the user's keyboard focus, assistive technologies such as screen readers use a live region area to report updates to the user.

Examples of live regions include news marquees, stock tickers, chat windows, and score boards. These update without user interaction. Some updates are important for the user to know about. They're relevant. Others are not. The `aria-relevant` is used to describe what types of changes have occurred to an `aria-live` region, and which are relevant and should be announced.

The value is a space-separated list of change types, including `additions`, `removals`, and `text`, with a shorthand `all` meaning all three.

When `aria-relevant` is not defined, the value is inherited from the nearest ancestor with a defined value. Inherited values are not additive; the value provided on a descendant element completely overrides any inherited value from an ancestor element. When a live region doesn't have an `aria-relevant` attribute set and has no ancestor with it set, it defaults to `additions text`, because generally text modifications and node additions are relevant, but node removals are not.

While not a supported value, if the value of `none` makes the most sense, it should not be a live region.

The values of `removals` and `all` should be used sparingly. For example, when a goal happens in the World Cup, the new score (the addition) is important, the old value (the removal) is not. Assistive technologies only need to be informed of content removal when its removal represents an important change, such as a when a player is taken out of the game.

Values
------

`additions`

Element nodes are added to the accessibility tree within the live region.

`all`

Shorthand for `additions removals text`.

`removals`

Text content, a text alternative, or an element node within the live region is removed from the accessibility tree.

`text`

Text content or a text alternative is added to any descendant in the accessibility tree of the live region.

`additions text` (default)

Element nodes are added to the accessibility tree within the live region AND text content or a text alternative is added to any descendant in the accessibility tree of the live region.

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

`Element.ariaRelevant`

The `ariaRelevant` property, part of the `Element` interface, reflects the value of the `aria-relevant` attribute.

`ElementInternals.ariaRelevant`

The `ariaRelevant` property, part of the `ElementInternals` interface, reflects the value of the `aria-relevant` attribute.

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

Used in **ALL** roles.

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

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

See Also
--------

* `aria-atomic`
* `aria-live`
* `aria-busy`
* ARIA live regions
aria-grabbed
============

The `aria-grabbed` state indicates an element's "grabbed" state in a drag-and-drop operation. 
Deprecated

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

Text selections, images, and links can be dragged by default. Setting the global `draggable="true"` attribute, part of HTML5's Drag and Drop API, with a `dragstart` event handler, means any DOM node can be made draggable as well.

The `aria-grabbed` attribute was used to indicate if an element is in a "grabbed" state in a drag-and-drop operation with `aria-grabbed="true"` or if that the element is grabbable, but not currently grabbed with `aria-grabbed="false"`.

Setting `aria-grabbed="true"` indicated the element had been selected for dragging. Setting `aria-grabbed="false"` indicated that the element could be grabbed for a drag-and-drop operation, but is not currently grabbed.

When `aria-grabbed` is set to `true`, the `aria-dropeffect` attribute of all potential drop targets should be updated with the type of function, or effect, will occur to the grabbed element when it is dropped. When no element is in a grabbed state, revert the `aria-dropeffect` attributes of all your drop targets.

The `aria-grabbed` property is expected to be replaced by a new feature in a future version of WAI-ARIA and is considered deprecated.

**Note:** ARIA does not enable accessible functionality. ARIA only conveys the intended behavior of your functionality.

Values
------

`true`

The element has been selected for dragging.

`false`

The element is not currently selected for dragging, but can be made available for dragging by setting the property to `true`.

`undefined` (default)

The element does not support being dragged

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

Used in **ALL** roles

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

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

See Also
--------

* `aria-dropeffect`
* HTML global `draggable` attribute
* HTML Drag and Drop API
* `dataTransfer`
* `DataTransfer.dropEffect`
* `dragstart`
* Accessible Drag and Drop by Gez Lemon
aria-pressed
============

The `aria-pressed` attribute indicates the current "pressed" state of a toggle button.

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

Adding `aria-pressed` to an element with a role of `button` turns the button into a toggle button. The `aria-pressed` attribute is only relevant for toggle buttons. It represents the button's current "pressed" state.

The value is "tri-state", meaning the value can be set to `true`, `false`, `mixed`, or `undefined` values. In the case of `aria-pressed`, like most tri-state value types, the default value is `undefined`.

Toggle buttons require a full press-and-release cycle to change their value. Pressing and releasing it once changes the value to `true`. If it's pressed and released again, the value changes back to `false`.

A value of `mixed` means that the values of more than one item controlled by the button do not all share the same value.

Do not change the contents of the label on a toggle when the state changes. If a button label says "pause", do not change it to "play" when pressed. In this example, when the pressed state is true, the label remains "Pause" so a screen reader would say something like "Pause toggle button pressed".


```html
<button aria-pressed="false">Pause</button>
```


If you want the label to toggle between "Paused" and "Play", don't use `aria-pressed`.

The first rule of ARIA use is "if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so." If we employ native HTML semantics with `<button>`, we can toggle the label instead of toggling the pressed state, removing the need for the `aria-pressed` attribute.

Values
------

`false`

The button supports being pressed but is not currently pressed.

`mixed`

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

`true`

The button is pressed.

`undefined` (default)

The element does not support being pressed.

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

`Element.ariaPressed`

The `ariaPressed` property, part of the `Element` interface, reflects the value of the `aria-pressed` attribute.

`ElementInternals.ariaPressed`

The `ariaPressed` property, part of the `ElementInternals` interface, reflects the value of the `aria-pressed` attribute.

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

Used in roles:

* `button`
Specifications
--------------

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

See Also
--------

* `<input type="button">`
* `<input type="submit">`
* `<button>`
* `aria-checked`
* `aria-selected`
aria-valuetext
==============

The `aria-valuetext` attribute defines the human-readable text alternative of `aria-valuenow` for a range widget.

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

Numbers — even percentages — aren't always user-friendly. Assistive technologies present `aria-valuenow` as numeric values. If a progress bar is at 8%, what does that mean? `aria-valuetext` provides a way of presenting the current value in a more user-friendly, human-understandable way. For example, a battery meter value might be conveyed as `aria-valuetext="8% (34 minutes) remaining"`.

The `aria-valuetext` attribute is used with the `aria-valuenow` attribute, not instead of it, unless that value is not known.

`aria-valuetext` is only needed when the numeric value of `aria-valuenow` is not meaningful. For example, a range's values are numeric but may be used for non-numeric values, such as college class level. The values of `aria-valuenow` for a 4-year college could range from 1 through 4, which indicate the position of each value in the value space. In this case, the `aria-valuetext` could be one of the strings: "first year", "sophomore", "junior", and "senior".

If the numeric value is meaningful, such as a spinner with `aria-valuenow="3"` for how many pizza slices you want to order, `aria-valuetext` is not needed.

When both the `aria-valuetext` and `aria-valuenow` are included, the `aria-valuetext` is announced. When there is no `aria-valuetext` attribute, assistive technologies will announce the `aria-valuenow` attribute for the current value.

Values
------

`<string>`

A human-readable text alternative of the `aria-valuenow` value.

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

`Element.ariaValueText`

The `ariaValueText` property, part of the `Element` interface, reflects the value of the `aria-valuetext` attribute.

`ElementInternals.ariaValueText`

The `ariaValueText` property, part of the `ElementInternals` interface, reflects the value of the `aria-valuetext` attribute.

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

Used in roles:

* `range`
* `separator`
* `spinbutton`

Inherited into roles:

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

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

See Also
--------

* `aria-valuenow`
aria-sort
=========

The `aria-sort` attribute indicates if items in a table or grid are sorted in ascending or descending order.

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

If a grid or table provides sort functionality, the `aria-sort` attribute should be set to either `ascending` or `descending` (or `other`) on the header cell element for the sorted column or row.

The `aria-sort` attribute is only set on the currently sorted column or row. Set `aria-sort="ascending"` to indicate the data cells in the column or row are sorted in ascending order. If the sort order is reversed, toggle the value to `aria-sort="descending"`. When a different column or row becomes sorted, the single `aria-sort` attribute is moved to the header cell for the newly sorted column or row with the appropriate value for the sort order.

The `aria-sort` attribute should only be added to a single table or grid header at a time. The attribute is set to inform assistive technology users which column or row is sorted. It doesn't have any impact on the actual sort order.

Examples
--------

This table loads with the last name column sorted in ascending order.


```html
<table>
  <caption>
    Steering Committee Members
  </caption>
  <thead>
    <tr>
      <th>
        <button>First Name</button>
      </th>
      <th aria-sort="ascending">
        <button>Last Name</button>
      </th>
      <th>
        <button>Company</button>
      </th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    …
  </tbody>
</table>
```


If a user clicks on the *Last Name* button, `aria-pressed="true"` would be added to the `<button>` element and the `aria-sort` value would be toggled to `"descending"` with JavaScript. If the user clicks on a different header button, the `aria-sort` would be removed from the *Last Name* header to be placed on the clicked button's `<th>` parent.

We provided instructions in the caption for assistive technology who may not see the down arrows that we would add with CSS targeting the `th[aria-sort="ascending"]` and `th[aria-sort="descending"]` selectors.

Values
------

`ascending`

Items are sorted in ascending order by this column.

`descending`

Items are sorted in descending order by this column.

`none` (default)

There is no defined sort applied to the column.

`other`

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

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

`Element.ariaSort`

The `ariaSort` property, part of the `Element` interface, reflects the value of the `aria-sort` attribute.

`ElementInternals.ariaSort`

The `ariaSort` property, part of the `ElementInternals` interface, reflects the value of the `aria-sort` attribute.

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

Used in roles:

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

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

See Also
--------

* Sortable table example -W3C
* `aria-pressed`
* The `<th>` element
aria-flowto
===========

The global `aria-flowto` attribute identifies the next element (or elements) in an alternate reading order of content. This allows assistive technology to override the general default of reading in document source order at the user's discretion.

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

Web pages should be sequentially navigable. For this reason, developers are dissuaded from using the global tabindex attribute which can change tab order and the CSS `order` property, which can change visual order from the DOM order. However, in rare circumstances a reading path different from the source order is required. For such cases, the `aria-flowto` attribute can make the content more accessible for users of assistive technologies.

The global `aria-flowto` attribute lets the author indicate to assistive technology users which element or elements might want to be focused on next, providing an alternate reading order to the source order. This allows assistive technology to read a document in an order other than the default document source reading order.

When `aria-flowto` has a single id reference, it allows assistive technologies to, at the user's request, go to the element targeted via that `id` instead of reading the document in the order of the DOM. When the `aria-flowto` value uses a space separated list of multiple `id` references, assistive technology can provide the user with a list of path choices, with each `id` referenced being a choice. The path choice names are determined by the accessible name of each target element of the `aria-flowto` attribute.

**Note:** Setting `aria-flow` does not impact the content's tab order. It only provides users the option to follow a content path that doesn't match the DOM order when using tech that supports this attribute.

Values
------

`id`

Suggested next element in the reading order.

`id` list

Space separated list of ID values referencing the suggested elements the user may want to go to next in the alternate reading order of content.

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

Used in **ALL** roles.

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

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

See Also
--------

* HTML id attribute
* HTML tabindex attribute
* CSS `order` property
* WCAG: source order
* Using aria-flowto - W3 Wiki