web3-accessibility-guide

W3AG — Web3 Accessibility Guidelines

W3AG defines accessibility standards for Web3 applications. Wallet connect flows, transaction confirmations, gas estimation UX, error handling — all designed to be usable by everyone, including people with disabilities.

Why Web3 Accessibility?

Problem	Impact	Users Affected
Tiny hex addresses	Illegible for low vision	285M globally
No screen reader support	Blind users excluded	39M globally
Complex jargon	Cognitive barriers	200M+ globally
Mouse-only interactions	Motor disabilities	75M globally
Flashing animations	Seizure triggers	50M globally
No keyboard navigation	Physical disabilities	110M globally

Core Principles

1. Perceivable

All information must be presentable in ways users can perceive.

// ❌ Bad: Address with no label
<span>0x742d35Cc6634C0532925a3b844Bc9...</span>

// ✅ Good: Labeled, truncated, copyable
<AddressDisplay
  address="0x742d35Cc6634C0532925a3b844Bc9..."
  label="Your Wallet"
  truncate={true}
  copyable={true}
  aria-label="Your wallet address: 0x742d...Bc9"
/>

2. Operable

All functionality must be operable via keyboard and assistive tech.

// ❌ Bad: onClick only
<div onClick={connectWallet}>Connect</div>

// ✅ Good: Button with keyboard support
<button
  onClick={connectWallet}
  onKeyDown={(e) => e.key === 'Enter' && connectWallet()}
  aria-label="Connect your wallet"
  role="button"
  tabIndex={0}
>
  Connect Wallet
</button>

3. Understandable

Content and operations must be understandable.

// ❌ Bad: Jargon without explanation
<span>Gas: 23 Gwei | Slippage: 0.5%</span>

// ✅ Good: With tooltips and plain language
<Tooltip content="Transaction fee paid to network validators. Currently low.">
  <span>Network Fee: ~$0.02</span>
</Tooltip>
<Tooltip content="Maximum price difference you'll accept. Higher = faster trade, lower = better price.">
  <span>Price Tolerance: 0.5%</span>
</Tooltip>