# Accessibility

## Coding standards <a href="#coding-standards" id="coding-standards"></a>

Discount Ninja widgets start with web standards for HTML, CSS, and JavaScript. Features from the Accessible Rich Internet Applications (WAI-ARIA or ARIA) specification are used to build functionality that is not available in native HTML.

## Alternative text <a href="#alternative-text" id="alternative-text"></a>

To help people who rely on assistive technologies, such as a screen reader or other text-to-speech programs, our components use [alternative text](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt) for icons and images used to convey information and actions (like buttons and links).

## Meeting the Web Content Accessibility Guidelines (WCAG) <a href="#meeting-the-web-content-accessibility-guidelines-wcag" id="meeting-the-web-content-accessibility-guidelines-wcag"></a>

Discount Ninja targets WCAG 2.1 Level A and Level AA success criteria, and seeks to provide a highly usable experience for everyone.

For more information, see the following resources:

* [WCAG 2.1](https://www.w3.org/TR/WCAG21/)
* [ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/)

## Assistive technology support <a href="#assistive-technology-support" id="assistive-technology-support"></a>

Discount Ninja web components are tested for accessibility with automated and manual techniques. Users should expect to be able to access features built with our components using modern assistive technologies. These include native and third-party tools like:

* Screen readers
* Speech recognition programs
* Supports for low vision and color blindness
* Alternative keyboards
* Switch devices
* Tools for readability

## Animations

Discount Ninja web components detect if a user has enabled a setting on their device to [minimize the amount of non-essential motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences). If this setting is enabled, all animations included in our web components are automatically disabled on that device.

## Keyboard

Keyboard accessibility is an important aspect of web accessibility. Many users with motor disabilities rely on a keyboard. Users without disabilities may use a keyboard for navigation because of preference or efficiency.

Discount Ninja web components implement keyboard accessibility as outlined [here](https://webaim.org/techniques/keyboard/). Essentially, the widgets allow users to use the `Tab` key to navigate through interactive elements and use `Enter` or `Spacebar` to activate links and buttons. Support for `Left`, `Right`, `Up,` and `Down` arrows, as well as the `Home` and `End` keys are available in controls that show lists. The `Escape` key allows users to close widgets if applicable.

## Visually impaired

Discount Ninja web components use accessibility semantics defined by the Accessible Rich Internet Application ([ARIA](https://www.w3.org/TR/wai-aria-1.1/)) specification to help you create accessible web experiences for visually impaired users. Here are some of the patterns that are implemented by the components:

* Buttons: <https://www.w3.org/WAI/ARIA/apg/patterns/button/>
* Links: <https://www.w3.org/WAI/ARIA/apg/patterns/link/>
* Switch: <https://www.w3.org/WAI/ARIA/apg/patterns/switch/>
* Progress bar: <https://www.w3.org/WAI/ARIA/apg/patterns/meter/>
* Tooltip: <https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/>
* Checkbox: <https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/>
* Carousel: <https://www.w3.org/WAI/ARIA/apg/patterns/carousel/>
* Popup: <https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/>