skills.rest
nirholas
nirholasCOMMUNITY
Explore all skills by this author →
Website𝕏@nichxbtGitHub

web3-accessibility-guide

Audit Web3 dApp wallet and transaction UIs against W3AG accessibility requirements.

5|Updated May 2, 2026
Search Tags:#inclusive design#accessibility#web3#wallet connect#aria-live#transaction confirmation#dapp ux
One-click install
npx skills add https://github.com/nirholas/three-ui --skill web3-accessibility-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web3-accessibility-guide
Source: https://github.com/nirholas/three-ui/tree/main/data/skills/development/web3-accessibility-guide
Command: npx skills add https://github.com/nirholas/three-ui --skill web3-accessibility-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

web3-accessibility-guide addresses the accessibility gaps that prevent people with disabilities from using Web3 and DeFi applications, such as illegible wallet address UX, non-keyboard wallet flows, unclear transaction confirmations, poor error messaging, and inaccessible motion/contrast choices.

Core Features & Use Cases

  • Accessible Wallet Connection UX: Provides patterns for keyboard-navigable wallet modals with proper dialog semantics and ARIA labeling.
  • Inclusive Transaction Confirmation: Defines accessible confirmation UI using plain language, alert/alertdialog roles, and aria-live status updates for pending/success/error.
  • Robust Address and Form Accessibility: Recommends labeled, truncated, and copyable address displays plus accessible screen reader output, along with fully labeled form inputs.
  • Motion, Contrast, and Error Handling Checklist: Covers reduced motion support, contrast minimums, and clear human-readable errors for dApps.

Quick Start

Use the web3-accessibility-guide to audit your wallet connect and transaction confirmation UI against W3AG by implementing accessible dialogs, step-by-step confirmations, aria-live status regions, and clearly labeled errors.

Frequently Asked Questions about web3-accessibility-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make Web3 wallet connect dialogs accessible for screen readers?▼

Accessible Web3 wallet connect dialogs require keyboard operability, proper dialog semantics, and ARIA labeling. You can implement keyboard-navigable wallet modals that announce connection status clearly to screen readers using robust ARIA roles.

What is the best way to handle transaction confirmation accessibility in dApps?▼

Transaction confirmation accessibility in dApps is achieved by using plain language, alert and alertdialog roles, and aria-live status regions. This ensures pending, success, and error states are announced clearly to users relying on assistive technology.

How do I display truncated wallet addresses accessibly in DeFi applications?▼

Displaying wallet addresses accessibly involves using labeled, truncated, and copyable address components. Implement proper screen reader output so users with disabilities can read and verify full addresses without visual context.

Do I need aria-live regions for dApp error handling and status updates?▼

Yes, you need aria-live regions for dApp error handling to announce dynamic status changes. Robust status updates and clearly labeled, human-readable errors ensure users with disabilities understand transaction failures and pending states.

What contrast and motion guidelines should I follow for inclusive dApp UX?▼

Inclusive dApp UX requires meeting contrast minimums and providing reduced motion support. Following an accessibility checklist ensures your dApp handles motion sensitivity and visual clarity for users with varying abilities.

Related Skills

Explore More Design & Creative Skills→
AgentientAgentient
2

web-accessibility-patterns

Apply semantic HTML, ARIA attributes, and keyboard navigation patterns to web interfaces.

Official
Intermediate
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
Thiago-Cruz-engThiago-Cruz-eng

web-accessibility

Implements WCAG 2.1 accessibility practices for building and fixing user interfaces.

Community
Intermediate
brunoamaralbrunoamaral

web-design-guidelines

Enforce WCAG accessibility and responsive design guidelines for HTML/CSS/JS web UI.

Community
Basic