@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { useRouter } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
 import { TabBar, type TabItem } from './tab-bar'
 import { Home, Wallet, Settings, ArrowLeftRight } from 'lucide-react'
@@ -10,13 +11,6 @@ interface AppLayoutProps {
   className?: string
 }
 
-const tabs: TabItem[] = [
-  { id: 'home', label: '首页', icon: <Home className="size-5" /> },
-  { id: 'transfer', label: '转账', icon: <ArrowLeftRight className="size-5" /> },
-  { id: 'wallet', label: '钱包', icon: <Wallet className="size-5" /> },
-  { id: 'settings', label: '设置', icon: <Settings className="size-5" /> },
-]
-
 const tabRoutes: Record<string, string> = {
   home: '/',
   transfer: '/send',
@@ -36,6 +30,15 @@ export function AppLayout({ children, className }: AppLayoutProps) {
   const router = useRouter()
   const pathname = router.state.location.pathname
   const isInitialized = useWalletInitialized()
+  const { t } = useTranslation()
+
+  // Build tabs with localized aria-labels
+  const tabs: TabItem[] = [
+    { id: 'home', label: '首页', icon: <Home className="size-5" />, ariaLabel: t('a11y.tabHome') },
+    { id: 'transfer', label: '转账', icon: <ArrowLeftRight className="size-5" />, ariaLabel: t('a11y.tabTransfer') },
+    { id: 'wallet', label: '钱包', icon: <Wallet className="size-5" />, ariaLabel: t('a11y.tabWallet') },
+    { id: 'settings', label: '设置', icon: <Settings className="size-5" />, ariaLabel: t('a11y.tabSettings') },
+  ]
 
   // 应用启动时初始化钱包 store
   useEffect(() => {
@@ -63,8 +66,16 @@ export function AppLayout({ children, className }: AppLayoutProps) {
 
   return (
     <div className={cn('flex min-h-screen flex-col bg-background', className)}>
+      {/* Skip link for keyboard navigation - S4 a11y */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:top-4 focus:left-4 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+      >
+        {t('a11y.skipToMain')}
+      </a>
+
       {/* 主内容区域 */}
-      <main className="flex-1 overflow-auto pb-safe">
+      <main id="main-content" className="flex-1 overflow-auto pb-safe" tabIndex={-1}>
         {children}
       </main>
 
 
@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useCallback } from 'react'
 import { cn } from '@/lib/utils'
+import { useTranslation } from 'react-i18next'
 
 export interface BottomSheetProps {
   open: boolean
@@ -16,6 +17,9 @@ const heightClasses = {
   full: 'h-[100vh]',
 }
 
+// Focusable element selector
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+
 export function BottomSheet({
   open,
   onClose,
@@ -25,9 +29,13 @@ export function BottomSheet({
   className,
 }: BottomSheetProps) {
   const sheetRef = useRef<HTMLDivElement>(null)
+  const previousActiveElementRef = useRef<HTMLElement | null>(null)
+  const { t } = useTranslation()
 
+  // Store the previously focused element when opening
   useEffect(() => {
     if (open) {
+      previousActiveElementRef.current = document.activeElement as HTMLElement | null
       document.body.style.overflow = 'hidden'
     } else {
       document.body.style.overflow = ''
@@ -37,15 +45,68 @@ export function BottomSheet({
     }
   }, [open])
 
+  // Focus first focusable element when sheet opens
   useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
+    if (open && sheetRef.current) {
+      // Slight delay to ensure the sheet is fully rendered
+      const timeoutId = setTimeout(() => {
+        const firstFocusable = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)
+        if (firstFocusable) {
+          firstFocusable.focus()
+        } else {
+          // If no focusable element, focus the sheet itself
+          sheetRef.current?.focus()
+        }
+      }, 50)
+      return () => clearTimeout(timeoutId)
+    }
+  }, [open])
+
+  // Restore focus when sheet closes
+  useEffect(() => {
+    if (!open && previousActiveElementRef.current) {
+      previousActiveElementRef.current.focus()
+      previousActiveElementRef.current = null
+    }
+  }, [open])
+
+  // Handle keyboard navigation (Escape and Tab)
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose()
+      return
     }
+
+    // Focus trap: keep focus within the sheet
+    if (e.key === 'Tab' && sheetRef.current) {
+      const focusableElements = sheetRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+      const firstFocusable = focusableElements[0]
+      const lastFocusable = focusableElements[focusableElements.length - 1]
+
+      if (focusableElements.length === 0) return
+
+      if (e.shiftKey) {
+        // Shift + Tab: if on first element, go to last
+        if (document.activeElement === firstFocusable) {
+          e.preventDefault()
+          lastFocusable.focus()
+        }
+      } else {
+        // Tab: if on last element, go to first
+        if (document.activeElement === lastFocusable) {
+          e.preventDefault()
+          firstFocusable.focus()
+        }
+      }
+    }
+  }, [onClose])
+
+  useEffect(() => {
     if (open) {
-      document.addEventListener('keydown', handleEscape)
+      document.addEventListener('keydown', handleKeyDown)
     }
-    return () => document.removeEventListener('keydown', handleEscape)
-  }, [open, onClose])
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open, handleKeyDown])
 
   if (!open) return null
 
@@ -63,9 +124,10 @@ export function BottomSheet({
         ref={sheetRef}
         role="dialog"
         aria-modal="true"
-        aria-label={title ?? '弹窗'}
+        aria-label={title ?? t('a11y.closeDialog')}
+        tabIndex={-1}
         className={cn(
-          'absolute bottom-0 left-0 right-0 bg-background rounded-t-2xl animate-slide-in-bottom safe-area-inset-bottom',
+          'absolute bottom-0 left-0 right-0 bg-background rounded-t-2xl animate-slide-in-bottom safe-area-inset-bottom focus:outline-none',
           heightClasses[height],
           className
         )}
 
@@ -6,6 +6,8 @@ export interface TabItem {
   icon: React.ReactNode
   activeIcon?: React.ReactNode
   badge?: number | string
+  /** Accessible label for screen readers (should be localized) */
+  ariaLabel?: string
 }
 
 interface TabBarProps {
@@ -36,6 +38,7 @@ export function TabBar({ items, activeId, onTabChange, className }: TabBarProps)
                 isActive ? 'text-primary' : 'text-muted hover:text-foreground'
               )}
               aria-current={isActive ? 'page' : undefined}
+              aria-label={item.ariaLabel || item.label}
             >
               <span className="relative">
                 {isActive && item.activeIcon ? item.activeIcon : item.icon}
 
@@ -2,6 +2,11 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { PasswordInput, calculateStrength } from './password-input'
+import { TestI18nProvider } from '@/test/i18n-mock'
+
+function renderWithProviders(ui: React.ReactElement) {
+  return render(<TestI18nProvider>{ui}</TestI18nProvider>)
+}
 
 describe('calculateStrength', () => {
   it('returns weak for empty password', () => {
@@ -27,58 +32,58 @@ describe('calculateStrength', () => {
 
 describe('PasswordInput', () => {
   it('renders password input', () => {
-    render(<PasswordInput placeholder="Enter password" />)
+    renderWithProviders(<PasswordInput placeholder="Enter password" />)
     expect(screen.getByPlaceholderText('Enter password')).toHaveAttribute('type', 'password')
   })
 
   it('toggles password visibility', async () => {
-    render(<PasswordInput placeholder="Enter password" />)
+    renderWithProviders(<PasswordInput placeholder="Enter password" />)
     const input = screen.getByPlaceholderText('Enter password')
     const toggleButton = screen.getByRole('button', { name: '显示密码' })
-    
+
     expect(input).toHaveAttribute('type', 'password')
-    
+
     await userEvent.click(toggleButton)
     expect(input).toHaveAttribute('type', 'text')
     expect(screen.getByRole('button', { name: '隐藏密码' })).toBeInTheDocument()
-    
+
     await userEvent.click(screen.getByRole('button', { name: '隐藏密码' }))
     expect(input).toHaveAttribute('type', 'password')
   })
 
   it('shows strength indicator when enabled', async () => {
-    render(<PasswordInput showStrength />)
+    renderWithProviders(<PasswordInput showStrength />)
     const input = document.querySelector('input')!
-    
+
     await userEvent.type(input, 'test')
     expect(screen.getByText('密码强度：')).toBeInTheDocument()
   })
 
   it('calls onChange handler', async () => {
     const handleChange = vi.fn()
-    render(<PasswordInput onChange={handleChange} />)
-    
+    renderWithProviders(<PasswordInput onChange={handleChange} />)
+
     const input = document.querySelector('input')!
     await userEvent.type(input, 'test')
     expect(handleChange).toHaveBeenCalled()
   })
 
   it('calls onStrengthChange when strength changes', async () => {
     const handleStrengthChange = vi.fn()
-    render(<PasswordInput showStrength onStrengthChange={handleStrengthChange} />)
-    
+    renderWithProviders(<PasswordInput showStrength onStrengthChange={handleStrengthChange} />)
+
     const input = document.querySelector('input')!
     await userEvent.type(input, 'MyP@ssw0rd!')
     expect(handleStrengthChange).toHaveBeenCalled()
   })
 
   it('is disabled when disabled prop is true', () => {
-    render(<PasswordInput disabled />)
+    renderWithProviders(<PasswordInput disabled />)
     expect(document.querySelector('input')).toBeDisabled()
   })
 
   it('applies custom className', () => {
-    render(<PasswordInput className="custom-class" />)
+    renderWithProviders(<PasswordInput className="custom-class" />)
     expect(document.querySelector('input')).toHaveClass('custom-class')
   })
 })
@@ -1,5 +1,6 @@
 import { useState, forwardRef } from 'react'
 import { cn } from '@/lib/utils'
+import { useTranslation } from 'react-i18next'
 import { Eye, EyeOff } from 'lucide-react'
 
 interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
@@ -35,6 +36,7 @@ const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     const [visible, setVisible] = useState(false)
     const [strength, setStrength] = useState<PasswordStrength>('weak')
     const [hasValue, setHasValue] = useState(!!value)
+    const { t } = useTranslation()
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const inputValue = e.target.value
@@ -71,7 +73,7 @@ const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
             onClick={() => setVisible(!visible)}
             className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-foreground transition-colors"
             tabIndex={-1}
-            aria-label={visible ? '隐藏密码' : '显示密码'}
+            aria-label={visible ? t('a11y.hidePassword') : t('a11y.showPassword')}
           >
             {visible ? (
               <EyeOff className="size-5" />
@@ -82,18 +84,19 @@ const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
         </div>
 
         {showStrength && hasValue && (
-          <div className="space-y-1">
-            <div className="h-1 w-full rounded-full bg-muted overflow-hidden">
-              <div 
+          <div className="space-y-1" aria-live="polite" aria-atomic="true">
+            <div className="h-1 w-full rounded-full bg-muted overflow-hidden" role="progressbar" aria-valuenow={strength === 'weak' ? 33 : strength === 'medium' ? 66 : 100} aria-valuemin={0} aria-valuemax={100}>
+              <div
                 className={cn('h-full transition-all duration-300', config.color, config.width)}
               />
             </div>
             <p className="text-xs text-muted">
-              密码强度：<span className={cn(
+              <span className="sr-only">{t('a11y.passwordStrength', { strength: config.label })}</span>
+              <span aria-hidden="true">密码强度：<span className={cn(
                 strength === 'weak' && 'text-destructive',
                 strength === 'medium' && 'text-yellow-500',
                 strength === 'strong' && 'text-secondary',
-              )}>{config.label}</span>
+              )}>{config.label}</span></span>
             </p>
           </div>
         )}
 
@@ -1,4 +1,5 @@
 import { cn } from '@/lib/utils'
+import { useTranslation } from 'react-i18next'
 import { ChainIcon, type ChainType } from '../wallet/chain-icon'
 import { AmountDisplay } from '../common'
 
@@ -21,13 +22,15 @@ interface TokenItemProps {
 
 export function TokenItem({ token, onClick, showChange = false, className }: TokenItemProps) {
   const isClickable = !!onClick
+  const { t } = useTranslation()
 
   return (
     <div
       role={isClickable ? 'button' : undefined}
       tabIndex={isClickable ? 0 : undefined}
       onClick={onClick}
       onKeyDown={isClickable ? (e) => e.key === 'Enter' && onClick?.() : undefined}
+      aria-label={isClickable ? t('a11y.tokenDetails', { token: token.symbol }) : undefined}
       className={cn(
         'flex items-center gap-3 p-3 rounded-xl transition-colors @container',
         isClickable && 'cursor-pointer hover:bg-muted/50 active:bg-muted',