# 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/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.discountninja.io/discount-ninja-developer-hub/storefront-api/widgets/guiding-principles/accessibility.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.