Screen Reader Optimization with ARIA and Semantic HTML
Practical guide for implementing landmarks, live regions, and ARIA roles and properties to make rich interfaces accessible via screen readers.
Implement full screen reader support (NVDA, JAWS, VoiceOver, TalkBack) using semantic HTML as the foundation and ARIA as a supplement, following the rule 'no ARIA is better than bad ARIA'.
At a glance
Access
Free prompt
Open to copy — no account or payment needed.
Prompt objective
Implement full screen reader support (NVDA, JAWS, VoiceOver, TalkBack) using semantic HTML as the foundation and ARIA as a supplement, following the rule 'no ARIA is better than bad ARIA'.
Real use case
DeliveryJa needs to make its order flow accessible for 6.7 million Brazilians with visual impairments. The app uses many custom components (restaurant carousel, interactive cards, order bottom sheet) that are invisible to VoiceOver on iOS.
Customize these fields first
Replace the placeholders with your own context before you run the prompt. That usually improves the first output more than adding more instructions later.
Prompt
Optimize [PRODUCT NAME/FEATURE] for screen readers, focusing on the [FLOW DESCRIPTION] flow. Technologies: [FRAMEWORK] with [COMPONENT LIBRARY]. Target screen readers: [NVDA/JAWS/VoiceOver/TalkBack]. **1) Semantic HTML (Foundation):** For each content type, use the correct element: - Primary navigation: `<nav aria-label=
Open directly in an AI — the text is pre-filled:
How to use this prompt
- 1Replace the key placeholders first: PRODUCT NAME/FEATURE, FLOW DESCRIPTION, FRAMEWORK, COMPONENT LIBRARY.
- 2Replace any bracketed placeholders like [this] with your own context.
- 3Add extra background information when you want more tailored results.
- 4Combine multiple prompts in one conversation when you need a richer output.
- 5Save your best-performing prompts so they are easy to reuse later.
Next best step
Open the guide first, then branch only if you still need more.
A starter guide to the first prompt categories and patterns worth using when you need better output without prompt guesswork.
If this prompt is close but not quite right, generate variants next. If the job is recurring, move into the course library after the guide.
Related prompts
View allComplete WCAG 2.2 Accessibility Audit for Digital Products
An evidence table with finding, source, limitation, impact hypothesis, action and validation. Includes required inputs, evidence checks and a concrete next step.
Best for
Complete “Complete WCAG 2.2 Accessibility Audit for Digital Products” with an evidence table with finding, source, limitation, impact hypothesis, action and validation that can be checked against the supplied evidence.
Accessible Color System with Universal Contrast Compliance
Color palette redesign ensuring WCAG AA/AAA contrast across all contexts, including dark mode and color blindness.
Best for
Create a color system that is accessible for all types of vision, maintaining brand visual identity and ensuring WCAG AA compliance across all text/background combinations.
Full Keyboard Navigation for Single-Page Applications
A screen/component specification with layout, copy, states, accessibility checks and acceptance criteria. Includes required inputs, evidence checks and a concrete next step.
Best for
Complete “Full Keyboard Navigation for Single-Page Applications” with a screen/component specification with layout, copy, states, accessibility checks and acceptance criteria that can be checked against the supplied evidence.
Advanced ARIA Patterns for Rich Custom Interface Components
A screen/component specification with layout, copy, states, accessibility checks and acceptance criteria. Includes required inputs, evidence checks and a concrete next step.
Best for
Complete “Advanced ARIA Patterns for Rich Custom Interface Components” with a screen/component specification with layout, copy, states, accessibility checks and acceptance criteria that can be checked against the supplied evidence.
Explore other prompt categories
Move sideways into adjacent libraries when the current category is not the full answer.
Every prompt here is free. The course teaches the thinking behind them.
Copy as many prompts as you like. When you want to move from single prompts to a repeatable AI workflow, Learn AI in 30 Days walks through it, one day at a time.
Buy the course once ($20), or choose US$100 once or six monthly payments of US$20 (US$120 total) access.
