SkillByAIइंटरैक्टिव संस्करण खोलें →

पाठ 26 / 26

Cheat sheet और Interview Q&A

Pre-launch checklist, interview प्रश्न-उत्तर और भरोसेमंद learning resources के साथ accessibility दोहराएँ।

त्वरित चेकलिस्ट

Quick reference के लिए pre-launch accessibility checklist।

# Accessibility Pre-Launch Checklist

- [ ] Page has unique, descriptive `<title>`
- [ ] One `<h1>` per page, logical heading hierarchy
- [ ] All images have `alt` text (empty if decorative)
- [ ] All form fields have associated `<label>`
- [ ] Buttons and links have descriptive text
- [ ] Color contrast: text ≥ 4.5:1 (AA)
- [ ] Keyboard navigation works (Tab, Enter, Escape)
- [ ] Focus indicator is visible
- [ ] No keyboard traps
- [ ] Skip link to main content
- [ ] Video has captions and transcript
- [ ] No auto-playing sound
- [ ] ARIA used sparingly and correctly
- [ ] aria-live for dynamic updates
- [ ] Tested with NVDA/VoiceOver
- [ ] Axe DevTools: 0 critical issues

Interview Q&A

Q: A11y क्या है? Numeronym for Accessibility। Q: WCAG levels? A (बुनियादी), AA (न्यूनतम कानूनी), AAA (इष्टतम)। Q: Most common issue? Missing alt text और form labels। Q: ARIA first rule? Semantic HTML पहले use करें। Q: Test SR? NVDA (मुफ्त), VoiceOver (Mac), JAWS (paid)। Q: Skip links purpose? Nav को छोड़कर main content पर jump करें। Q: Updates announce करें? aria-live="polite" या aria-live="assertive"। Q: Keyboard essentials? Tab/Enter/Escape/Arrow काम करें, focus visible, कोई traps नहीं। Q: Color पर्याप्त नहीं? Text/icons के साथ pair करें। Q: बिना माउस? केवल Tab/Enter/Arrow/Escape।

संसाधन

MDN Web Docs: accessibility guide। WCAG 2.1: आधिकारिक guidelines। WebAIM: आलेख + tools। The A11Y Project: समुदाय। axe DevTools: browser extension। NVDA: मुफ्त screen reader।

अंतिम क्विज़ 1/8

अंतिम क्विज़

त्वरित जाँच: कौन-सा WCAG level सामान्य कानूनी आधार है?

  • A
  • AA
  • AAA
  • Level 3
Answer

AA — अधिकांश कानून और नीतियाँ AA स्तर माँगती हैं।

अंतिम क्विज़ 2/8

अंतिम क्विज़

त्वरित जाँच: AA पर सामान्य टेक्स्ट के लिए न्यूनतम contrast ratio क्या है?

  • 2:1
  • 3:1
  • 4.5:1
  • 7:1
Answer

4.5:1 — सामान्य टेक्स्ट को 4.5:1 चाहिए; बड़े टेक्स्ट को 3:1।

अंतिम क्विज़ 3/8

अंतिम क्विज़

त्वरित जाँच: ARIA का पहला नियम कौन-सा है?

  • Add role to every element
  • Use native semantic HTML when possible
  • Always use aria-hidden
  • Use tabindex above 0
Answer

Use native semantic HTML when possible — Native elements में roles, states और keyboard support पहले से होता है।

अंतिम क्विज़ 4/8

अंतिम क्विज़

त्वरित जाँच: Informative image का alt text क्या करे?

  • Repeat the file name
  • Start with "Image of"
  • Describe the image's purpose briefly
  • Be left empty
Answer

Describe the image's purpose briefly — Alt text उद्देश्य बताता है; decorative images में alt="" होता है।

अंतिम क्विज़ 5/8

अंतिम क्विज़

त्वरित जाँच: Visible label को input से कैसे जोड़ें?

  • Use a placeholder only
  • Use <label for> matching the input id
  • Use a title attribute
  • Use a bold <span>
Answer

Use <label for> matching the input id — for/id से बंधा label announce होता है और click target बड़ा करता है।

अंतिम क्विज़ 6/8

अंतिम क्विज़

त्वरित जाँच: कौन-सा attribute dynamic updates को politely announce करता है?

  • aria-live="polite"
  • aria-hidden="true"
  • role="presentation"
  • tabindex="-1"
Answer

aria-live="polite" — Live regions focus हटाए बिना content बदलाव announce करते हैं।

अंतिम क्विज़ 7/8

अंतिम क्विज़

त्वरित जाँच: Skip link का उद्देश्य क्या है?

  • Hide navigation permanently
  • Let keyboard users jump past repeated content
  • Speed up page load
  • Replace headings
Answer

Let keyboard users jump past repeated content — यह keyboard users को पूरा navigation tab करने से बचाता है।

अंतिम क्विज़ 8/8

अंतिम क्विज़

त्वरित जाँच: Automated tests को manual testing के साथ क्यों जोड़ें?

  • Automation finds only part of the issues
  • Manual tests are faster
  • Automation is deprecated
  • Screen readers replace tests
Answer

Automation finds only part of the issues — Tools लगभग एक तिहाई issues पकड़ते हैं; बाकी keyboard और screen reader checks से मिलते हैं।