Skip to main content

BitcoinDesign-GAAD-Workshop2

Date: 2025-05-16
Presenter: Round Rock Bitcoiners

Outline & Notes​

BitcoinDesign-GAAD-Workshop2

Date: May 16, 2025

Core Principle​

"Design for the edges, strengthen the core" "Can you setup your favorite bitcoin wallet using only a keyboard or screen reader?"

Manual Testing Checklists​

Android​

  • Enable TalkBack
  • Navigate with gestures, BT keyboard, Voice Access
  • High contrast, color inversion, large text, magnification
  • Install Accessibility Scanner

iOS​

  • Enable VoiceOver, rotor navigation, explore by touch
  • Dynamic type, bold text, increase contrast
  • Full Keyboard Access, Voice Control, Switch Control

Desktop​

  • Keyboard only navigation (Tab, Shift+Tab, Enter, Space)
  • Screen readers: JAWS, VoiceOver, NVDA, Orca, ChromeVox
  • Zoom to 200% & 400%, high contrast mode
  • Grayscale/color filters

Testing Tools​

| Browser | Lighthouse, ARC Toolkit, Wave, Accessibility Insights | | Contrast | Stark (Figma), TPGi Colour Contrast Analyzer, APCA | | Mobile | Accessibility Scanner (Google), Android Accessibility Inspector, Xcode Accessibility Inspector |

Common Mistakes​

  • Keyboard traps
  • Floating buttons
  • Missing text alternatives
  • Unlabeled buttons
  • Elements lacking visible focus
  • QR-only interactions with no alt text

Accessible Design Patterns​

  • WAI-ARIA APG from W3C
  • Dialogs: role="dialog", aria-modal="true", focus trap
  • Buttons: aria-label, aria-pressed
  • Landmarks: nav, main, section
  • Inclusive Components by Heydon Pickering
  • shadcn/ui built on Radix UI

Slides in this Deck​

Slide 2 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 3 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 4 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 5 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 6 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 7 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 8 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 9 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 10 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 11 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 12 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 13 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)

Slide 14 of 14 from 'BitcoinDesign-GAAD-Workshop2' (2025-05-16)