Discount Ninja
  • Discount Ninja Developer Hub
    • Storefront API
      • Promotion Engine
        • Enable
        • JavaScript API
          • Functions
          • Events
          • Objects
      • Widgets
        • Guiding principles
          • Accessibility
          • Localization
          • Integration
          • Style
        • Announcement Bar
        • Notification
        • Offer Rules Popup
        • Product Banner
        • Promotion Summary
        • Promotion Code Field
        • Promotional Badge
    • Integration
    • Theme edits
      • App blocks
        • Product Page Banner
        • Promo Code Field
        • Promotion Summary
      • Code edits
        • Product Detail Page (PDP)
          • Price
          • Banner
          • Badge
        • Product List Page (PLP) and Collections
          • Attributes
          • Price
            • Searchanise Search & Filter
            • Globo Smart Product Filter & Search (aka SPF)
            • AI Search & Product Filter (Ultimate Search)
            • Boost AI Search & Filter (aka PFS)
          • Badge
          • Pagination
          • Quick View
        • Cart
          • Root
          • Cart item
          • Promo Code Field
          • Promotion Summary
          • Subtotal
        • Gift With Purchase
Powered by GitBook
On this page
  • Coding standards
  • Alternative text
  • Meeting the Web Content Accessibility Guidelines (WCAG)
  • Assistive technology support
  • Animations
  • Keyboard
  • Visually impaired

Was this helpful?

  1. Discount Ninja Developer Hub
  2. Storefront API
  3. Widgets
  4. Guiding principles

Accessibility

PreviousGuiding principlesNextLocalization

Last updated 1 year ago

Was this helpful?

Coding standards

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

To help people who rely on assistive technologies, such as a screen reader or other text-to-speech programs, our components use for icons and images used to convey information and actions (like buttons and links).

Meeting the Web Content Accessibility Guidelines (WCAG)

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:

Assistive technology support

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

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.

Visually impaired

Discount Ninja web components detect if a user has enabled a setting on their device to . If this setting is enabled, all animations included in our web components are automatically disabled on that device.

Discount Ninja web components implement keyboard accessibility as outlined . 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.

Discount Ninja web components use accessibility semantics defined by the Accessible Rich Internet Application () 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:

Links:

Switch:

Progress bar:

Tooltip:

Checkbox:

Carousel:

Popup:

alternative text
WCAG 2.1
ARIA 1.1
minimize the amount of non-essential motion
here
ARIA
https://www.w3.org/WAI/ARIA/apg/patterns/button/
https://www.w3.org/WAI/ARIA/apg/patterns/link/
https://www.w3.org/WAI/ARIA/apg/patterns/switch/
https://www.w3.org/WAI/ARIA/apg/patterns/meter/
https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/