# Accessibility
> Designing an accessible product lets people of all abilities interact with, understand, and navigate it without facing any issues.

## Understanding accessibility

Wave believes that software must be accessible to all users with diverse abilities.

An accessible product must:

- Give all users the same quality of experience
- Adapt to users and situations

<Card
  href="https://volue.sharepoint.com/:p:/s/DesignTeam9108/EShO7f94TcZBrylywL0w2CIBNtrSyKy15I4eKOvFH4P6bg?e=8bPspf"
  subTitle="Learn more about accessibility"
  title="Why accessibility - PowerPoint"
  actionIcon="externalLink"
/>

> **Tip**
>
> All elements and components of Wave are compliant and following the Web Content Accessibility Guidelines.

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
  className="mTm"
>
  <GridItem>
    <Card
      href="https://www.w3.org/WAI/standards-guidelines/wcag/"
      subTitle="WCAG"
      title="Web Content Accessibility Guidelines"
      actionIcon="externalLink"
    />
  </GridItem>
  <GridItem>
    <Card
      href="https://www.w3.org/WAI/WCAG22/quickref/"
      subTitle="WCAG 2.2"
      title="How to Meet WCAG (Quick Reference)"
      actionIcon="externalLink"
    />
  </GridItem>
</Grid>

---

## Accessibility with React

We are striving to:

- build Wave components using semantically correct markup with appropriate ARIA (the [Accessible Rich Internet Application standard](https://www.w3.org/TR/wai-aria-1.2/)) attributes to help the users of assistive technologies identify and use them.
- handle accessibility concerns related to focus management and keyboard navigation.

> **Testing of the product is required**
>
> Even when using Wave components to build your products, make sure to always test your products before releasing them to publicity.

Please, contact the Wave team if you'll notice that any of our components are not passing the WCAG 2.0 AA.

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
  className="mTm"
>

  <GridItem>
    <Card
      href="https://reactjs.org/docs/accessibility.html"
      title="React's accessibility guidelines"
      actionIcon="externalLink"
    />
  </GridItem>
  <GridItem>
    <Card
      href="https://www.w3.org/WAI/ARIA/apg"
      title="WAI ARIA Authoring Practices"
      actionIcon="externalLink"
    />
  </GridItem>
</Grid>