optional · CSS study notes
23. Web Application Issues — Accessibility
CSS Optional — Paper-II, Section-B · P-II.VI.23 · First of the six Web applications issues in the syllabus (accessibility, testing, performance, operation, maintenance, security).
1. Definition and Why It Matters
- Web accessibility means designing websites so that people with disabilities — visual, hearing, motor, cognitive — can perceive, understand, navigate and interact with them.
- Who benefits: blind and low-vision users (screen readers, magnifiers), deaf users (captions), users with motor impairments (keyboard/voice only), cognitive impairments, older users, and everyone in temporary or situational limits (broken arm, bright sunlight, slow internet).
- Why: equal access is a right; legal obligations in many countries (ADA and Section 508 in the US, the European Accessibility Act); larger audience; better SEO and usability for all.
2. WCAG — Web Content Accessibility Guidelines
Published by W3C's Web Accessibility Initiative (WAI): WCAG 2.0 (2008), 2.1 (2018, mobile/low-vision additions), 2.2 (2023).
POUR principles
| Principle | Meaning | Examples |
|---|---|---|
| Perceivable | Information must be presentable in ways users can perceive | Alt text for images, captions/transcripts, sufficient colour contrast, resizable text |
| Operable | UI must be usable with different inputs | Full keyboard access, visible focus, enough time, no seizure-inducing flashing, skip links |
| Understandable | Content and operation must be clear | Plain language, consistent navigation, clear labels and error messages, page language declared |
| Robust | Works with current and future assistive technologies | Valid, semantic HTML; correct ARIA roles and names |
Conformance levels: A (minimum), AA (standard target for most laws and organizations), AAA (highest, not required for whole sites).
3. Practical Techniques
<html lang="en">
<img src="chart.png" alt="Bar chart: admissions rose from 800 in 2023 to 1,200 in 2025">
<label for="cnic">CNIC number</label>
<input id="cnic" name="cnic" aria-describedby="cnicHelp" required>
<small id="cnicHelp">Format: 12345-1234567-1</small>
<button aria-label="Close dialog">×</button>
<a href="#main" class="skip-link">Skip to main content</a>
<video controls><track kind="captions" src="lecture-en.vtt" srclang="en"></video>
- Use semantic HTML (header, nav, main, button, headings in order) rather than clickable divs.
- Alt text: meaningful for informative images; empty
alt=""for decorative ones. - Colour contrast: at least 4.5:1 for normal text and 3:1 for large text (AA); 7:1 for AAA. Don't convey information by colour alone.
- Keyboard: every function reachable with Tab/Enter/Space; visible focus outline.
- Forms: labels tied to inputs; clear error messages next to fields.
- ARIA (Accessible Rich Internet Applications) attributes add roles/states for dynamic widgets — but "no ARIA is better than bad ARIA"; prefer native elements.
- Avoid content that flashes more than 3 times per second.
- Responsive, zoomable layouts (text resizable to 200% without loss).
4. Testing Accessibility
Automated tools: WAVE, Lighthouse, axe. Manual checks: keyboard-only navigation; screen readers (NVDA, JAWS, VoiceOver, TalkBack); zoom to 200%; colour-contrast analysers; testing with users with disabilities.
📐 Worked Numerical — Contrast Ratio
Formula: ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker (0 = black, 1 = white).
- Black on white: (1 + 0.05) / (0 + 0.05) = 21:1 (maximum).
- Text with L = 0.18 on white: (1.05) / (0.23) ≈ 4.57:1 → passes AA for normal text (≥ 4.5), fails AAA (< 7).
🎯 CSS Exam Angle
Definition → who benefits → WCAG and POUR table → 5–6 concrete techniques with a code snippet → testing tools. Mentioning AA as the usual target and the 4.5:1 contrast rule shows precise knowledge.
⚠️ MCQ Traps
- WCAG is published by W3C (WAI); AA is the usual legal target.
- POUR = Perceivable, Operable, Understandable, Robust.
- Decorative images get empty alt (
alt=""), not missing alt. - Minimum AA contrast for normal text is 4.5:1.
- ARIA supplements, not replaces, semantic HTML.
✅ Self-Check (with Answers)
Q1. What are the four POUR principles?
Ans: Perceivable, Operable, Understandable, Robust.
Q2. Give five techniques to make a web form accessible.
Ans: Label every field with a linked label; group related fields with fieldset/legend; give clear, specific error messages near the field; ensure full keyboard operation with visible focus; don't rely on colour alone to show errors; indicate required fields in text.
Q3. Why is a clickable div worse than a button element?
Ans: A native button is focusable, operable with Enter/Space and announced as a button by screen readers automatically; a div needs extra tabindex, key handlers and ARIA roles to match, and is often left inaccessible.
Q4. Which WCAG level do most organizations target, and what contrast does it require for normal text?
Ans: Level AA; a contrast ratio of at least 4.5:1.
Q5. Name two automated and two manual accessibility testing methods.
Ans: Automated — WAVE, Lighthouse/axe. Manual — navigating with keyboard only; using a screen reader such as NVDA or VoiceOver (also zooming to 200%, user testing).