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-haspopupIndicates the availability and type of interactive popup element, such as menu or dialog. Addaria-readonlyif the user cannot modify the value. Addaria-keyshortcutsIndicates keyboard shortcuts that an author has implemented to activate or give focus to an element.| | **TimerAria** | role='timer' | Addrole='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. Addaria-labelto provide the name of the timer. Addaria-liveto explicitly denote a live region (Elements with the role timer have an implicit aria-live value of off). Addaria-describedbyto indicate the idref of an element that contains additional instructions for navigating or operating this element. Addaria-roledescriptiono give the timer a more descriptive role text for screen readers to speak. Addaria-atomicto 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' | Userole='textbox'on elements that allow input of free-form text. Addaria-activedescendantto indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Addaria-autocompleteto indicate if the textbox will display a list of suggestions. Usearia-multilineif the textbox can contain multiple lines of input. Addaria-placeholderto give users a hint of what the input should contain. Addaria-readonlyif the user cannot modify the value. Addaria-requiredif the field is required.| | **CellAria** | role='cell' | Addsrole='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!

License

accessibility-snippets is provided under the MIT license.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!