Accessibility-snippets NPM

Features

CSS snippet

Snippet	Description	Note
reduced motion	Adds a reduced motion snippet with prefix `transition`	N/A
less-contrast	Adds less contrast media snippet with prefix `less-contrast`	🚨 Safari Only Queries 🚨
dark-color-scheme	Adds dark prefers-color-scheme snippet with prefix `darkColorScheme`	N/A
light-color-scheme	Adds light prefers-color-scheme snippet with prefix `lightColorScheme`	N/A

React Aria Snippets

Snippet	Role	Description
AlertAria	role='alert'	Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live="assertive" and aria-atomic="true".
AlertDialogAria	role='alertDialog'	Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls.
ArticleAria	role='article'	Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed.
BannerAria	role='banner'	Add `role='banner'` to define a banner landmark to assistive technologies. A banner landmark is informative content frequently placed at the beginning of the page.
ButtonAria	role='button'	Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse.
CheckboxAria	role='checkbox'	Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox.
ComboboxAria	role='combobox'	Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns.
DialogAria	role='dialog'	Add `role='dialog'` to a window separate from the rest of the webpage like a modal.
DocumentAria	role='document'	Add `role='document'` to application or other interactive widget role to switch to browse or read mode. Add `aria-expanded` to indicate whether the document is currently expanded or collapsed if the document element is collapsible.
FeedAria	role='feed'	Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed.
FigureAria	role='figure'	Add `role='figure'` to identify a figure inside page content where appropriate semantics do not already exist. Add `aria-labelledby` when the text is a concise label. Add `aria-describedby` when the text is a longer description. Add `aria-label` if there is no element containing text that could serve as a label.
ImageAria	role='img'	Add `role='img'` to identify a set of content as a single image that has multiple elements. Elements can be images, text, emojis or other content that delivers information visually. Add `aria-label` for descriptive alt text for the image. `aria-label` can be replaced with `aria-labelledby` if descriptive text is provide in another element within the role.
LinkAria	role='link'	Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label.
ListAria	role='list'	Add `role='list'` to elements that act as list.
ListItemAria	role='list-item'	Add `role='list-item'` to elements that act as list-item contained inside the list.
MeterAria	role='meter'	Add `role='meter'` to identify an element being used as a meter. A meter is a graphical display of a numeric value within a defined range. Each element must have either an `aria-label` or `aria-labelledby`. Add `aria-labelledby` to point to an element with text that describes the meter. Add `aria-valuenow` to indicate the current value of the meter, which is between the `aria-valuemin` and `aria-valuemax`. Add `aria-valuetext` to make the meter value understandable. Add `aria-valuemin` to indicate the minimum value, which is less than `aria-valuemax`. Add `aria-valuemax` to indicate the maximum value, which is greater than `aria-valuemin`.
LoadingAria	role='status'	Add `role='status'` and `aria-live='polite'` to element wrapping a loading spinner or indicator. The live region must be present in the DOM before the loading indicator has rendered. Add `aria-label='Loading'` to loading indicator if no other text element or content is passed.
RadioAria	role='radio'	Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox.
SeperatorAria	role='separator'	Add `role='separator'` to a HR tag.Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. There are set default values 0. 100 and 50 respectively and can be modified. Setting `aria-seperator` automatically sets aria-orientation = 'horizontal'.
SearchboxAria	role='searchbox'	Add `role='searchbox'` to a textbox intended for specifying search criteria. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.
SliderAria	role='slider'	Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.
SwitchAria	role='switch'	Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required.
TextboxAria	role='textbox'	Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.
TabPanelAria	role='tabpanel'	"Use `role='tabpanel'` on elements that contains the content associated with a tab. Add `aria-controls` identifies the element (or elements) whose contents or presence are controlled by the current element (For example a tab controls the display of its associated tab panel). Add `aria-labelledby` Identifies the element (or elements) that labels the current element. Add `aria-details to identify the element that provides a detailed, extended description for the object. Add`aria-haspopup`Indicates the availability and type of interactive popup element, such as menu or dialog. Add`aria-readonly`if the user cannot modify the value. Add`aria-keyshortcuts` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
TimerAria	role='timer'	Add `role='timer'` to indicate to assistive technologies that an element is a numerical counter listing the amount of elapsed time from a starting point or the remaining time until an end point. Add `aria-label` to provide the name of the timer. Add `aria-live` to explicitly denote a live region (Elements with the role timer have an implicit aria-live value of off). Add `aria-describedby` to indicate the idref of an element that contains additional instructions for navigating or operating this element. Add `aria-roledescription` o give the timer a more descriptive role text for screen readers to speak. Add `aria-atomic` to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes.
SliderAria	role='slider'	Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.
CellAria	role='cell'	Adds `role='cell'` aria attributes for a cell. A cell is identified as an element in a tabular container that does not contain column or row header information. “cells” are only valid within a construct that simulates a standard data table.

Rules of ARIA

The first rule of ARIA is try to use native HTML elements instead of aria attributes whenever possible.
The second rule of ARIA is do not change native HTML semantics, unless you really have to.
Avoid:
```
<h2 role=tab>heading tab</h2>
```
Instead:
```
<div role=tab><h2>heading tab</h2></div>
```
The third rule of ARIA all aria controls must be usable by the keyboard.
The fourth rule of ARIA do not use role='presentation' and aria-hidden='true' on focusable elements.
The fifth rule of ARIA all interactive elements must have accessible names.

Installation

Please follow the VSCode instructions to install accessibility-snippets in your editor:

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_install-snippets-from-the-marketplace

Once installed Navigate to Settings in vscode's preferences menu and toggle on Editor: Accept Suggestion On Enter
Controls whether suggestions should be accepted on Enter, in addition to Tab. Helps to avoid ambiguity between inserting new lines or accepting suggestions.

Testing

Run yarn test from the project root to run the unit test suites.

Contributing

Contributions are welcome! If you encounter problems or have a feature suggestion we'd love to hear about it. Open an issue in the GitHub issue tracker and we will do our best to provide support. Thank you!