Screen Reader Improvements — Airo AI Builder Prompt Library

Polish & Launch

Screen Reader Improvements

Improve your site's experience for screen reader users by adding the right ARIA attributes — live regions for dynamic content, required flags on form fields, and descriptive labels on interactive elements.

0/5 filled

Prompt 1 — Dynamic content and form fields

Like cart totals that change when you add items, search results that appear as you type, or a price that updates when you move a slider.

Like 'Added to cart!' or 'Message sent!' or 'Copied!'

💡 Consider running these as two separate prompts for cleaner results. Prompt 1 handles live content announcements and form validation. Prompt 2 handles button labels and component roles.

Prompt 2 — Icon buttons and custom components

Like a magnifying glass for search, a moon icon for dark mode, or an X to close something.

Like pill-shaped option selectors, toggle switches, star ratings, or custom dropdowns.

Built something? Show it off in the Airo Builder Lab

Join Discord →

Your Prompt

0/5 filled
Improve screen reader accessibility on my site. Live-updating elements (content that changes without a page reload): [e.g., cart count, search results, preview panels, price calculators] Confirmation messages shown after user actions: [e.g., Copied! Form submitted! Added to cart!] Pages with required form fields: [e.g., Contact page, Checkout, Sign Up] Make the following improvements: 1. ARIA live regions — add aria-live="polite" to every live-updating element listed above. Use aria-live="assertive" only for urgent alerts (errors, warnings). Add aria-atomic="true" to regions where the whole message should be read at once (e.g., "3 items in cart"). 2. Confirmation messages — add role="status" or aria-live="polite" to confirmation message containers so screen readers announce them when they appear. 3. Required fields — for every required form field: add aria-required="true" to the input, add a visible asterisk (*) or the word "required" near the label, and ensure the label is associated via htmlFor/id. 6. Error messages — add role="alert" to any error message containers so they are announced immediately. Do not change visual design, layout, or spacing.

Unfilled fields show as [brackets] — fill them in or leave as-is.

Did this prompt help you?