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

## Understanding accessibility

Vera 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"
/>

<Callout variant="tip">
  All elements and components of Vera are compliant and following the Web
  Content Accessibility Guidelines.
</Callout>

<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.uutilsynet.no/wcag-standarden/wcag-20-standarden/86"
      subTitle="uutilsynet"
      title="WCAG 2.0-standarden"
      actionIcon="externalLink"
    />
  </GridItem>
</Grid>

---

## Accessibility with React

We are striving to:

- build Vera 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.

<Callout variant="important" title="Testing of the product is required">
  Even when using Vera components to build your products, make sure to always
  test your products before releasing them to publicity.
</Callout>

Please, contact the Vera 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>