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

The global `aria-braillelabel` property defines a string value that labels the current element, which is intended to be converted into Braille.

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

The global `aria-braillelabel` attribute is similar to the global `aria-label` in that it defines a string value that labels the current element. While `aria-label` is read by the screen reader, the contents of the `aria-braillelabel` attribute are converted into Braille; providing the user with a recognizable name of the object in Braille.

The purpose of the `aria-braillelabel` property is to override how assistive technologies localize and express the accessible name of an element in Braille and should only be used when accessible name, without this attribute, when converted to Braille, would not be the desired user experience.

When using `aria-braillelabel`, ensure that:

* The element to which `aria-braillelabel` is applied has a valid accessible name.
* The value of aria-braillelabel has actual content and is not empty or only whitespace in unicode or unicode Braille.
* The value is NOT the same as the accessible name.
* The `aria-braillelabel` values are localized to align with the document language.
* Communicate to the user that this attribute is available, especially if the content contains Unicode Braille Patterns, so the user knows to set the settings to apply user specific braille translations

**Note:** Assistive Technologies with braille support can convert the accessible names to Braille.
 Therefore, only use `aria-braillelabel` when the accessible name is not the user experience you want.


Using only the accessible name, e.g., from content or via `aria-label` is almost always the better user experience, so don't use aria-braillelabel to replicate aria-label. Only use `aria-braillelabel` if the accessible name cannot provide an adequate braille representation.


```html
<button aria-braillelabel="\*\*\*">
  <img alt="3 out of 5 stars" src="three\_stars.png" />
</button>
```


A braille display may display "btn \*\*\*" in Braille rather than the more verbose "btn gra 3 out of 5 stars".

Values
------

`<string>`

The value is a string, an unconstrained value type, that is intended to be converted into Braille.

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

Used in **ALL** roles.

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

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

See Also
--------

* `aria-label`
* `aria-brailleroledescription`
aria-readonly
=============

The `aria-readonly` attribute indicates that the element is not editable, but is otherwise operable.

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

When you want to indicate that an interactive element works but is not editable, set `aria-readonly="true"`. This indicates to the user that an interactive element that would normally be focusable and copyable has been placed in a read-only (not disabled) state.

When `aria-readonly` is set to `true`, it means the user can read but not set the value of the widget. Read-only elements are still relevant to the user, so you should not prevent the user from navigating to the element or its focusable descendants or copying the value.

Examples include:

* Form elements which should not be changed.
* Row and column headers in a spreadsheet.
* The total value in a shopping cart.

If the non-changeable value shouldn't be able to receive focus, use `aria-disabled` instead.

**Note:** When using semantic HTML form controls, if you set the `readonly` attribute, you don't need to include `aria-readonly="true"`.

**Note:** The value of `<input type="checkbox">` can not be edited making `readonly` not relevant. However, when creating checkboxes with `role="checkbox"` the `aria-readonly` attribute *is* supported.

Values
------

`true`

The element is readonly.

`false` (default)

The element is not readonly.

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

`Element.ariaReadOnly`

The `ariaReadOnly` property, part of the `Element` interface, reflects the value of the `aria-readonly` attribute.

`ElementInternals.ariaReadOnly`

The `ariaReadOnly` property, part of the `ElementInternals` interface, reflects the value of the `aria-readonly` attribute.

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

Used in roles:

* `checkbox`
* `combobox`
* `grid`
* `gridcell`
* `listbox`
* `radiogroup`
* `slider`
* `spinbutton`
* `textbox`

Inherited into roles:

* `columnheader`
* `rowheader`
* `searchbox`
* `switch`
* `treegrid`
Specifications
--------------

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

See Also
--------

* HTML `readonly` attribute
* `aria-disabled`
Robust
======

This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the **Robust** principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Robust states that content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This can generally be achieved by following web standards and testing rigorously.

**Note:** To read the W3C definitions for Robust and its guidelines and success criteria, see Principle 4: Robust — Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Guideline 4.1 — Compatible: Maximize compatibility with current and future user agents, including assistive technologies
------------------------------------------------------------------------------------------------------------------------

This guideline focuses on making content as compatible as possible, not only with current user agents (e.g. browsers), but also with future ones too.

| Success criteria | How to conform to the criteria | Practical resource |
| --- | --- | --- |
| 4.1.1 Parsing (A) | 
 Content should be well-formed so it can be parsed successfully by
 browsers and other user agents such as screen readers.


 To pass this criterion, make sure that your HTML is as valid as
 possible. Use the
 W3C validator to validate your
 markup.
  | 
 See
 Debugging HTML
 for a practical guide.
  |
| 4.1.2 Name, Role, Value (A) | 
 The name and role of user interface components (e.g. form inputs,
 buttons, links, etc.) should be programmatically determinable.


 When using semantic elements correctly for their intended purpose,
 this criterion should be passed automatically. When scripting custom
 components, you will need to use WAI-ARIA roles and other features to
 make sure your controls will be interpreted and are able to be used as
 intended, e.g. not only by sighted mouse users, but also by
 screen reader users, keyboard-only users, etc.
  | 
 See
 HTML: A good basis for accessibility
 and
 WAI-ARIA basics.
  |
| 4.1.3 Status Messages (AA) *added in 2.1* | 
 Assistive technology users are made aware of new status messages added
 to the page.
  | Understanding Status Messages |

**Note:** Also see the WCAG description for Guideline 4.1: Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

See also
--------

* WCAG
    1. Perceivable
    2. Operable
    3. Understandable
    4. Robust
Use of color
============

While color contrast is often primarily an aesthetic choice, the *use of color* on a website pertains to *using color to communicate information*. WCAG guideline 1.4.1 on the use of color requires that "color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

Solution
--------

Use another factor in addition to color to convey information. For example, to indicate form validation errors, you can change the labels of the relevant fields by another font attribute as well as by color. Icons and symbols should differ by shape as well as by color.

To accommodate users with color vision disorders ("color blindness"), be careful when using a "stoplight" color metaphor, with green indicating "good" values and red indicating "bad" values. Users with red-green color blindness have trouble distinguishing red and green, and so may not be able to tell these values apart. Using an additional factor to signal "good" vs. "bad" is necessary. Avoid pure red and green in this situation; a reddish-orange and a bluish-green are distinguishable by color blind users, while still conveying the cultural "good" and "bad" meanings to users with normal color vision. Color contrast can be helpful in this context, as well, if one color is darker or lighter than the other.

Related WCAG success criteria
-----------------------------

1.4.1 Use of color (A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

See also
--------

* Understanding Success Criterion 1.4.1: Use of Color
* Color contrast
* Color and color contrast in the Accessibility tutorials
CSS Counter Styles
==================

The CSS Counter Styles module allows to define custom counter styles, which can be used for CSS list-marker and generated-content counters.

Interfaces
----------

`CSSCounterStyleRule`

Represents an `@counter-style` rule.

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-csscounterstylerule-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS counter styles module
* Using CSS counters
Beacon API
==========

The **`Beacon`** API is used to send an asynchronous and non-blocking request to a web server. The request does not expect a response. Unlike requests made using `XMLHttpRequest` or the Fetch API, the browser guarantees to initiate beacon requests before the page is unloaded and to run them to completion.

The main use case for the Beacon API is to send analytics such as client-side events or session data to the server. Historically, websites have used `XMLHttpRequest` for this, but browsers do not guarantee to send these asynchronous requests in some circumstances (for example, if the page is about to be unloaded). To combat this, websites have resorted to various techniques, such as making the request synchronous, that have a bad effect on responsiveness. Because beacon requests are both asynchronous and guaranteed to be sent, they combine good performance characteristics and reliability.

For more details about the motivation for and usage of this API, see the documentation for the `navigator.sendBeacon()` method.

**Note:** This API is *not available* in Web Workers (not exposed via `WorkerNavigator`).

Interfaces
----------

This API defines a single method: `navigator.sendBeacon()`.

The method takes two arguments, the URL and the data to send in the request. The data argument is optional and its type may be a `TypedArray`, a `DataView`, a `Blob`, a string literal or object, or a `FormData` object. If the browser successfully queues the request for delivery, the method returns "`true`"; otherwise, it returns "`false`".

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

| Specification |
| --- |
| Beacon # sendbeacon-method |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Beacon standard
* Beacon CanIUse data
* Intercepting beacons through service workers; Ehsan Akhgari; 2015-Apr-08
* https://webkit.org/blog/8821/link-click-analytics-and-privacy/
* Beaconing in Practice
FederatedCredential
===================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`FederatedCredential`** interface of the Credential Management API provides information about credentials from a federated identity provider. A federated identity provider is an entity that a website trusts to correctly authenticate a user, and that provides an API for that purpose. OpenID Connect is an example of a federated identity provider framework.

**Note:** The Federated Credential Management API (FedCM) provides a more complete solution for handling identity federation in the browser, and uses the `IdentityCredential` type.

In browsers that support it, an instance of this interface may be passed in the `credential` member of the `init` object for global `fetch()`.

Credential

FederatedCredentialConstructor
-----------

`FederatedCredential()` 
Experimental

Creates a new `FederatedCredential` object.

Instance properties
-------------------

*Inherits properties from its ancestor, `Credential`.*

`FederatedCredential.provider` Read only  
Experimental

Returns a string containing a credential's federated identity provider.

`FederatedCredential.protocol` Read only  
Experimental

Returns a string containing a credential's federated identity protocol.

### Event handlers

None.

Instance methods
----------------

None.

Examples
--------


```js
const cred = new FederatedCredential({
  id,
  name,
  provider: "https://account.google.com",
  iconURL,
});

// Store it
navigator.credentials.store(cred).then(() => {
  // Do something else.
});
```

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

| Specification |
| --- |
| Credential Management Level 1 # federated |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGVKernElement
===============

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`SVGVKernElement`** interface corresponds to the `<vkern>` elements.

Object-oriented access to the attributes of the `<vkern>` element via the SVG DOM is not possible.

Instance properties
-------------------

*This interface has no properties but inherits properties from its parent, `SVGElement`.*

Instance methods
----------------

*This interface has no methods but inherits methods from its parent, `SVGElement`.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGVKernElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<vkern>`
HmacKeyGenParams
================

The **`HmacKeyGenParams`** dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating a key for the HMAC algorithm.

Instance properties
-------------------

`name`

A string. This should be set to `HMAC`.

`hash`

A string representing the name of the digest function to use. You can pass any of `SHA-1`, `SHA-256`, `SHA-384`, or `SHA-512` here.

`length` Optional

A `Number` — the length in bits of the key. If this is omitted, the length of the key is equal to the block size of the hash function you have chosen. Unless you have a good reason to use a different length, omit this property and use the default.

Examples
--------

See the examples for `SubtleCrypto.generateKey()`.

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

| Specification |
| --- |
| Web Cryptography API # dfn-HmacKeyGenParams |

Browser compatibility
---------------------

Browsers that support the "HMAC" algorithm for the `SubtleCrypto.generateKey()` method will support this type.

See also
--------

* `SubtleCrypto.generateKey()`.
Text
====

The **`Text`** interface represents a text `node` in a DOM tree.

EventTarget

Node

CharacterData

Text
To understand what a text node is, consider the following document:


```html
<html lang="en" class="e">
  <head>
    <title>Aliens?</title>
  </head>
  <body>
    Why yes.
  </body>
</html>
```


In that document, there are five text nodes, with the following contents:

* `"\n "` (after the `<head>` start tag, a newline followed by four spaces)
* `"Aliens?"` (the contents of the `title` element)
* `"\n "` (after the `</head>` end tag, a newline followed by two spaces)
* `"\n "` (after the `<body>` start tag, a newline followed by two spaces)
* `"\n Why yes.\n \n\n"` (the contents of the `body` element)

Each of those text nodes is an object that has the properties and methods documented in this article.

Constructor
-----------

`Text()`

Returns a new `Text` node with the parameter as its textual content.

Instance properties
-------------------

*Inherits properties from its parents, `CharacterData`, `Node`, and `EventTarget`.*

`Text.assignedSlot` Read only 

Returns a `HTMLSlotElement` representing the `<slot>` the node is inserted in.

`Text.wholeText` Read only 

Returns a string containing the text of all `Text` nodes logically adjacent to this `Node`, concatenated in document order.

Instance methods
----------------

*Inherits methods from its parent, `CharacterData`, `Node`, and `EventTarget`.*

`Text.splitText`

Breaks the node into two nodes at a specified offset.

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

| Specification |
| --- |
| DOM Standard # interface-text |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The DOM API
GPUUncapturedErrorEvent
=======================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`GPUUncapturedErrorEvent`** interface of the WebGPU API is the event object type for the `GPUDevice` `uncapturederror` event, used for telemetry and to report unexpected errors.

Known error cases should be handled using `pushErrorScope()` and `popErrorScope()`.

Event

GPUUncapturedErrorEventConstructor
-----------

`GPUUncapturedErrorEvent()` 
Experimental

Creates a new `GPUUncapturedErrorEvent` object instance.

Instance properties
-------------------

*Inherits properties from its parent, `Event`.*

`error` 
Experimental
 Read only 

A `GPUError` object instance providing access to the details of the error.

Examples
--------

You could use something like the following as a global mechanism to pick up any errors that aren't handled by error scopes and capture them.


```js
// ...

device.addEventListener("uncapturederror", (event) => {
  // Re-surface the error
  console.error("A WebGPU error was not captured:", event.error.message);
  reportErrorToServer({
    type: event.error.constructor.name,
    message: event.error.message,
  });
});

// ...
```

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

| Specification |
| --- |
| WebGPU # gpuuncapturederrorevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
* WebGPU Error Handling best practices
SVGLinearGradientElement
========================

The **`SVGLinearGradientElement`** interface corresponds to the `<linearGradient>` element.

EventTarget

Node

Element

SVGElement

SVGGradientElement

SVGLinearGradientElementInstance properties
-------------------

*This interface also inherits properties from its parent, `SVGGradientElement`.*

`SVGLinearGradientElement.x1` Read only 

An `SVGAnimatedLength` corresponding to the `x1` attribute of the given `<linearGradient>` element.

`SVGLinearGradientElement.y1` Read only 

An `SVGAnimatedLength` corresponding to the `y1` attribute of the given `<linearGradient>` element.

`SVGLinearGradientElement.x2` Read only 

An `SVGAnimatedLength` corresponding to the `x2` attribute of the given `<linearGradient>` element.

`SVGLinearGradientElement.y2` Read only 

An `SVGAnimatedLength` corresponding to the `y2` attribute of the given `<linearGradient>` element.

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGGradientElement`.*

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGLinearGradientElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStream Image Capture API
=============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **MediaStream Image Capture API** is an API for capturing images or videos from a photographic device. In addition to capturing data, it also allows you to retrieve information about device capabilities such as image size, red-eye reduction and whether or not there is a flash and what they are currently set to. Conversely, the API allows the capabilities to be configured within the constraints what the device allows.

MediaStream image capture concepts and usage
--------------------------------------------

The process of retrieving an image or video stream happens as described below. The example code is adapted from Chrome's Image Capture examples.

First, get a reference to a device by calling `MediaDevices.getUserMedia()`. The example below says give me whatever video device is available, though the `getUserMedia()` method allows more specific capabilities to be requested. This method returns a `Promise` that resolves with a `MediaStream` object.


```js
navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // Do something with the stream.
});
```


Next, isolate the visual part of the media stream. Do this by calling `MediaStream.getVideoTracks()`. This returns an array of `MediaStreamTrack` objects. The code below assumes that the first item in the `MediaStreamTrack` array is the one to use. You can use the properties of the `MediaStreamTrack` objects to select the one you need.


```js
const track = mediaStream.getVideoTracks()[0];
```


At this point, you might want to configure the device capabilities before capturing an image. You can do this by calling `applyConstraints()` on the track object before doing anything else.


```js
let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// Check whether zoom is supported or not.
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });
```


Finally, pass the `MediaStreamTrack` object to the `ImageCapture()` constructor. Though a `MediaStream` holds several types of tracks and provides multiple methods for retrieving them, the ImageCapture constructor will throw a `DOMException` of type `NotSupportedError` if `MediaStreamTrack.kind` is not `"video"`.


```js
let imageCapture = new ImageCapture(track);
```

Interfaces
----------

`ImageCapture` 
Experimental

An interface for capturing images from a photographic device referenced through a valid `MediaStreamTrack`.

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

| Specification |
| --- |
| MediaStream Image Capture # imagecaptureapi |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `MediaStream`
* `MediaStreamTrack`