BitWithBite
UI/UX Worksheet
♿️ Accessibility
SCORE___ / 20
NameClassDate
After this worksheet you can
Apply WCAG contrast rulesExplain keyboard navigationExplain screen reader supportExplain inclusive design📚 Quick Recap
🎯 What you'll practice: WCAG 2.1 contrast, keyboard access, and screen reader support.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1WCAG 2.1 AA requires this contrast for normal text:
2Every interactive element must be reachable via:
3Alt text and ARIA labels help:
4Inclusive design benefits:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Large text (18pt+/14pt bold) needs a minimum contrast of :1.
6The Figma plugin covered for checking contrast is .
7Give an example of a situational disability (not permanent or temporary).
8Why should contrast be checked during design, not after development?
9Why does accessible design often improve the experience for non-disabled users too?
🚀 Section C · Challenge ● CHALLENGE 5
10Audit a screen from any app you use for 3 accessibility issues (contrast, touch target size, missing alt text, etc.) and suggest a fix for each.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-A 4-B | 5 = 3 6 = Stark 7 = e.g. holding a baby in one arm (temporarily one-handed), or bright sunlight glare on a screen 8 = Because fixing contrast in code after development is slower and more expensive than adjusting a color value in the design file 9 = Larger touch targets, higher contrast, and clear keyboard flow tend to make an interface easier and faster for everyone, not just users with disabilities | 10 = Answers vary based on the app audited.