Intermediate5 min readShare
Was this chapter helpful?
Share
Make your website usable by everyone — including people with disabilities. Good accessibility is good design, and your AI tool can handle most of it for you.
Visual, motor, cognitive, or hearing disabilities affect how people use the web.
Many countries require websites to be accessible. ADA, WCAG, and EAA compliance.
Accessible sites have better SEO, performance, and user experience for all users.
Websites are made of building blocks — buttons, links, headings, lists, and more. When the right blocks are used, screen readers (software that reads websites aloud for blind users) can understand your page. When the wrong ones are used, things break for people with disabilities.
If something performs an action (like submitting a form, opening a menu, or toggling something on/off), it should be a real button. Screen readers announce it as a button, and keyboard users can press it with the Enter or Space key.
"Make sure all clickable elements that perform actions are real buttons, not just styled text or containers."
If clicking something takes the user to a new page or a different section, it should be a real link. This lets screen readers announce it as a link and lets users open it in a new tab.
"Make sure all navigation elements that go to other pages or sections are real links, not just styled text."
Headings create an invisible outline of your page. Screen reader users jump between headings to scan your content, just like sighted users scan for bold titles. Use them in order: one main title, then subtitles, then sub-subtitles.
"Make sure the page has a clear heading hierarchy — one h1 for the main title, h2 for sections, h3 for subsections. Don't skip levels."
When you have a group of related items (like features, steps, or menu options), a real list tells screen readers how many items there are and lets users navigate between them.
"Use proper list elements for any group of related items instead of just stacking text."
Every page should have clear areas: a header at the top, a navigation menu, a main content area, and a footer at the bottom. Screen reader users rely on these landmarks to jump around the page quickly.
"Make sure the page has proper landmark regions — a header, nav, main content area, and footer."
Every text field, dropdown, and checkbox needs a visible label that is properly connected to it. This way, screen readers tell users what each field is for, and clicking the label focuses the field.
"Make sure every form input has a visible label element properly connected to it. Don't rely on placeholder text alone."
Sometimes a button has an icon but no visible text, or a section of your page updates without reloading. In these cases, you need to add invisible labels that screen readers can announce. Your AI tool knows how to do this — you just need to ask.
A close button that just shows an X, or a search button that just shows a magnifying glass
"Add descriptive labels to all icon-only buttons so screen readers can announce what they do."
Background patterns, dividers, or purely visual flourishes that don't add meaning
"Hide all decorative images from screen readers. Only images that convey information should have descriptions."
A FAQ section that expands and collapses, or a mobile hamburger menu
"Make sure dropdown menus and accordions announce whether they are open or closed to screen readers."
A notification count that changes, a chat message that appears, or a form error that shows up
"Make sure dynamic content changes (like notifications, alerts, and error messages) are announced to screen readers."
Tabs, sliders, date pickers, or custom components that don't use standard elements
"Add proper accessibility roles and labels to all custom widgets so screen readers understand what they are and how to use them."
A password field with a hint below it that says 'Must be at least 8 characters'
"Connect help text and descriptions to their related form fields so screen readers read them together."
If your text color is too similar to the background color, people with low vision can't read it. This is one of the most common accessibility problems — and one of the easiest to fix.
Use this free tool to check if your text is readable:
WebAIM Contrast Checker
Go to webaim.org/resources/contrastchecker — paste in your text color and background color, and it tells you if the contrast is good enough.
Dark text on light backgrounds (or light text on dark backgrounds) is almost always fine
Light gray text on white backgrounds is the most common problem — make your grays darker
Don't rely on color alone to show something is important — add an icon or bold text too
If you use colored status indicators (like red for error), also add a label or icon
"Check that all text on this page has enough contrast against its background to be readable. Fix any low-contrast text."
Many people can't use a mouse — they navigate entirely with a keyboard using the Tab key to jump between buttons, links, and form fields. Your site needs to work for them too.
Can you reach every button, link, and form field by pressing Tab? (If not, something is broken.)
Can you always see which element is currently selected? (There should be a visible outline or highlight.)
Does the Tab order make sense? (It should follow the visual layout — top to bottom, left to right.)
Can you open and close menus, modals, and dropdowns with just the keyboard?
When a modal or popup opens, does focus move into it? When it closes, does focus go back to where you were?
Is there a 'Skip to content' link that lets keyboard users jump past the navigation menu?
"Make sure the entire site is navigable by keyboard. All interactive elements should be reachable with Tab, have visible focus indicators, and follow a logical order. Add a skip-to-content link at the top of the page."
Copy this list and ask your AI tool to go through each item on your site.
Every image has a text description (so screen readers can explain what it shows)
Text is easy to read against the background (good contrast)
Every button, link, and form field can be reached and used with just a keyboard
When you Tab to something, you can see which element is selected
Every form field has a label that explains what to type
The page has one main title, followed by section titles in order
Error messages explain what went wrong and appear next to the right field
Links say where they go (not just 'click here')
Videos have captions or a written transcript
Animations can be turned off for people who find motion uncomfortable
Color is never the only way something is communicated — icons or text back it up
"Review my site for accessibility issues. Check images for alt text, color contrast, keyboard navigation, heading hierarchy, form labels, and link text. Fix anything that doesn't meet WCAG 2.1 AA standards."
Copy and paste these into your AI tool to fix common accessibility issues.
"Do a complete accessibility audit of this page. Check for proper heading structure, alt text on images, keyboard navigation, color contrast, form labels, and screen reader support. Fix everything you find."
"Add descriptive alt text to every image that conveys information. For purely decorative images (like background patterns), hide them from screen readers."
"Make sure every form field has a visible label, error messages are clear and connected to the right field, and the entire form works with just a keyboard."
"Add a skip-to-content link at the top of the page. Make sure the navigation menu is fully keyboard accessible and has proper labels for screen readers."
"Add support for reduced motion. If the user has turned on 'reduce motion' in their device settings, turn off or simplify all animations."
"Walk me through how to manually test this page for accessibility using just my keyboard and browser. Tell me what to press and what to look for."
Copy-paste these prompts into your AI tool to apply what you just learned.
FULL ACCESSIBILITY AUDIT
"Audit my page for accessibility issues. Check for missing alt text, poor contrast, keyboard navigation, proper heading hierarchy, and ARIA labels. Fix everything you find."
MAKE A COMPONENT ACCESSIBLE
"Make my [form/navigation/modal] fully accessible. Add proper labels, keyboard support, focus management, and screen reader announcements."
