import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import {
  Button,
  FilterIcon,
  Text,
  Link,
  Box,
  Head1,
  UnstyledButton,
  TertiaryButton,
} from '../../src';

<Meta title="Manual/4 - Accessibility" />

# Building Accessible Applications with Patchwork

Patchwork is designed to be completely accessible when used properly. Generally all of the components within patchwork are _accessible in isolation_. The documents in this section should help you make sure you are writing accessible UIs.

Preface: There are a few things to consider when building an entirely accessible application. We've outlined <a href="https://wealthsimple.quip.com/SOTJAKAU2wQA/A11y-Manual-Testing-Guide-Web-Edition">some of those accessibility testing rules here</a>

## CTAs and Clickable Components

Most designs contain "calls to action" (CTAs). These take the form of links, buttons, and other clickable elements. There are a few things to keep in mind.

<TertiaryButton
  href={'/?path=/story/components-actions-accessibility-tips--page'}
>
  Accessible CTAs
</TertiaryButton>

## Semantic Headers

Screen readers use H1..H6 tags to generate navigation shortcuts for non-sighted users. This means we need to pay attention to the page's header structure.

<TertiaryButton
  href={'/?path=/story/components-typography-accessibility-tips--page'}
>
  Accessible Headers
</TertiaryButton>

## Colour Contrast

Coming soon

## Form Inputs

Coming soon

## Live Display Regions

Coming soon

## Images and Icons

Coming soon

## Radio buttons

Coming soon

## Range Sliders

Coming soon

## Complex Custom Controls

Coming soon
