Three common flaws, dressed up as monsters for Halloween 2026. Each fix fits in ten lines of code or fewer.
Monster 1 · The ghost
An image without alt text
The problem
When an image has no alt text, a blind person's screen reader announces “image”, sometimes the file name, and nothing else. If the image carries information, such as a dish, a price or opening hours, that information is lost.
Of the one million home pages analysed by WebAIM in February 2026, 53.1% had at least one image without alt text. Source: WebAIM Million 2026.
The fix, in HTML
<!-- Before: the screen reader says "image" or the file name -->
<img src="tart.jpg">
<!-- After: a short sentence, written by you -->
<img src="tart.jpg"
alt="Apricot tart on a wooden board">
<!-- Decorative image: empty alt, it is ignored -->
<img src="wave.svg" alt="">
Check it yourself
- Right-click the image, then choose “Inspect” (Chrome, Edge, Firefox; “Inspect Element” in older versions of Firefox).
- In the
img tag that appears, look for alt="…": the attribute must exist and contain a useful sentence, or nothing at all if the image is decorative. - For the whole page at once: in the “Console” tab of the same tools, paste
document.querySelectorAll('img:not([alt])').length and press Enter. The result should be 0. If the browser blocks pasting, type the phrase it asks for, then paste again.
Who it matters to
Blind and partially sighted people who use a screen reader. But also all your visitors when an image fails to load, and search engines, which use this text to understand your images.
References
Monster 2 · The mummy
Text that is too pale
The problem
Light grey text on a white background strains the eyes: people squint, then give up. The WCAG benchmark is a contrast ratio of at least 4.5:1 between text and background, and 3:1 for large text.
Of the one million home pages analysed by WebAIM in February 2026, 83.9% had low-contrast text. Source: WebAIM Million 2026.
The fix, in CSS
/* Before: light grey on white, contrast 2.32:1 */
p { color: #AAAAAA; background-color: #FFFFFF; }
/* After: dark grey on white, contrast 7:1 */
p { color: #595959; background-color: #FFFFFF; }
/* Minimum: 4.5:1 for body text, 3:1 for large
text (24 px, or about 18.5 px bold).
Just at the limit: #767676 on white = 4.54:1 */
Check it yourself
- Right-click the text, then “Inspect”. In the “Styles” tab (“Rules” in Firefox), note the
color value and the background (background-color, sometimes set on a parent element). - Enter both colours in WebAIM's free Contrast Checker.
- The ratio must reach 4.5:1 for body text. In Chrome and Edge, the inspector also shows it when you click the small colour swatch.
Who it matters to
People with low vision, many older people, people who have trouble telling some colours apart, and everyone reading a phone in bright sunlight.
References
Monster 3 · The lost witch
Invisible keyboard focus
The problem
When you browse with the keyboard, using the Tab key, an outline must show where you are. Many websites remove that outline for looks: you press Tab, Tab, Tab… and lose track of where you are.
The fix, in CSS
/* Before: the focus outline has been removed
a:focus, button:focus { outline: none; }
→ find this line and delete it */
/* After: a clear outline around the active element */
:focus-visible {
outline: 3px solid #1B2B4B; /* aim for 3:1+ against the background */
outline-offset: 2px; /* a little breathing room */
}
:focus-visible shows the outline during keyboard navigation, without showing it on most mouse clicks. Pick a colour that stands out on all your backgrounds.
Check it yourself
- Click in the browser's address bar, then press Tab, again and again.
- Each time, you should see at a glance which link, button or field is active.
- Shift + Tab goes back; Enter follows a link. If at some point you can no longer tell where you are, the outline is missing there.
Who it matters to
People who cannot use a mouse: tremors, paralysis, pain in the hand. But also people who prefer the keyboard for speed, or whose trackpad has stopped working.
References
