# Accessibility in Airkit

## What is Web Accessibility?

When a website is accessible, it is designed so that people with a diverse range of hearing, movement, sight, speech, physical, and cognitive abilities can effortlessly navigate it. Making websites accessible for everyone is essential to bring down communication and interaction barriers.

Web accessibility also benefits those without a specific disability, like people using devices with small screens or different input modes as well as older people with changing abilities due to aging. People with “temporary disabilities” such as a broken arm or people with “situational limitations” such as in bright sunlight also put accessibility to good use.

Airkit provides builders with the tools to create apps that are flexible and dynamic but above all, accessible; that’s why we are committed to constantly upgrading our product and delivering an inclusive digital experience.

## Accessibility indicators in Airkit

Building apps that are accessible to all end users is possible in Airkit. The following properties can be found across controls in the studio. If you use the following controls listed out, you can build apps that are [WCAG 2.1](https://www.w3.org/TR/WCAG21/) compliant.

### Aria-label

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-8e50a86ffa6ac0d337db989e222f13c88cd6eb91%2Faccessibility-in-airkit-v182-0.png?alt=media)

The aria-label attribute defines a string value that labels an interactive element to provide it with its accessible name in cases where the default denomination in the user interface is missing, or does not accurately describe its contents, and there is no content visible in the DOM that can be associated with the object to give it meaning. This makes it easier for screen-readers to parse content.

The Aria-label property can be found in the following Web Controls in the Inspector section of the Studio under **General > Control Properties**:

* [Button](../../web-controls/button-web-control)
* [Checkbox](../../web-controls/checkbox-web-control)
* [Checkbox List](../../web-controls/checkbox-list-web-control)
* [Container](../../web-controls/container-web-control)
* [Credit Card](../../web-controls/credit-card-web-control)
* [Currency Input](../../web-controls/currency-input-web-control)
* [Date Picker](../../web-controls/date-picker-web-control)
* [Dropdown List](../../web-controls/dropdown-list-web-control)
* [Email Input](../../web-controls/email-input-web-control)
* [Embedded External Content (Container)](../../web-controls/embedded-external-content-container)
* [File Upload](../../web-controls/file-upload-web-control)
* [Image](../../web-controls/image-web-control)
* [Map](../../web-controls/map-web-control)
* [Number Input](../../web-controls/number-input-web-control)
* [Payment Request Button](../../web-controls/payment-request-button-web-control)
* [Phone Input](../../web-controls/phone-input-web-control)
* [Place Search Input](../../web-controls/place-search-input-web-control)
* [Progress Bar](../../web-controls/progress-bar-web-control)
* [Radio Button](../../web-controls/radio-button-web-control)
* [Radio Button List](../../web-controls/radio-button-list-web-control)
* [Scheduler](../../web-controls/scheduler-web-control)
* [Secure String Input](../../web-controls/secure-text-input-web-control)
* [Selectable Container](../../web-controls/selectable-container)
* [Signature](../../web-controls/signature-control)
* [Text Area](../../web-controls/text-area-web-control)
* [Text Input](../../web-controls/text-input-web-control)
* [QR Code](../../web-controls/qr-code)

### Alt Text

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-b2b8e70c47e2763d5bea0f60a51029ce8c060eda%2Faccessibility-in-airkit-v182-1.png?alt=media)

Alt Text is a snippet of text that describes the content of an image. Descriptive titles and captions allow programs designed for the visually impaired to scan and process the images.Without descriptive text, the program may skip the image altogether or offer a notice to the user that no description is offered.

This is also a beneficial tool for SEO and serves as text placeholder when images are slow or fail to load.

The Alt Text property can be found in the following Controls in the Inspector section of the Studio under **General > Control Properties**

* Image
* QR Code

### Focus

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-8da8de7c9b9ee8218057f6aced5aed3720a5b1dd%2Faccessibility-in-airkit-v182-2.png?alt=media)

Focus makes reference to the Control on the screen (a field, a checkbox, a button, or link) that is currently receiving an input from the keyboard or clipboard. Focusable elements help users who do not or can not use the mouse to interact with the computer through the keyboard controls alone.

The following Controls support a focusable element:

* [Button](../../web-controls/button-web-control)
* [Checkbox](../../web-controls/checkbox-web-control)
* [Currency Input](../../web-controls/currency-input-web-control)
* [Date Picker](../../web-controls/date-picker-web-control)
* [Email Input](../../web-controls/email-input-web-control)
* [Hyperlink](../../web-controls/hyperlink-web-control)
* [Number Input](../../web-controls/number-input-web-control)
* [Phone Input](../../web-controls/phone-input-web-control)
* [Place Search Input](../../web-controls/place-search-input-web-control)
* [Secure String Input](../../web-controls/secure-text-input-web-control)
* [Text Area](../../web-controls/text-area-web-control)
* [Text Input](../../web-controls/text-input-web-control)

> 📘 Modals also have a focus property that allow users to move around using the Tab key without selecting an element outside of it.

## Testing your app for accessibility

We recommend you test your app accessibility by using a screen reader or an end-user equivalent setup. Being familiar with these mechanisms is also a must to flag usability issues. Tools such as [Continuum Explorer Pro](https://chrome.google.com/webstore/detail/continuum-explorer-pro/pgkgokkkoamjdmbnegbedepbhbgecplj?hl=en-US) can help identify technical problems and provide a good report but bear in mind it won’t actually solve them.
