Try it with a keyboard and a screen reader

Automated tools find only a part of accessibility problems. The quickest manual test you can run is to put your mouse away and use the keyboard.

Keyboard test

Open the demo page and press Tab repeatedly. For each stop, ask:

1. Can I see where focus is right now?
2. Is the order logical, following the visual reading order?
3. Can I reach and operate every interactive element?
4. Can I get out again, or am I trapped inside something?

On the demo page you will find at least three failures. The custom dropdown cannot be opened with the keyboard. The "Book now" control is a div with a click handler, so it is not focusable. And the focus outline was removed with outline: none, so you cannot tell where you are.

Screen reader basics

Every major platform has a free screen reader:

• NVDA on Windows (free download)
• VoiceOver on macOS and iOS (built in, Cmd+F5 on a Mac)
• TalkBack on Android (built in)

You only need a few commands to start. With VoiceOver on macOS, use VO (Control+Option) with the arrow keys to move, and open the rotor with VO+U to list headings, links and form controls. In NVDA, press H to jump between headings, Tab for interactive elements and Insert+F7 for the elements list.

Listen to the demo page. Notice that the event image is announced as "image" with no description, the price table is read as a jumble of numbers, and the "Book now" control is not announced as a button at all.

Write it down

Make a short list of every problem you noticed, in plain words, like "cannot open date picker with keyboard". This is exactly how real audits start. In later lessons, each fix maps to one of these notes, and you will run the same manual test again at the end.

One important habit: test with the screen reader in the browser it pairs best with. VoiceOver works best with Safari and NVDA works well with Chrome and Firefox. Odd results in an unusual combination are not always your bug.