In this guide: Web accessibility basics: what accessibility means, images and alt text, color contrast, keyboard navigation, and free tools to test your website.
Web accessibility means building websites that everyone can use — including people with visual, hearing, motor, and cognitive disabilities. It’s not only the right thing to do; it also improves usability, SEO, and in many regions, legal compliance.
What accessibility means
People interact with websites in different ways:
- Screen readers read content aloud for blind and low-vision users.
- Keyboard-only navigation for people who can’t use a mouse.
- Screen magnification and high contrast for low-vision users.
- Captions and transcripts for deaf and hard-of-hearing users.
- Clear, simple layouts for people with cognitive or learning disabilities.
- Voice control software.
The main standard is the Web Content Accessibility Guidelines (WCAG), organized around four principles — content must be Perceivable, Operable, Understandable, and Robust (POUR). Many organizations aim for WCAG 2.1 or 2.2 Level AA.
Accessibility benefits everyone: captions help people watching without sound, good contrast helps in bright sunlight, and clear structure helps every reader skim.
Images and alt text
Alt text (alternative text) describes images for screen reader users and appears if an image fails to load.
How to write good alt text:
- Describe the purpose and content of the image in context.
- Be concise — usually a short sentence.
- Don’t start with “image of” — screen readers already announce it’s an image.
- Include text that appears in the image.
- For decorative images, use empty alt text (
alt="") so screen readers skip them.
- For linked images, describe the link destination.
Examples:
- ❌
alt="IMG_2034"
- ❌
alt="image"
- ✅
alt="WordPress dashboard showing the Plugins menu"
In WordPress, add alt text in the Media Library or the image block settings.
Videos: add captions and, for important content, transcripts.
Color and contrast
Contrast between text and background must be sufficient for people with low vision or color blindness.
WCAG AA contrast ratios:
- Normal text: at least 4.5:1
- Large text (around 24 px regular or 19 px bold): at least 3:1
- UI components and graphics (buttons, icons, form borders): at least 3:1
Tips:
- Light gray text on white backgrounds is a common failure.
- Don’t rely on color alone to convey meaning — for example, pair red error borders with an error message and icon.
- Test links — they should be distinguishable from surrounding text (underlines help).
- Dark themes also need contrast checks.
Keyboard navigation
Many users navigate with the keyboard (Tab, Shift+Tab, Enter, Space, arrow keys).
Test your site:
- Put your mouse aside.
- Press Tab repeatedly from the top of the page.
- Check:
– ☐ Can you reach every link, button, and form field?
– ☐ Is there a visible focus indicator showing where you are?
– ☐ Is the order logical (top to bottom, left to right — or right to left for RTL)?
– ☐ Can you open and close menus, modals, and popups?
– ☐ Can you escape popups with the Esc key?
– ☐ Is there a “Skip to content” link?
Common problems:
- Removed focus outlines (
outline: none) without a replacement.
- Clickable
<div> elements instead of real <button> or <a> elements.
- Keyboard traps in modals or embedded widgets.
More accessibility essentials
- Use proper headings (H1, H2, H3 in order) — screen reader users navigate by headings.
- Label form fields clearly (not just placeholder text).
- Write descriptive link text — “Read our SSL guide” instead of “Click here.”
- Set the page language (
lang="en" or lang="ar").
- Make sure text can be resized to 200% without breaking layouts.
- Avoid auto-playing audio and flashing content.
- Use ARIA only when necessary — native HTML elements are usually best.
Testing tools
- WAVE (browser extension and web tool): highlights errors like missing alt text and low contrast.
- Lighthouse accessibility audit in Chrome DevTools.
- axe DevTools extension for detailed checks.
- Contrast checkers (such as WebAIM’s).
- Screen readers: NVDA (free, Windows), VoiceOver (built into Mac and iPhone), TalkBack (Android).
Automated tools catch many — but not all — issues. Combine them with manual keyboard and screen reader testing. Choose themes tagged “accessibility-ready” to start on a solid foundation.
Further reading: MDN Web Docs learning area
Key Takeaways: Web Accessibility Basics
- Accessibility makes your site usable for everyone and improves UX and SEO.
- Write meaningful alt text and caption videos.
- Meet contrast ratios and don’t rely on color alone.
- Ensure full keyboard navigation with visible focus.
- Test with WAVE, Lighthouse, and a screen reader.
