Conceptos básicos de accesibilidad

npx create-expo-app@latest MyA11yApp --template blank-typescript
cd MyA11yApp

import { Pressable, Text, StyleSheet } from "react-native";
 
export function SaveButton({ onPress }: { onPress: () => void }) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel="Guardar cambios"
      onPress={onPress}
      style={styles.button}
    >
      <Text style={styles.label}>Guardar</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  button: { backgroundColor: "#2563eb", padding: 14, borderRadius: 8 },
  label: { color: "#fff", fontWeight: "600", textAlign: "center" },
});

import { Pressable, Text, StyleSheet } from "react-native";
 
export function IconButton({
  label,
  onPress,
}: {
  label: string;
  onPress: () => void;
}) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      hitSlop={12}
      onPress={onPress}
      style={styles.hit}
    >
      <Text style={styles.icon} accessibilityElementsHidden>
        ⋮
      </Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  hit: { minWidth: 44, minHeight: 44, alignItems: "center", justifyContent: "center" },
  icon: { fontSize: 22 },
});

import { Pressable, Text, View, StyleSheet } from "react-native";
 
export function ArticleCard({ title, onOpen }: { title: string; onOpen: () => void }) {
  return (
    <View style={styles.card}>
      <Text accessibilityRole="header" style={styles.title}>
        {title}
      </Text>
      <Pressable accessibilityRole="link" accessibilityLabel={`Leer ${title}`} onPress={onOpen}>
        <Text style={styles.link}>Leer artículo</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  card: { padding: 16, gap: 8 },
  title: { fontSize: 20, fontWeight: "700" },
  link: { color: "#2563eb" },
});

import { Pressable, Text, StyleSheet } from "react-native";
 
type FilterChipProps = {
  label: string;
  selected: boolean;
  onPress: () => void;
};
 
export function FilterChip({ label, selected, onPress }: FilterChipProps) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ selected }}
      onPress={onPress}
      style={[styles.chip, selected && styles.chipSelected]}
    >
      <Text style={styles.chipText}>{label}</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  chip: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 16, backgroundColor: "#e2e8f0" },
  chipSelected: { backgroundColor: "#2563eb" },
  chipText: { fontWeight: "600" },
});

import { Image, Text, View, StyleSheet } from "react-native";
 
export function PromoBanner() {
  return (
    <View style={styles.banner}>
      <Image
        source={require("./assets/sparkle.png")}
        style={styles.sparkle}
        accessible={false}
        importantForAccessibility="no"
      />
      <Text accessibilityRole="header">Venta de verano - 20% de descuento</Text>
      <View
        accessible={false}
        importantForAccessibility="no-hide-descendants"
        style={styles.rule}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  banner: { padding: 16, gap: 8 },
  sparkle: { width: 24, height: 24, position: "absolute", right: 8, top: 8 },
  rule: { height: 1, backgroundColor: "#cbd5e1" },
});

import { Image, StyleSheet } from "react-native";
 
export function UserAvatar({ uri, name }: { uri: string; name: string }) {
  return (
    <Image
      source={{ uri }}
      style={styles.avatar}
      accessibilityRole="image"
      accessibilityLabel={`Foto de perfil de ${name}`}
    />
  );
}
 
export function DecorativeDivider() {
  return (
    <Image
      source={require("./assets/wave.png")}
      style={styles.wave}
      accessible={false}
      importantForAccessibility="no"
    />
  );
}
 
const styles = StyleSheet.create({
  avatar: { width: 48, height: 48, borderRadius: 24 },
  wave: { width: "100%", height: 8 },
});

import { useEffect, useState } from "react";
import { AccessibilityInfo, Pressable, Text, View, StyleSheet } from "react-native";
 
export function CartBadge({ count }: { count: number }) {
  const [lastAnnounced, setLastAnnounced] = useState(count);
 
  useEffect(() => {
    if (count !== lastAnnounced) {
      AccessibilityInfo.announceForAccessibility(
        count === 0 ? "El carrito está vacío" : `${count} artículos en el carrito`,
      );
      setLastAnnounced(count);
    }
  }, [count, lastAnnounced]);
 
  return (
    <View
      accessibilityRole="text"
      accessibilityLabel={`Carrito, ${count} artículos`}
      accessibilityLiveRegion="polite"
      style={styles.badge}
    >
      <Text>{count}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  badge: { minWidth: 28, minHeight: 28, borderRadius: 14, backgroundColor: "#dc2626", alignItems: "center", justifyContent: "center" },
});

import { Pressable, Text, View, StyleSheet } from "react-native";
 
export function ProductRow({
  name,
  price,
  rating,
  onPress,
}: {
  name: string;
  price: string;
  rating: string;
  onPress: () => void;
}) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={`${name}, ${price}, calificado ${rating} de cinco`}
      onPress={onPress}
      style={styles.row}
    >
      <View importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
        <Text style={styles.name}>{name}</Text>
        <Text style={styles.price}>{price}</Text>
        <Text style={styles.rating}>{rating} ★</Text>
      </View>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  row: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: "#e2e8f0" },
  name: { fontSize: 16, fontWeight: "600" },
  price: { color: "#64748b" },
  rating: { color: "#f59e0b" },
});

import { useEffect, useState } from "react";
import { AccessibilityInfo, Text, View } from "react-native";
 
export function useA11yPreferences() {
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
 
  useEffect(() => {
    AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled);
    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotionEnabled);
 
    const screenReaderSub = AccessibilityInfo.addEventListener(
      "screenReaderChanged",
      setScreenReaderEnabled,
    );
    const motionSub = AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      setReduceMotionEnabled,
    );
 
    return () => {
      screenReaderSub.remove();
      motionSub.remove();
    };
  }, []);
 
  return { screenReaderEnabled, reduceMotionEnabled };
}
 
export function MotionAwareHint() {
  const { screenReaderEnabled } = useA11yPreferences();
 
  return (
    <View>
      <Text accessibilityRole="header">Pedidos</Text>
      {screenReaderEnabled ? (
        <Text>Pasa el dedo hacia la derecha a través de la lista para escuchar cada pedido.</Text>
      ) : null}
    </View>
  );
}

Lista de verificación por pantalla (5 minutos):
1. Activa VoiceOver / TalkBack
2. Pasa el dedo a través de cada elemento enfocable - no hay "button" sin etiqueta
3. Activa la acción principal - escucha confirmación o el enfoque se mueve
4. Rota a horizontal (tableta) - el orden sigue siendo lógico
5. Aumenta la escala de fuente al máximo - sin acciones principales recortadas
6. Activa Reducir movimiento - sin animación requerida para completar la tarea

// Helper solo para desarrollo - registra el árbol en __DEV__
import { AccessibilityInfo, Pressable, Text } from "react-native";
 
export function DevA11yLog({ label }: { label: string }) {
  if (!__DEV__) return null;
 
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={`Registra árbol de accesibilidad para ${label}`}
      onPress={() => AccessibilityInfo.isScreenReaderEnabled().then(console.log)}
    >
      <Text>Registra estado a11y ({label})</Text>
    </Pressable>
  );
}

<Pressable hitSlop={10} style={{ minHeight: 44, justifyContent: "center" }} />