Lesson 8: Accessibility (WCAG 2.1) & Inclusive Digital Design
Developing a complex digital outcome to solve a real-world problem for NCEA Level 3 Digital Technologies.
🎯 Ngā Whāinga Akoranga | Learning Intentions
Web Content Accessibility Guidelines (WCAG 2.1 Level AA principles: Perceivable, Operable, Understandable, Robust), semantic HTML5 elements, ARIA attributes, keyboard navigation, and colour contrast compliance.
Audit outcome accessibility using screen readers and DevTools, fix focus traps, add proper ARIA labels, and ensure full keyboard navigable UI.
🎥 Media Anchor & Pedagogical Scaffold
WCAG 2.1 Accessibility & Inclusive UX Design
Video Clip: “WCAG for beginners - What are the Web Content Accessibility Guidelines? - Web Accessibility” — 1 min 50 s.
🧠 1. Before Viewing (Activate & Predict)
How does designing a digital outcome for users with visual, motor, or cognitive impairments create a better experience for all users?
👁️ 2. During Viewing — watch the full 1m50s clip, capturing as you go
- Capture: Test keyboard tab navigation across interactive forms without using a mouse.
- Capture: Verify colour contrast ratios (minimum 4.5:1 for normal text under WCAG AA).
- Capture: Inspect semantic landmark elements (<main>, <nav>, <header>, aria-live regions).
🗣️ 3. After Viewing & Kaiako Move (Process & Apply)
Kaiako Move: Have students navigate their web application with screen reader software turned on and monitors dimmed.
Immediate Task: Complete Section 8 of your Digital Tech Portfolio: WCAG 2.1 Accessibility Audit & Remediation Report.
⚡ Whakaoho | Do Now: Unplug Your Mouse
Navigate your own app using only the keyboard. Tab through it, start to finish.
Two minutes: note the first place you get stuck, or lose track of where the focus indicator has gone. For some of your users that is not an exercise — it is how they use every site, every day, and the fix is usually small once you have felt it.
📖 Activity 1: Audit Against the Four Principles, Then Listen to It
Audit (13 min). Work through Perceivable, Operable, Understandable, Robust. Check contrast ratios in DevTools, confirm every image has appropriate alt text — decorative images take empty alt, not a description — and confirm every form input has a label genuinely associated with it, not just sitting nearby.
Fix, then listen (12 min). Turn on a screen reader and listen to your main screen. Release any focus traps. Add ARIA only where semantic HTML truly cannot express the meaning — reaching for ARIA first is the standard mistake, and a real button beats a div pretending to be one every time.
📝 Activity 2: Level 3 Digital Technology Portfolio Task & Merit/Excellence Scaffolding (20 mins)
Portfolio Section 8. Submit: (1) a WCAG audit table listing each issue and its level; (2) before-and-after evidence for at least three fixes, one of them a keyboard trap; (3) a screen-reader walkthrough describing what a non-sighted user hears on your main screen — including one thing that is still not good enough, stated plainly.
🏫 Kaiako Planning & Pedagogy Notes
NCEA Level 3 Alignment: Direct preparation for Level 3 Digital Technology (Develop a complex digital outcome to solve a specified problem). Emphasise systematic testing, stakeholder feedback loops, and technical code refinement for Merit/Excellence grades.