Accessibility States
Accessibility states are specific attributes that can be added to a component to communicate its current status to assistive technology.
aria-busy
Severity: SeriousIndicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.1
| Type | Default |
|---|---|
| boolean | false |
Expectations
- When: The user triggers (double tap) a component
- And: The component is performing a long (or async) task
- Then: The Screen Reader announces the component as busy
- And: The component is performing a long (or async) task
Example
Assuming we have a button that adds the given product ID to the cart, which requires an API call:
const AddToCart = ({ productID }: { productID: string }) => {
const { addToCart, isAddingToCart } = useQuery(ADD_TO_CART);
const onPress = async () => {
const result = await addToCart();
};
return (
<Pressable
accessibilityLabel="Add to cart"
accessibilityRole="button"
ariaBusy={isAddingToCart}
onPress={isAddingToCart ? undefined : onPress}
>
{isAddingToCart} ? <ActivityIndicator /> : <Text>Add to cart</Text>
</Pressable>
);
};
In the example, while the adding action is happening, the button:
- Ignores any press action
- Shows a loading spinner
While this works fine for sighted users, we must add the ariaBusy={isAddingToCart} property for visually impaired users.
Screen Reader behaviour
The user double taps on the example component:
| Voice Over | Talkback |
|---|---|
| plays a sound as confirmation |
The user focuses again on the component while the API is still in flight:
| Voice Over | Talkback |
|---|---|
| Add to cart, busy, button, double tap to activate |
aria-checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
| Type | Default |
|---|---|
| boolean, 'mixed' | false |
aria-disabled
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
| Type | Default |
|---|---|
| boolean | false |
aria-expanded
Indicates whether an expandable element is currently expanded or collapsed.
| Type | Default |
|---|---|
| boolean | false |
aria-selected
Indicates whether a selectable element is currently selected or not.
| Type | Default |
|---|---|
| boolean | false |