How to check if your website is accessible - a practical guide

I am writing this after running an accessibility audit on dede.agency. I expected a few minor fixes. I found 12 contrast issues, missing alt texts, and a contact form that was invisible to screen readers.

And I was convinced the site was fine.

You do not need to memorize the WCAG specification to check your own site. All it takes is 10 minutes and a few simple tests. Here is how, step by step.

Test 1: Keyboard (2 minutes)

Put the mouse aside. Open your website and navigate using only the keyboard.

• Tab - move to the next element (link, button, form field)
• Shift+Tab - go back to the previous one
• Enter - click
• Escape - close modals, popups

What to look for:

Can you see where you are? The active element should have a visible outline (focus ring). If you press Tab and cannot tell what is selected - that is a failure. A keyboard user is lost.

Can you reach everything? Menus, links, buttons, forms - everything must be reachable with Tab. If an element is clickable with a mouse but Tab skips it - problem.

Are you stuck? If Tab leads to an element you cannot leave (a modal without a close option, a carousel with no exit) - that is a focus trap. One of the more serious WCAG violations.

Test 2: Contrast (2 minutes)

Open the WebAIM Contrast Checker. Check your text color against the page background.

WCAG AA requirements:

• Regular text (up to 18px): contrast minimum 4.5:1
• Large text (18px bold or 24px+): minimum 3:1

Common problems? Light gray text on a white background. White text on a light photo. Form placeholders that look decorative but should be readable.

To check the whole page at once, use the WAVE browser extension. It visually marks all contrast issues, missing alt texts, and structural errors on a single page.

Test 3: Text zoom (1 minute)

Ctrl+Plus (Cmd+Plus on Mac) - zoom the page to 200%.

Is the text readable? Do elements overlap? Does the menu still work? Can you scroll?

That is it. If anything breaks at 200%, that is a serious issue. People with low vision regularly use browser zoom, and your site needs to handle it.

Test 4: Images (2 minutes)

Right-click on an image and select Inspect Element. Look for the alt="" attribute.

• If alt is empty (alt="") - the screen reader skips it. OK only for decorative images (icons, backgrounds)
• If alt is descriptive (alt="The dede team working in the office") - good
• If alt is missing entirely - the screen reader reads the file name. Imagine hearing: "IMG_20240315_142358.jpg"

Product photos, team photos, infographics - these need meaningful alt text. "Photo" or "image" is not meaningful.

Test 5: Forms (2 minutes)

Open the contact form on your site. Click on the label text "Name" (the text next to the field). Does the cursor jump into the field?

If yes - the label is properly connected (<label for="...">). If not - a screen reader does not know what the field is for. A user hears "text field" with no context.

Also check:

• Do fields have visible labels (not just a placeholder that disappears on click)?
• Do error messages say WHAT is wrong? ("Enter a valid email address" vs "Error")
• Are required fields marked? (Not by color alone - not everyone sees color)

Automated tools

Manual tests catch a lot, but not everything. Free tools worth running:

Lighthouse - built into Chrome. F12, Lighthouse tab, check Accessibility, click Analyze. You get a 0-100 score with a list of issues.

WAVE - browser extension. Visually marks errors on the page - you see exactly where the problem is.

axe DevTools - Chrome extension. More detailed than Lighthouse, with explanations of how to fix each issue.

A word of caution: automated tools catch about 30-40% of accessibility problems. The rest can only be found manually - keyboard navigation, screen reader testing, interface logic. That is why the manual tests above matter so much.

Screen reader - bonus for the brave

If you have 5 minutes and want to see your site the way a blind person does:

• Mac: VoiceOver is built in. Cmd+F5 to turn on. Cmd+F5 again to turn off
• Windows: NVDA - free, download here
• iPhone: Settings, Accessibility, VoiceOver

Turn it on and try to navigate your site. This experience changes your perspective. You suddenly understand why alt text "photo" is useless and why element order matters.

What is next

Got a list of issues? Good. In the next post I will describe the most common accessibility mistakes, what it costs to fix them, and what happens when you ignore them.

At dede.agency we ran these tests and implemented the fixes - from contrast, through focus-visible, to an accessibility widget with 4 modes. If you are planning a website or rebuilding an existing one - WCAG is worth including from the start, not bolting on at the end.