Доступность

Компоненты Astra копируются к вам в проект, а значит доступность — общая ответственность. Компоненты приезжают с разумными ролями и подписями там, где намерение однозначно, но компонент не может знать, для чего кнопка в вашем приложении. Эта часть — ваша.

На этой странице — что вы получаете по умолчанию и что проверить перед релизом.

Уменьшение движения

Astra — библиотека анимаций, поэтому уважать эту настройку важнее всего. Пользователь, включивший «Уменьшение движения» на уровне системы, говорит вам, что движение вызывает у него дискомфорт: вестибулярные расстройства и чувствительность к движению встречаются часто.

React Native отдаёт эту настройку через AccessibilityInfo:

import { AccessibilityInfo } from "react-native";
import { useEffect, useState } from "react";

export function useReducedMotion() {
  const [reduced, setReduced] = useState(false);

  useEffect(() => {
    AccessibilityInfo.isReduceMotionEnabled().then(setReduced);

    const sub = AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      setReduced,
    );
    return () => sub.remove();
  }, []);

  return reduced;
}

У Reanimated есть и свой хук — обычно это более короткий путь:

import { useReducedMotion } from "react-native-reanimated";

const reduced = useReducedMotion();

Пользуйтесь им, чтобы укоротить или пропустить переход, а не чтобы убрать отклик целиком — мгновенная смена состояния всё равно сообщает, что произошло:

const reduced = useReducedMotion();

const style = useAnimatedStyle(() => ({
  opacity: withTiming(visible ? 1 : 0, { duration: reduced ? 0 : 300 }),
}));

Подписи и роли

Всему, с чем пользователь может что-то сделать, нужны роль и доступное имя. Элементам из одной иконки имя нужно больше всех: у экранного диктора нет текста, на который можно опереться.

<Pressable
  accessible
  accessibilityRole="button"
  accessibilityLabel="Add to favourites"
  onPress={onPress}
>
  <HeartIcon />
</Pressable>

Роли, которые стоит знать:

Декоративную графику лучше скрывать, а не подписывать, чтобы она не создавала шум:

<View accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
  <DecorativeGlow />
</View>

Состояние

Элемент, который меняется, должен объявлять новое состояние, а не только выглядеть иначе:

<Pressable
  accessibilityRole="switch"
  accessibilityState={{ checked: enabled }}
  accessibilityLabel="Dark mode"
  onPress={toggle}
>
  <GooeySwitch value={enabled} />
</Pressable>

Для всего, что имеет диапазон, число несёт accessibilityValue:

<View
  accessibilityRole="adjustable"
  accessibilityLabel="Volume"
  accessibilityValue={{ min: 0, max: 100, now: volume }}
>
  <ElasticSlider value={volume} onChange={setVolume} />
</View>

Размер зоны нажатия

Обе платформы советуют минимальную область нажатия — 44×44 pt на iOS, 48×48 dp на Android. Маленькой иконке не обязательно расти ради этого; расширьте вместо неё саму зону:

<Pressable hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}>
  <SmallIcon />
</Pressable>

Цвет и контраст

Компоненты Astra наследуют цвет из пропсов, которые вы передаёте, так что контраст целиком в ваших руках. WCAG AA требует 4,5:1 к фону для основного текста и 3:1 для крупного текста и значимых элементов интерфейса.

Два места, за которыми стоит следить в интерфейсе, насыщенном анимацией:

• Градиентные и шейдерные фоны — проверяйте контраст в самой светлой и самой тёмной точке градиента, а не в среднем.
• Цвет как единственный сигнал — если состояние передаётся только цветом, добавьте иконку, подпись или форму, чтобы оно пережило дальтонизм.

Проверка

Включите экранные дикторы и походите по приложению, не глядя на него:

• iOS — Настройки → Универсальный доступ → VoiceOver
• Android — Настройки → Специальные возможности → TalkBack

Затем проверьте путь с движением: Настройки → Универсальный доступ → Движение → Уменьшение движения (iOS) или Настройки → Специальные возможности → Убрать анимации (Android).

Сообщить о пробеле

Если компонент приехал без подписи, с недостижимым элементом или с анимацией, которая игнорирует уменьшение движения, — это ошибка. Пожалуйста, напишите в Telegram-канал Astra (ссылка на сайте) и укажите имя компонента и то, какой вспомогательной технологией вы пользовались.