A Practical Website Accessibility Tutorial: WCAG Basics You Can Ship Today
By the SiteLens AI team · August 22, 2026
Accessibility is good for users and good for SEO. This tutorial covers the highest-impact WCAG fixes — alt text, contrast, focus states, and labels — with clear steps.
Accessibility is often treated as a compliance afterthought, but the same changes that make a site usable for people with disabilities also make it clearer for everyone and easier for search engines to understand. This tutorial covers the fixes with the highest impact for the least effort.
1. Write meaningful alt text
Every image that conveys information needs an alt attribute that describes its purpose in context. Decorative images should use empty alt (alt="") so screen readers skip them. Missing alt is the most common accessibility failure and one of the easiest to fix.
<img src="team.jpg">
<img src="team.jpg" alt="The SiteLens team of six working at a long desk with laptops">
Describe what the image communicates, not what it literally shows. A photo of a team is not just “people” — it tells the reader who you are.
2. Ensure sufficient color contrast
Text must stand out from its background. The WCAG standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Light gray on white is a common failure. Check your palette with a contrast checker and darken text or lighten backgrounds as needed.
3. Make every form field labeled
Every input should have a visible label associated with it using a label element, not just placeholder text. Placeholders disappear as soon as the user types, leaving them without context. Labels persist and work with screen readers.
<input placeholder="Email address">
<label for="email">Email address</label>\n<input id="email" name="email" type="email">
The after version keeps the label visible, associates it with the field for assistive technology, and uses the correct input type so mobile devices show the right keyboard.
4. Preserve visible focus states
Keyboard users navigate by tabbing through focusable elements. Removing the default focus outline (outline: none) without a replacement traps these users. Always provide a visible focus indicator, either the browser default or a custom one with enough contrast.
5. Use semantic HTML
Use button for actions and a for navigation, not divs with click handlers. Use heading elements in order rather than styling paragraphs to look like headings. Semantic HTML gives structure to screen readers and search engines for free.
6. Test with real tools
Run an automated audit to catch the obvious failures, then navigate your site with only the keyboard to catch what automation misses. Try a screen reader for five minutes. These tests reveal problems no checklist will surface.
SiteLens AI flags missing alt text and heading structure so you know where to start. Fix those first, then work through the steps above for a site that is usable by more people and clearer to everyone.
See how your site scores
Run a free website review