How to fix the most common WordPress accessibility problems
Ten problems that show up on almost every site we scan, what each one actually does to a person, and the exact markup to change. Nothing here needs a plugin purchase; most of it is a five-minute edit.
1. Images with no alt attribute
Wrong: <img src="team.jpg">
What happens: a screen reader reads the file name, or nothing at all. A blind visitor hears "team dot jay peg" or silence where a picture of your team should have been described.
Fix: <img src="team.jpg" alt="The four people on our support team at the Bristol office">.
If the image is purely decorative, use alt="" so it is skipped on purpose. An empty alt is a
decision; a missing alt is an accident.
2. Alt text that says "image" or "IMG_2481.jpg"
Wrong: alt="image", alt="photo", alt="IMG_2481.jpg"
What happens: screen readers already announce that something is an image, so you hear "image, image". A file name tells the visitor nothing.
Fix: describe the content and the reason it is there. For a logo that links to the home
page, alt="Company name, home page" is usually right.
3. Links that are only an icon
Wrong: <a href="/contact/"><svg …></svg></a>
What happens: the link is announced as "link" with no destination, and a list of such links is unusable.
Fix: add text, or an aria-label, or an image inside with real alt text:
<a href="/contact/" aria-label="Contact us">…</a>
4. Form fields with no label
Wrong: <input type="email" name="email" placeholder="Email">
What happens: the field is announced without saying what goes in it, and a placeholder disappears the moment typing starts.
Fix: <label for="email">Email</label><input type="email" id="email" name="email">.
Search forms are the usual offender: they often contain only a placeholder.
5. Headings used as decoration
Wrong: an h1 in the header, then an h4 for the next section
because the font size looked right.
What happens: screen reader users navigate by headings; the outline of your page becomes a jumble, and they lose their place.
Fix: use headings in order (h1, h2, h3) and change the size with CSS. One h1 per page.
6. Tables with no header cells
Wrong: <tr><td>Price</td><td>£50</td></tr>
What happens: the screen reader cannot say which column a number belongs to, so a price list becomes a stream of numbers.
Fix: <tr><th scope="col">Price</th><th scope="col">Amount</th></tr>
7. Embedded videos and maps with no title
Wrong: <iframe src="…youtube…"></iframe>
What happens: the visitor hears "frame" and has no idea what is inside it.
Fix: <iframe title="Video: how our booking system works" …></iframe>
8. Zoom blocked in the viewport tag
Wrong: <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
What happens: people with low vision cannot pinch to zoom, which is often the single most useful thing they can do on a phone.
Fix: <meta name="viewport" content="width=device-width, initial-scale=1">
9. tabindex values above zero
Wrong: <div tabindex="7">
What happens: keyboard focus starts jumping around the page in an order that does not match what is on screen, and controls can become unreachable.
Fix: remove it, or use tabindex="0" if an element genuinely needs to be
focusable, and put things in the right order in the markup.
10. An overlay plugin instead of fixing anything
What happens: a script adds buttons and fixes on top of your pages. The underlying markup is unchanged, so anyone whose tools do not run that script still meets the same broken page. And the widget often claims a legal outcome that only a court can decide; several have been the subject of lawsuits rather than a defence against them.
Fix: fix the ten things above. Then test with a keyboard, then with a screen reader, then with a person who uses one. That is the honest path, and it is also cheaper.
Two things worth doing whatever else you do
- Tab through your own site with the mouse unplugged. You will find something within a minute.
- Pay somebody who uses assistive technology to try your most important task, and fix what they hit. That single hour is worth more than any score.