# 1.2 Transaction Clarity
Transaction details must be perceivable through multiple senses.
## Success Criteria
### 1.2.1 Transaction Type Labeling (Level A)
**Requirement**: Every transaction must have a clear, human-readable label identifying its type (send, swap, approve, stake, mint, etc.) that is programmatically determinable.
**Intent**: Users must immediately understand what action they're about to take. Raw function signatures like `0xa9059cbb` are meaningless to most users and completely inaccessible.
**Benefits**:
- **Blind users**: Screen reader announces "Swap transaction" instead of hex data
- **Cognitive disabilities**: Clear categorization aids decision-making
- **All users**: Reduces phishing risk from mislabeled transactions
**Techniques**:
```tsx
<TransactionHeader>
<TransactionIcon type={txType} aria-hidden="true" />
<h2 id="tx-type">
{txType === 'swap' && 'Token Swap'}
{txType === 'approve' && 'Token Approval'}
{txType === 'send' && 'Send Tokens'}
{txType === 'stake' && 'Stake Tokens'}
</h2>
</TransactionHeader>
<TransactionDetails aria-labelledby="tx-type">
{/* Transaction content */}
</TransactionDetails>
```
**Failures**:
- Showing only function selector or method ID
- Generic "Contract Interaction" for all transaction types
- Transaction type only indicated by icon without text
---
### 1.2.2 Readable Token Amounts (Level A)
**Requirement**: Token amounts must be displayed in human-readable formats with clear unit labels. Raw wei/gwei values must never be the only representation.
**Intent**: "1500000000000000000" wei is incomprehensible. "1.5 ETH" is immediately clear.
**Benefits**:
- **Cognitive disabilities**: Prevents decimal place errors
- **All users**: Reduces costly mistakes from misreading amounts
**Techniques**:
```tsx
// ❌ Inaccessible
<span>1500000000000000000</span>
// ✅ Accessible
<TokenAmount
value={1.5}
symbol="ETH"
aria-label="1.5 Ether"
>
1.5 ETH
</TokenAmount>
// For very large/small numbers
<TokenAmount
value={1234567.89}
symbol="USDC"
aria-label="1 million, 234 thousand, 567 point 89 USDC"
>
1,234,567.89 USDC
</TokenAmount>
```
**Failures**:
- Displaying raw wei values
- Missing token symbol/name
- No thousands separators for large numbers
- Scientific notation without alternative (1.5e18)
---
### 1.2.3 Gas Estimate Descriptions (Level AA)
**Requirement**: Gas estimates must include text descriptions explaining the cost in user's preferred currency, not just gwei values or visual-only indicators.
**Intent**: "21 gwei" means nothing to most users. "$3.42" or "approximately 3 dollars" is universally understood.
**Benefits**:
- **Blind users**: Understand cost without visual gas meters
- **Cognitive disabilities**: Concrete currency amounts are clearer
- **New users**: Don't need to understand gas mechanics
**Techniques**:
```tsx
<GasEstimate>
<dt>Network Fee</dt>
<dd>
<span aria-label="Approximately 3 dollars and 42 cents">
~$3.42
</span>
<details>
<summary>Gas details</summary>
<p>Gas limit: 21,000</p>
<p>Gas price: 45 gwei</p>
<p>Max fee: 0.000945 ETH</p>
</details>
</dd>
</GasEstimate>
```
**Failures**:
- Only showing gwei values
- Visual-only gas speed indicators (slow/medium/fast without text)
- No fiat currency conversion
- Gas meters without text alternatives
---
### 1.2.4 Transaction Simulation Summaries (Level AA)
**Requirement**: When transaction simulations are available, outcomes must be presented as text-based summaries describing what will happen, not just visual balance change indicators.
**Intent**: Simulations show "what will happen" but often only visually. Text summaries make this accessible.
**Benefits**:
- **Blind users**: Understand simulation results
- **Cognitive disabilities**: Plain language outcomes
- **All users**: Clearer understanding before signing
**Techniques**:
```tsx
<SimulationResult aria-live="polite">
<h3>Transaction Preview</h3>
<p>If you confirm this transaction:</p>
<ul>
<li>You will send 1.5 ETH (approximately $2,847)</li>
<li>You will receive approximately 2,847 USDC</li>
<li>Network fee: approximately $3.42</li>
<li>Your new ETH balance: 0.5 ETH</li>
</ul>
</SimulationResult>
```
**Failures**:
- Only showing +/- balance changes with colors
- No text explanation of token movements
- Simulation errors not announced to screen readers
---
### 1.2.5 Multi-Modal Risk Communication (Level AAA)
**Requirement**: Risk levels for transactions are communicated through multiple modalities: text labels, color, and optional sound/haptics.
**Intent**: Relying on a single modality excludes users. Multiple channels ensure everyone perceives warnings.
**Benefits**:
- **Blind users**: Audio/haptic warnings
- **Deaf users**: Visual warnings remain
- **Cognitive disabilities**: Redundant signals reinforce importance
**Techniques**:
```tsx
<RiskWarning
level="high"
aria-live="assertive"
role="alert"
>
<WarningIcon aria-hidden="true" />
<span className="risk-label">High Risk Transaction</span>
<p>This contract is unverified and may be malicious.</p>
{/* Optional: trigger haptic/sound on mount */}
</RiskWarning>
```
**Failures**:
- Risk indicated only by color (red/yellow/green)
- No programmatic role for warnings
- Silent high-risk situations
---
## Testing Checklist
- [ ] Transaction type is announced by screen reader
- [ ] Token amounts include symbol and are human-readable
- [ ] Gas fees show fiat currency equivalent
- [ ] Simulation results are text-based
- [ ] Warnings use role="alert" for important risks
- [ ] Color is never the only indicator
## Related Components
- [TransactionSummary.tsx](../../components/TransactionSummary.tsx)
- [GasEstimate.tsx](../../components/GasEstimate.tsx)
- [RiskWarning.tsx](../../components/RiskWarning.tsx)
