Make my site work with screen readers
Someone using a screen reader hears your site rather than sees it. A button with an icon and no name is read as “button”. A menu that opens on tap gives no clue that anything happened. A logo that is also a link to the homepage is announced by its filename. None of this shows up when you look at the page, which is why it goes unfixed for years.
The prompt
“Make my site work properly with screen readers. Fix what you can on the draft, and show me anything that needs my say-so before it goes live.”
Signed in, Get my prompt fills in your site for you. Otherwise press Copy and fill in the [bracketed] parts. First time? Connect your AI to bernard once: Use your own AI (opens in a new tab).
What your AI does
Ask it to make the site work properly with screen readers. It runs bernard’s accessibility check across every page, then works in three tiers:
- Fixed now, on the draft. Unnamed buttons and links, menu controls that point at nothing, decorative icons that get read aloud, attributes that contradict the element they sit on. Each has one right answer.
- Drafted for your yes. What a picture shows, whether an image is decorative, where a vague link goes, a label for a control whose job is not obvious. Your AI proposes wording from the page and shows you the list.
- Left alone, and it tells you why. Third-party widgets such as a booking form or a chat bubble, and the pages bernard builds for you (courses, shop, quizzes), which are already built to work with assistive technology.
It then checks its own work by operating the menu in a test render, and gives you the preview link. Nothing is live until you approve.
Why it does not just add ARIA everywhere
Plain HTML already tells a screen reader most of what it needs. A wrong ARIA attribute is worse than none, because assistive technology trusts it. So your AI removes the redundant and contradictory ones as readily as it adds the missing ones, and never overrides what an element already is.
After this
Ask “is my site easy for everyone to use?” for the wider check: text size, contrast and keyboard use, alongside the same page-by-page check described above. Ask for it whenever you want it; it is not something that happens on its own overnight.
Questions people ask
- What is ARIA?
- A set of attributes that tell a screen reader what something is and what state it is in - that this is a menu button, and that the menu is currently open. Good HTML needs very little of it. Your AI adds it only where plain HTML cannot say the thing, and never to override what an element already is. Everything it changes lands on a preview you approve.
- What will my AI fix without asking me?
- The mechanical things: a button with no name, a menu control pointing at a panel that does not exist, a decorative icon being read aloud, an attribute that contradicts the element it sits on. Those have one right answer. It fixes them on the draft, and you approve the draft before anything goes live.
- Can it take off a label that is wrong?
- Yes. If a hidden label is wrong, or sits on something that should not have one, ask your AI to remove it. It can take it off one element or every matching element across the site in one go, and it tells you how many it changed. As always, it lands on the draft for you to approve.
- What will it ask me about?
- Anything that needs a human: what a photo shows, whether an image is just decoration, where a vague link like read more actually goes. It drafts a suggestion from the page and shows you the list; one yes applies the ones you like.
- Will this make my site compliant?
- It makes it work better for real people, which is the point. Your AI will not claim a standard is met from one pass: what it runs is a check of your pages for the things a machine can be sure about - missing picture descriptions, headings out of order, controls with no name, labels that point nowhere - and it tells you what it looked at. Ask it is my site easy for everyone to use for the wider picture, and approve each change on the preview as usual.