{"id":"l-a11y-5-2","courseId":"web-accessibility","lang":"en","kind":"lesson","summary":"Test Ticketly by hand with a keyboard, NVDA and VoiceOver using the core navigation commands, recognise what correct announcements sound like, and write findings developers can act on.","html":"

Automated tools told you what Ticketly is missing. A keyboard and a screen reader tell you what it is like to use. This is the part of testing that most teams skip, and it is the part that finds the problems people actually complain about. You don’t need to become an expert screen reader user. You need about fifteen commands and a habit of listening carefully.

\n

The keyboard pass

\n

Start every manual test without a mouse. Go from the address bar to the end of the page with Tab, then back with Shift+Tab, and at each stop ask:

\n
    \n
  1. Can I reach it? Every control a mouse can use must be reachable.
    2. \n
  2. Can I see it? Focus is clearly visible and not hidden behind sticky bars.
    3. \n
  3. Is the order logical? Focus follows the reading order of the page.
    4. \n
  4. Does it work? Enter follows links and activates buttons; Space activates buttons and toggles checkboxes; arrow keys work inside radios, tabs and menus.
    5. \n
  5. Can I get out? Escape closes dialogs and menus, focus returns to the opener, and nothing traps focus.
    6. \n
\n

On Ticketly, this pass alone found the positive tabindex, the invisible focus, the div button and the modal that left focus behind, before anyone opened a screen reader.

\n

Which screen readers to test

\n

In WebAIM’s 2026 survey, the most common primary desktop screen readers were JAWS (55.0%) and NVDA (32.9%), both on Windows, followed by VoiceOver on macOS (6.5%). On mobile, 72.2% of respondents use VoiceOver on iOS, well ahead of TalkBack on Android (29.5%). A practical test matrix:

\n\n

NVDA essentials

\n

NVDA has two modes. In browse mode, NVDA reads the page with a virtual cursor and single letters jump between elements. In focus mode, keys go to the control, so you can type in a field. NVDA switches automatically when you enter a field, and NVDA+Space switches by hand. The NVDA key is Insert by default; you can also enable Caps Lock as the NVDA key, which is handy on laptops.

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ActionNVDA keys
Start NVDA / stop speechCtrl+Alt+N / Ctrl
Read from hereNVDA+Down Arrow
Next line or itemDown Arrow
Next heading / heading level 2H / 2
Next landmarkD
Next form field / button / linkF / B / K
Next table, then move through cellsT, then Ctrl+Alt+Arrows
List of headings, links, landmarksNVDA+F7

Add Shift to any single-letter command to go backwards.

\n

VoiceOver essentials (macOS)

\n

Turn VoiceOver on and off with Cmd+F5. The VO keys are Control+Option. Before you start, open Safari’s settings and enable “Press Tab to highlight each item on a webpage”; otherwise Tab skips links in Safari and you will report false bugs.

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ActionVoiceOver keys
Next / previous itemVO+Right / VO+Left
ActivateVO+Space
Read from here / stop speechVO+A / Control
Next headingVO+Cmd+H
Rotor (headings, links, landmarks, form controls)VO+U, then Left/Right to switch lists

On iOS, swipe right and left to move between items, double-tap to activate, and rotate two fingers on the screen to open the rotor.

\n\n

What correct sounds like

\n

Every interactive element should be announced with a name, a role and, where relevant, a state or value. Listen for the missing piece:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
You hearVerdict
“Book now Friday pass, button”Name and role: good
“Save to wishlist, toggle button, not pressed”Name, role, state: good
“edit text, blank”No name: the field has no label
“Pay now” (and Tab skips it)No role, not focusable: a clickable div
“graphic, IMG underscore 2041 dot jpeg”Missing alt attribute
“How do refunds work?, button” on a disclosureNo state: aria-expanded is missing

Also listen for what doesn’t happen: no announcement after adding a ticket, nothing said when a dialog opens, an error that appears silently.

\n

Writing it up

\n

A finding a developer can fix in one go has six parts:

\n
findings/ticketly-042.txt
Title:    Quantity stepper buttons have no accessible name\nWhere:    /events/friday, Friday pass card\nSteps:    NVDA + Chrome. Tab to the "−" button after "Quantity".\nActual:   NVDA says "button". Same for "+".\nExpected: "Fewer Friday passes, button" and "More Friday passes, button".\nWCAG:     4.1.2 Name, Role, Value (A). Severity: high (blocks purchase).
\n\n

You now have every tool you need: automated scans, a keyboard and two screen readers. The final lesson puts them together into a complete audit of Ticketly, and into habits that keep it accessible after you leave.

\n","toc":[{"id":"sec-1","text":"The keyboard pass","level":2},{"id":"sec-2","text":"Which screen readers to test","level":2},{"id":"sec-3","text":"NVDA essentials","level":2},{"id":"sec-4","text":"VoiceOver essentials (macOS)","level":2},{"id":"sec-5","text":"What correct sounds like","level":2},{"id":"sec-6","text":"Writing it up","level":2}],"takeaways":["A keyboard pass checks reachability, order, visible focus, operation with Enter and Space, Escape on overlays, and no traps.","Test NVDA with Chrome or Firefox on Windows and VoiceOver with Safari on macOS and iOS; together they cover most real screen reader use.","Screen reader users navigate by headings, landmarks, links and form fields, so test with those commands, not only by reading from the top.","Every announcement should give a name, a role and any state; a missing piece of that trio is a bug."],"further":[{"title":"WebAIM: Using NVDA to Evaluate Web Accessibility","url":"https://webaim.org/articles/nvda/"},{"title":"WebAIM: Using VoiceOver to Evaluate Web Accessibility","url":"https://webaim.org/articles/voiceover/"},{"title":"WebAIM: Keyboard Accessibility","url":"https://webaim.org/techniques/keyboard/"},{"title":"W3C WAI: Easy Checks, A First Review of Web Accessibility","url":"https://www.w3.org/WAI/test-evaluate/preliminary/"}],"quiz":[{"q":"

You are testing Ticketly with NVDA in browse mode. Which key jumps to the next heading?

","options":[{"text":"H","why":"Correct. In browse mode single letters navigate by element type. Shift+H goes back, and 1 to 6 jump to a heading of that level."},{"text":"Tab","why":"Tab moves between focusable elements such as links and buttons, and skips headings entirely."},{"text":"NVDA+F7","why":"That opens the Elements List, a dialog listing headings, links, landmarks and more. Useful, but it isn’t the single-key jump."},{"text":"D","why":"D jumps to the next landmark, such as main or navigation, not the next heading."}],"answer":0},{"q":"

On macOS Safari with VoiceOver on, Tab skips every link on Ticketly and only visits form fields. What is going on?

","options":[{"text":"The links are missing href attributes","why":"That is possible on a broken page, but here every link works in other browsers. This is a Safari setting, not a page bug."},{"text":"VoiceOver can’t read links in Safari","why":"VoiceOver reads links in Safari fine with VO+arrow keys and the rotor. The issue is only the Tab key’s behaviour."},{"text":"Safari by default doesn’t include links in the Tab order; enable “Press Tab to highlight each item” or use Option+Tab","why":"Correct. Turn the setting on before keyboard testing in Safari, or you will report false bugs."}],"answer":2},{"q":"

Focus reaches Ticketly’s “Show more dates” control and NVDA says “Show more dates, button”. The control reveals a hidden list. What is missing?

","options":[{"text":"Nothing; the name and role are both present","why":"For a toggle that shows and hides content, the state is the third part users need. Without it they can’t tell whether the list is open."},{"text":"The state, “collapsed” or “expanded”, which comes from aria-expanded","why":"Correct. Name, role and state together tell the user what the control is, what it does and where it stands."},{"text":"A description from aria-describedby explaining that it is a button","why":"The role already says it is a button. A description would repeat that while the state is still missing."},{"text":"The word “link”, because it reveals content","why":"Revealing content in place is an action, so button is the right role. The missing piece is the state."}],"answer":1}],"exercise":{"kind":"choice","multiple":true,"options":["div-pay","radio-group","blank-field","dialog-open","file-name","status-update","no-state"],"correct":["div-pay","blank-field","file-name","no-state"],"title":"Listen to Ticketly's checkout","prompt":"

You tested Ticketly’s checkout with NVDA and Chrome and wrote down what you heard at seven points. Select every announcement that reveals a bug. For each one, think about which of name, role and state is missing or wrong.

\n","hints":["A good announcement has a name, a role, and a state when the control has one.","Listen for what is missing: no name, no role, no state, or a file name where a description should be.","Four of the seven are bugs."],"explanation":"

Four announcements reveal bugs. “Pay now” with no role, skipped by Tab, is a clickable div: use a button. “edit text, blank” is a field with no label. “graphic, IMG underscore 2041 dot jpeg” means the image has no alt attribute, so the screen reader falls back to the file name. And “How do refunds work?, button” on a show/hide control is missing its state, so aria-expanded needs adding. The other three are what correct sounds like: a named radio group with position, a named dialog that announces itself and its first field, and a polite status message read without moving focus.

\n","checkLabels":{},"optionText":{"div-pay":{"text":"Reading the summary: “Pay now”. Tab moves from the card number field straight past it to the footer.","why":"Bug. No role and not focusable: it is a div pretending to be a button."},"radio-group":{"text":"Tabbing into the ticket options: “Ticket type, grouping, Standing, radio button, checked, 1 of 2”.","why":"Correct behaviour. The fieldset’s legend names the group, and the radio has a name, a role, a state and its position."},"blank-field":{"text":"Tabbing to the email field: “edit text, blank”.","why":"Bug. The field has no accessible name, so the user doesn’t know what to type. It needs a label."},"dialog-open":{"text":"After pressing Book now: “Book Friday pass, dialog, Quantity, spin button, 1”.","why":"Correct behaviour. The dialog is named, announces itself, and focus moved to its first field."},"file-name":{"text":"Arrowing past the venue photo: “graphic, IMG underscore 2041 dot jpeg”.","why":"Bug. The image has no alt attribute, so NVDA reads the file name. Add meaningful alt text, or alt=“” if it is decorative."},"status-update":{"text":"After pressing Add to basket, focus stays on the button and NVDA says: “Ticket added. 2 tickets in your basket.”","why":"Correct behaviour. A polite live region announced the update without moving focus."},"no-state":{"text":"On the FAQ toggle that shows and hides an answer: “How do refunds work?, button”. Pressing it changes nothing in the announcement.","why":"Bug. A disclosure needs aria-expanded so users hear “collapsed” and “expanded”."}}},"words":833,"readMinutes":4}