gedu · gedu · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
@@ -69,6 +69,8 @@ export default function HomeScreen() {
         getItemLayout={getItemLayout}
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}
+        accessibilityLabel="Cryptocurrency list"
+        accessibilityState={{ busy: isLoading }}
       />
     </View>
   );

diff --git a/components/text.tsx b/components/text.tsx
@@ -15,12 +15,18 @@ export function Text({
   lightColor,
   darkColor,
   type = 'default',
+  accessibilityRole,
   ...rest
 }: ThemedTextProps) {
   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
 
+  const resolvedRole =
+    accessibilityRole ??
+    (type === 'title' || type === 'subtitle' ? 'header' : undefined);
+
   return (
     <RNText
+      accessibilityRole={resolvedRole}
       style={[
         { color },
         type === 'default' ? styles.default : undefined,

diff --git a/features/home/components/coin-logo.tsx b/features/home/components/coin-logo.tsx
@@ -1,18 +1,21 @@
 import { Image } from 'expo-image';
 import { StyleSheet } from 'react-native';
+import type { AccessibilityProps } from 'react-native';
 
-interface CoinLogoProps {
+interface CoinLogoProps extends AccessibilityProps {
   uri?: string;
   size?: number;
 }
 
-export const CoinLogo = ({ uri, size = 32 }: CoinLogoProps) => (
+export const CoinLogo = ({ uri, size = 32, ...accessibilityProps }: CoinLogoProps) => (
   <Image
     source={uri ? { uri } : null}
     style={[styles.logo, { width: size, height: size, borderRadius: size / 2 }]}
     contentFit="contain"
     transition={150}
     cachePolicy="disk"
+    accessibilityRole="image"
+    {...accessibilityProps}
   />
 );
 

diff --git a/features/home/components/coin-row.tsx b/features/home/components/coin-row.tsx
@@ -4,7 +4,7 @@ import { View } from '@/components/view';
 import { Text } from '@/components/text';
 import { CoinLogo } from '@/features/home/components/coin-logo';
 import { CHANGE_COLORS, COIN_ITEM_HEIGHT } from '@/features/home/config';
-import { formatChange, formatPrice } from '@/features/home/utils';
+import { coinAccessibilityLabel, formatChange, formatPrice } from '@/features/home/utils';
 import type { CmcCoin } from '@/types/cmc';
 
 interface CoinRowProps {
@@ -17,16 +17,21 @@ export function CoinRow({ coin, logoUrl }: CoinRowProps) {
   const changeColor = change >= 0 ? CHANGE_COLORS.positive : CHANGE_COLORS.negative;
 
   return (
-    <View style={styles.coinRow}>
-      <Text style={styles.rank}>#{coin.cmc_rank}</Text>
-      <CoinLogo uri={logoUrl} size={32} />
-      <View style={styles.coinInfo}>
-        <Text type="defaultSemiBold">{coin.name}</Text>
-        <Text style={styles.symbol}>{coin.symbol}</Text>
+    <View
+      accessible={true}
+      accessibilityRole="text"
+      accessibilityLabel={coinAccessibilityLabel(coin)}
+      style={styles.coinRow}
+    >
+      <Text accessible={false} style={styles.rank}>#{coin.cmc_rank}</Text>
+      <CoinLogo accessible={false} uri={logoUrl} size={32} />
+      <View accessible={false} style={styles.coinInfo}>
+        <Text accessible={false} type="defaultSemiBold">{coin.name}</Text>
+        <Text accessible={false} style={styles.symbol}>{coin.symbol}</Text>
       </View>
-      <View style={styles.coinPrices}>
-        <Text type="defaultSemiBold">{formatPrice(coin.quote.USD.price)}</Text>
-        <Text style={[styles.change, { color: changeColor }]}>
+      <View accessible={false} style={styles.coinPrices}>
+        <Text accessible={false} type="defaultSemiBold">{formatPrice(coin.quote.USD.price)}</Text>
+        <Text accessible={false} style={[styles.change, { color: changeColor }]}>
           {formatChange(change)}
         </Text>
       </View>

diff --git a/features/home/components/home-hero.tsx b/features/home/components/home-hero.tsx
@@ -18,16 +18,26 @@ interface HomeHeroProps {
 export function HomeHero({ coin, isLoading, isError, height, logoUrl }: HomeHeroProps) {
   if (isLoading) {
     return (
-      <View style={[styles.hero, { height: height * 0.25 }]}>
-        <Text style={styles.label}>Loading...</Text>
+      <View
+        accessible={true}
+        accessibilityLabel="Loading Bitcoin data"
+        accessibilityState={{ busy: true }}
+        style={[styles.hero, { height: height * 0.25 }]}
+      >
+        <Text accessible={false} style={styles.label}>Loading...</Text>
       </View>
     );
   }
 
   if (isError) {
     return (
-      <View style={[styles.hero, { height: height * 0.25 }]}>
-        <Text style={styles.label}>Failed to load</Text>
+      <View
+        accessible={true}
+        accessibilityLabel="Failed to load Bitcoin data"
+        accessibilityLiveRegion="assertive"
+        style={[styles.hero, { height: height * 0.25 }]}
+      >
+        <Text accessible={false} style={styles.label}>Failed to load</Text>
       </View>
     );
   }
@@ -36,13 +46,20 @@ export function HomeHero({ coin, isLoading, isError, height, logoUrl }: HomeHero
 
   const change = coin.quote.USD.percent_change_24h;
   const changeColor = change >= 0 ? CHANGE_COLORS.positive : CHANGE_COLORS.negative;
+  const direction = change >= 0 ? 'up' : 'down';
+  const changeAbs = Math.abs(change).toFixed(2);
+  const heroLabel = `${coin.name} featured. Price ${formatPrice(coin.quote.USD.price)}, ${direction} ${changeAbs}% today`;
 
   return (
-    <View style={[styles.hero, { height: height * 0.25 }]}>
-      <CoinLogo uri={logoUrl} size={48} />
-      <Text style={styles.label}>{coin.name} ({coin.symbol})</Text>
-      <Text style={styles.price}>{formatPrice(coin.quote.USD.price)}</Text>
-      <Text style={[styles.change, { color: changeColor }]}>
+    <View
+      accessible={true}
+      accessibilityLabel={heroLabel}
+      style={[styles.hero, { height: height * 0.25 }]}
+    >
+      <CoinLogo accessible={false} uri={logoUrl} size={48} />
+      <Text accessible={false} style={styles.label}>{coin.name} ({coin.symbol})</Text>
+      <Text accessible={false} style={styles.price}>{formatPrice(coin.quote.USD.price)}</Text>
+      <Text accessible={false} style={[styles.change, { color: changeColor }]}>
         {formatChange(change)} today
       </Text>
     </View>

diff --git a/features/home/components/list-section-header.tsx b/features/home/components/list-section-header.tsx
@@ -8,8 +8,12 @@ interface ListSectionHeaderProps {
 
 export function ListSectionHeader({ borderColor }: ListSectionHeaderProps) {
   return (
-    <View style={[styles.container, { borderBottomColor: borderColor }]}>
-      <Text style={styles.label}>All Cryptos</Text>
+    <View
+      accessibilityRole="header"
+      accessibilityLabel="All Cryptocurrencies section"
+      style={[styles.container, { borderBottomColor: borderColor }]}
+    >
+      <Text accessible={false} style={styles.label}>All Cryptos</Text>
     </View>
   );
 }

diff --git a/features/home/utils.ts b/features/home/utils.ts
@@ -1,3 +1,5 @@
+import type { CmcCoin } from '@/types/cmc';
+
 export function formatPrice(price: number): string {
   return new Intl.NumberFormat('en-US', {
     style: 'currency',
@@ -10,3 +12,10 @@ export function formatChange(change: number): string {
   const sign = change >= 0 ? '+' : '';
   return `${sign}${change.toFixed(2)}%`;
 }
+
+export function coinAccessibilityLabel(coin: CmcCoin): string {
+  const change = coin.quote.USD.percent_change_24h;
+  const direction = change >= 0 ? 'up' : 'down';
+  const changeAbs = Math.abs(change).toFixed(2);
+  return `${coin.name}, ${coin.symbol}, ranked ${coin.cmc_rank}, price ${formatPrice(coin.quote.USD.price)}, ${direction} ${changeAbs}% in the last 24 hours`;
+}