Building accessible UI components with Ariakit
Tags: a11y, ariakit
Published: 2023-03-12 21:41:19

by [Ejiro Thankgod](https://blog.openreplay.com/authors/ejiro-thankgod)


The aim of developers is to lower the obstacles to engagement and communication that many people experience in the real world. In terms of accessibility, the goal is to develop tools and solutions that anyone can use, regardless of their level of ability, the software or hardware, and the location they employ.

[Ariakit](https://ariakit.org/) is a low-level, open-source component toolkit for creating React-based, accessible online applications. We'll show you how to quickly and simply create accessible web applications using Ariakit's components.


## Ariakit?

[Ariakit](https://ariakit.org/) is a component library for React that allows you to create applications, design systems, and high-level UI frameworks that are accessible. All components have the right characteristics and keyboard interactions out of the box, and it fully adheres to [WAI-ARIA](https://www.w3.org/TR/wai-aria/) requirements.

Each small, modular Ariakit component only increases your bundle's size by a few bytes to up to 3 kB. It is unstyled by default to allow for full modification.

## The fundamentals of Ariakit.

Ariakit is made up of many components and hooks. Attributes and States are the two types of props that each component accepts.


- `Attribute` Props: An attribute is a characteristic of an element that allows access to additional data needed for that element's particular processing of the result. Such props are `className` and `id`.


- `State` Props: For managing and passing the components data such as the `useHovercardState`, `useFormState`, and `useComboboxState`.

## Prerequisites

You will require the following to continue with the article:

- Working knowledge of JavaScript 
- Basic familiarity with React.js 
- Most recent Node.js version on your computer
Setting up and Installing Ariakit

Start by launching your command-line application. Using the Vite CLI, you can install React if you don't already have a project:
```shell
npm create vite@latest
```
    
After running the command above, follow the prompt and create your React project. Once completed, the installation of Ariakit and its dependencies can now be started by moving into the project folder by entering the command below:

```shell
cd <project folder>
npm install
npm install ariakit
npm run dev
```

After running the above command, we move into our project via the code editor and create some components.



<h2>Session Replay for Developers</h2> 
<p><em>
Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data
</em></p>
<img alt="OpenReplay" width="768" height="400" src="https://blog.openreplay.com/assets/overview_Z17Qdyg.png" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em>




## Ariakit components

Ariakit is a low-level library, yet a high-level API exports all its components. They are, therefore, simpler to use and less complex than other low-level libraries.


### Buttons

Users can select options and perform actions by tapping buttons. Buttons convey the actions that users can do. They typically appear in various locations throughout your user interface (UI), including toolbars, modal windows, forms, and cards.

All we have to do is create a `button` component under our `App` function, and if we want the button to look more like a link, we'd add an `a` tag to it. 

```javascript
import { Button } from "ariakit/button";
import "./App.css";
export default function App() {
  return <Button className="button">Button</Button>;
}
```

So we created a button component with a class attribute button for styling. In our CSS file, we'll have a hover function in which whenever our pointer overs through the button, it switches color between green and red.


![--](https://blog.openreplay.com/images/building-ariakit-accessible-ui-components/images/s_1BD1203AD4A55C4ABEF47A866FF3A340B912E8D7731A87C32D382DE6F5777606_1674495205201_bu.gif)



### Dialog

A specific type of modal window called a dialog is displayed in front of the app's content to provide crucial information or request feedback. When they appear, dialogs turn off all program functioning and stay on screen until they are acknowledged, dismissed, or necessary action is made.

Here, we'll have to import components such as `Button`, `Dialog`, `dialogDismiss`,  `DialogHeading`, and `useDialogState`.

```javascript
import { Button } from "ariakit/button";
import {
  Dialog,
  DialogDismiss,
  DialogHeading,
  useDialogState,
} from "ariakit/dialog";
import "./App.css";
export default function App() {
  const dialog = useDialogState();
  return (
    <>
      <p>"Lorem ipsum dolor sit amet, consectetur adipis..."</p>
      <Button onClick={dialog.toggle} className="button">
        Click To Confirm
      </Button>
      <Dialog state={dialog} className="dialog">
        <h2 className="heading">Affirmed!</h2>
        <p className="description">
          You have successfully confirmed your interest in the ongoing
          contract. We have emailed you further details.
        </p>
        <div>
          <DialogDismiss className="button">OK</DialogDismiss>
        </div>
      </Dialog>
    </>
  );
}

```

From the above code, we assigned the `useDialogState` hook to a variable and passed an empty value to it. We also create our dialog with the `dialog` component, the `DialogHeading` to create a pop-up header, and `DialogDimiss` as a button component to close the header.


![--](https://blog.openreplay.com/images/building-ariakit-accessible-ui-components/images/s_1BD1203AD4A55C4ABEF47A866FF3A340B912E8D7731A87C32D382DE6F5777606_1674497402826_bu2.gif)




### ComboBox

An input value must be selected from a preset range of permitted values to use the combo box's autocomplete (a text input improved by a panel of suggested possibilities) and autosuggest functionalities. To create a combo box component, we'll import the `Combobox`, `ComboboxItem`, `Comboboxpopover`, and `useComboboxState`.

```javascript
import {
  Combobox,
  ComboboxItem,
  ComboboxPopover,
  useComboboxState,
} from "ariakit/combobox";
import "./App.css";

export default function App() {
  const combobox = useComboboxState({ gutter: 4, sameWidth: true });
  return (
    <div className="wrapper">
      <label className="label">
        What would you like?
        <Combobox
          state={combobox}
          placeholder="e.g., 🍕 Pizza"
          className= "combobox"
        />
      </label>
      <ComboboxPopover state={combobox} className="popover">
        <ComboboxItem className="combobox-item" value="food1">
          🍔 Hamburger
        </ComboboxItem>
        <ComboboxItem className="combobox-item" value="food2">
          🥞 Pancakes
        </ComboboxItem>
        <ComboboxItem className="combobox-item" value="food3">
          🍨 Ice Cream
        </ComboboxItem>
        <ComboboxItem className="combobox-item" value="food4">
          🍿 Popcorn
        </ComboboxItem>
        <ComboboxItem className="combobox-item" value="food5">
          🍪 Cookies
        </ComboboxItem>
      </ComboboxPopover>
    </div>
  );
}

```

From the above code block, we create a `state` hook to a variable and pass a value to it. Then we use the `Combobox`, `ComboboxItem`, and `Comboboxpopover`  components to create select, options, and popover elements, respectively.


![--](https://blog.openreplay.com/images/building-ariakit-accessible-ui-components/images/s_1BD1203AD4A55C4ABEF47A866FF3A340B912E8D7731A87C32D382DE6F5777606_1675182383364_ar5.gif)


### Disclosure

A list of high-level options on a disclosure display can be expanded or collapsed to disclose more details. To reveal (expand, open) or conceal (collapse, close) a content element in a Tab, click on the corresponding button. For Disclosure, we'll import `Disclosure`, `DisclosureContnent`, and `useDisclosureState`.

```javascript
import {
  Disclosure,
  DisclosureContent,
  useDisclosureState,
} from "ariakit/disclosure";
import "./App.css";
export default function App() {
  const disclosure = useDisclosureState();
  return (
    <div className="wrapper">
      <Disclosure state={disclosure} className="button">
        What are your thoughts?
      </Disclosure>
      <DisclosureContent state={disclosure} className="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </DisclosureContent>
    </div>
  );
}    
```

We'll use the `useDisclosureState` hook to set the `Disclosure` element to a default value while the `DisclosureContent` serves as a dropdown to expand the disclosed content.

![--](https://blog.openreplay.com/images/building-ariakit-accessible-ui-components/images/s_1BD1203AD4A55C4ABEF47A866FF3A340B912E8D7731A87C32D382DE6F5777606_1674505819042_bu4.gif)

### Form

Submit data using React's easily accessed interactive controls. Form validation contexts like "Type," "Pattern," and "Required" are built-in elements by Ariakit.
To use the Form component, we must import the `Form`, `FormError`, `FormInput`, `FormLabel`, `FormSubmit`, `useFormState`.

```javascript
import {
  Form,
  FormError,
  FormInput,
  FormLabel,
  FormReset,
  FormSubmit,
  useFormState,
} from "ariakit/form";
import "./App.css";
export default function Example() {
  const form = useFormState({ defaultValues: { name: "", email: "" } });
  form.useSubmit(async () => {
    alert(JSON.stringify(form.values));
  });
  return (
    <Form
      state={form}
      aria-labelledby="add-new-participant"
      className= "wrapper"
    >
      <h2 id="add-new-participant" className="heading">
        Fill in Data
      </h2>
      <div className="field">
        <FormLabel name={form.names.name}>Name</FormLabel>
        <FormInput name={form.names.name} required placeholder=" John Doe"/>
        <FormError name={form.names.name} className="error" />
      </div>
      <div className="field">
        <FormLabel name={form.names.email}>Email</FormLabel>
        <FormInput
          type= "email"
          name={form.names.email}
          required
          placeholder="johndoe@example.com"
        />
        <FormError name={form.names.email} className="error" />
      </div>
      <div className="buttons">
        <FormReset className="button secondary reset">Reset</FormReset>
        <FormSubmit className="button">Add</FormSubmit>
      </div>
    </Form>
  );
}
```


After that, we assign the `useFormState` hook to a variable and pass an empty value to it. Next, we create the form with the `Form` component, also the `FormLabel` and `FormInput` components to add as many fields. For the `FormError` component serves as a restriction when a user inputs invalid details as well as the `FormSubmit` to submit the form once filled.


![--](https://blog.openreplay.com/images/building-ariakit-accessible-ui-components/images/s_1BD1203AD4A55C4ABEF47A866FF3A340B912E8D7731A87C32D382DE6F5777606_1674505559323_Screenshot+2023-01-23+at+21.06.11.png)

### HoverCard

To assist the user in choosing and learning more about the selected element, you can show a label when the cursor hovers over it. When users hover over an element, HoverCard displays a Popover with more details. We'll import the `HoverCard`, `HovercardAnchor`, `HovercardHeading`, and `useHovercardState` for this component.

```javascript
import {
  Hovercard,
  HovercardAnchor,
  HovercardHeading,
  useHovercardState,
} from "ariakit/hovercard";
import "./App.css";
export default function App() {
  const hovercard = useHovercardState({ gutter: 16 });
  return (
    <div className="wrapper">
      <HovercardAnchor
        state={hovercard}
        href="https://twitter.com/Dev_Boy_"
        className= "anchor"
      >
        @Dev_Boy_
      </HovercardAnchor>
      <Hovercard state={hovercard} className="hovercard">
        <img
          src="https://media.istockphoto.com/id/517671745/photo/water-explosion.jpg"
          alt= "Ejineroz"
          className= "avatar"
        />
        <HovercardHeading className="username">Ejineroz</HovercardHeading>
        <p>Tap the follow button to get updates.</p>
        <a href="https://twitter.com/Dev_Boy_" className="button">
          Follow
        </a>
      </Hovercard>
    </div>
  );
} 
```


As usual, the `useHovercardState` hook will be assigned to a variable, and a default value will be passed onto it. The `HovercardAnchor` component is similar to an anchor tag for a link element so that when we click, it links to a URL.


![--](https://blog.openreplay.com/images/building-ariakit-accessible-ui-components/images/s_1BD1203AD4A55C4ABEF47A866FF3A340B912E8D7731A87C32D382DE6F5777606_1674505590156_bu5.gif)


## Conclusion

An Ariakit component covers the majority of specifications needed to create complete web applications. Although Ariakit's documentation still needs to be improved as of this writing, the website does include a sizable number of component example files.

The tutorial has come to a close. In this tutorial, we learned how to create web components using the Ariakit library in conjunction with a front-end framework React.


## Resources
- [Ariakit](https://ariakit.org/)
- [React](https://react.org/)




[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)