Accessibility Testing
Build for everyone. In New Zealand, 1 in 4 people has a disability. Accessibility testing ensures that people who navigate differently can still use your product effectively.
1 The Hook — The "Invisible" Page
Imagine you're trying to use an ATM, but the screen is turned off. You try to use the buttons, but they don't beep or vibrate. You have money in your account, but you can't reach it. This is how an inaccessible website feels to a blind user.
Accessibility (a11y) isn't just a "nice to have." In New Zealand, Government Web Standards require all public sites to meet WCAG 2.1 AA. If you ignore it, you aren't just being exclusive — you might be breaking the law.
2 The Rule — POUR
Every accessible system must follow the POUR principles: Perceivable, Operable, Understandable, and Robust.
- Perceivable: Can I see/hear the content? (Alt text, Contrast).
- Operable: Can I use the site without a mouse? (Keyboard Tab).
- Understandable: Do I know what to do next? (Clear labels).
- Robust: Does it work with assistive tech? (Screen readers).
3 The Analogy — The Blindfold
The Screen Reader as a Guide.
Imagine navigating a building while wearing a Blindfold. You rely on a Guide (The Screen Reader) to tell you where the stairs are, where the doors lead, and if there's an obstacle in the way. If the building owner hasn't labeled the doors, your Guide says: "There is a door here, but I don't know where it goes." Accessibility testing is making sure the "Labels" (Code) are accurate so the Guide can help the user.
4 Watch Me Do It — NZ Government Form
Scenario: You're testing a new "Passport Application" form for the NZ Government. It must meet WCAG 2.1 AA.
- The Keyboard Check: Put away your mouse. Tab through the form. Bug Found: The "Next" button is skipped by the Tab key.
- The Contrast Check: Use a tool (Axe) to check the "Submit" button. Bug Found: Light gray text on a white background (Ratio 2:1, needs 4.5:1).
- The Screen Reader Check: Turn on VoiceOver/NVDA. Check: Does it say "Search" for the magnifying glass icon?
-
The NZ-Specific Check: For Te Reo Māori words, is
lang="mi"used? Result: If not, the screen reader mispronounces "Aotearoa" using English rules.
5 Decision Tool — Automated vs. Manual
🤖 Automated (Axe/Lighthouse)
- Catches: Missing Alt text, Duplicate IDs, Bad Contrast.
- Speed: Instant.
- Limit: Only finds ~30% of bugs.
🧑 Manual (Keyboard & Reader)
- Catches: Tab order, Logic, Meaningful labels.
- Speed: Slower.
- Limit: Requires human empathy.
6 Common Mistakes
🚫 "Click Here" Link Text
I used to think: "Click Here" is clear enough.
Actually: Screen reader users often jump from link to link. If they hear: "Link: Click here, Link: Click here, Link: Click here," they have no idea where they are going. Use descriptive text like "Download the Passport Form" instead.
🚫 Using Color Alone to show Error
I used to think: I'll turn the border red if the email is wrong.
Actually: Color-blind users (8% of men) might not see the red. You must also use an icon or an Error Message (text) to show something is wrong.
7 Now You Try — Choose the ARIA Label
Scenario: You have a button that just has an "X" icon for closing a popup.
What should the aria-label be for a screen reader?
Labels should describe the **Action**, not the appearance.
8 Self-Check
Q1. What is "Alt Text"?
It is a text description of an image (alt="NZ Post Logo"). It is read by screen readers for users who can't see the image, and displayed if the image fails to load.
Q2. What is a "Keyboard Trap"?
It's a bug where a keyboard user can "Tab" into an element (like a video player or a chat box) but cannot "Tab" out. They are stuck in a loop and have to refresh the page.
9 Interview Prep
"How do you convince a stakeholder to spend time on Accessibility?"
Answer: "I focus on three things: 1. Market Reach: 1 in 4 New Zealanders has a disability — that's 25% of our potential customers. 2. Legal Compliance: Meeting NZ Government Web Standards is mandatory for many projects. 3. SEO Benefit: Search engines are 'blind'; if a screen reader can understand our site, Google can too."
10 Next Step
You've mastered the Senior Techniques! You're ready to move from Learning to Doing. Next: The Senior Practice Modules.