सुलभता चेकलिस्ट

इसका अर्थ क्या है

लैंडमार्क स्क्रीन रीडर को पेज की एक विषय-सूची देते हैं: उपयोगकर्ता उससे पहले की हर चीज़ सुने बिना सीधे नेविगेशन या मुख्य सामग्री पर पहुँच सकता है। पूरी तरह div एलिमेंट से बना पेज ऐसी कोई छलाँग नहीं देता, इसलिए हर बार शुरुआत सबसे ऊपर से होती है और एक-एक कदम आगे बढ़ना पड़ता है।

सुधार कैसा दिखता है

document.querySelectorAll('header,nav,main,aside,footer')
// exactly one <main>; each repeated <nav> needs aria-label

आमतौर पर तब टूटती है जब

कोई कंपोनेंट लाइब्रेरी हर चीज़ को div में लपेट देती है, या रीफ़ैक्टर के दौरान लेआउट में दूसरा main जुड़ जाता है और किसी का ध्यान नहीं जाता।

इसका अर्थ क्या है

हेडिंग स्तर एक रूपरेखा है, टाइप स्केल नहीं। स्क्रीन रीडर उपयोगकर्ता पेज को समझने और उसमें घूमने के लिए हेडिंग की सूची खोलते हैं, इसलिए h2 से सीधे h4 पर छलाँग किसी गायब खंड जैसी लगती है, और "देखने में सही लगा" इसलिए चुना गया h3 सामग्री को उस रूपरेखा में ग़लत जगह रख देता है।

सुधार कैसा दिखता है

[...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]
  .map(h => h.tagName + ' ' + h.textContent.trim())

आमतौर पर तब टूटती है जब

डिज़ाइन में "छोटा बोल्ड लेबल" लिखा आता है और वह आकार पाने के लिए सबसे नज़दीकी हेडिंग स्तर इस्तेमाल कर लिया जाता है।

इसका अर्थ क्या है

lang एट्रिब्यूट सहायक तकनीक को बताता है कि उच्चारण के कौन-से नियम लागू करने हैं। इसके बिना स्क्रीन रीडर अंग्रेज़ी को उपयोगकर्ता की डिफ़ॉल्ट आवाज़ में पढ़ता है, जो किसी अंग्रेज़ी पेज को हिंदी उच्चारण-नियमों में बोल सकती है — तकनीकी रूप से वाणी, व्यवहार में शोर।

सुधार कैसा दिखता है

<html lang="en">
  <p>The dish was <span lang="fr">déjà vu</span>.</p>

आमतौर पर तब टूटती है जब

टेम्पलेट में lang एक ही भाषा पर हार्ड-कोड होकर आता है, और बाद में साइट में दूसरी भाषा जुड़ जाती है।

इसका अर्थ क्या है

पेज लोड होने पर शीर्षक घोषित किया जाता है, और टैब की लंबी कतार या ब्राउज़र हिस्ट्री में उपयोगकर्ता को यही दिखता है। अलग पहचान वाला हिस्सा पहले रखें: जब टैब 90 पिक्सेल चौड़ा हो, तो "इनवॉइस — Acme", "Acme — इनवॉइस" से बेहतर है।

सुधार कैसा दिखता है

// on route change
document.title = `${page.name} — Acme`;

आमतौर पर तब टूटती है जब

सिंगल-पेज ऐप शीर्षक को छुए बिना व्यू बदल देता है, इसलिए हर रूट पर वही शब्द घोषित होते हैं।

इसका अर्थ क्या है

नेटिव एलिमेंट ऐसे संबंध साथ रखते हैं जो सीएसएस नहीं रख सकती: सूची बताती है कि उसमें कितने आइटम हैं, और डेटा तालिका उपयोगकर्ता को किसी सेल को उसकी पंक्ति और कॉलम के हेडर के साथ पढ़ने देती है। इनमें से किसी को भी div से दोबारा बनाइए, तो वह संरचना ग़ायब हो जाती है और बस टेक्स्ट की एक सपाट धारा बचती है।

सुधार कैसा दिखता है

<table>
  <caption>Revenue by quarter</caption>
  <tr><th scope="col">Quarter</th><th scope="col">Revenue</th></tr>

आमतौर पर तब टूटती है जब

सीएसएस ग्रिड से डिज़ाइनर का चाहा लेआउट तो मिल जाता है, पर सिमैंटिक्स कभी वापस नहीं जोड़े जाते।

इसका अर्थ क्या है

सहायक तकनीक और कीबोर्ड फ़ोकस डीओएम के क्रम पर चलते हैं। सीएसएस उसे छुए बिना आँखों को दिखने वाला क्रम बदल सकती है, इसलिए जो साइडबार पढ़ने में आख़िर में आता है पर दिखता सबसे पहले है, उस तक पहुँचा भी आख़िर में ही जाएगा — दोनों क्रम चुपचाप एक-दूसरे से दूर होते जाते हैं और सिर्फ़ टेस्टिंग में ही सामने आते हैं।

आमतौर पर तब टूटती है जब

रिस्पॉन्सिव लेआउट एक ब्रेकपॉइंट पर कॉलम का क्रम बदलने के लिए order या grid-area इस्तेमाल करता है, और दूसरे पर नहीं।

इसका अर्थ क्या है

नेटिव बटन पर फ़ोकस किया जा सकता है, वह अपनी भूमिका घोषित करता है, Enter और Space दोनों पर चलता है, और वॉइस कंट्रोल के साथ काम करता है — यह सब मुफ़्त में। क्लिक हैंडलर वाले div में इनमें से कुछ भी नहीं होता, और यह सब दोबारा बनाने में चार अतिरिक्त एट्रिब्यूट लगते हैं, जिनमें से कोई एक लोग अक्सर भूल ही जाते हैं।

सुधार कैसा दिखता है

// no
<div onClick={save}>Save</div>

// yes
<button type="button" onClick={save}>Save</button>

आमतौर पर तब टूटती है जब

डिज़ाइनर कुछ ऐसा माँगता है जो "बटन जैसा नहीं दिखना चाहिए", और स्टाइलिंग के साथ सिमैंटिक्स भी हटा दिए जाते हैं।

इसका अर्थ क्या है

ट्रैप ऐसी कोई भी जगह है जिसमें फ़ोकस घुस तो सकता है पर सिर्फ़ कीबोर्ड से बाहर नहीं निकल सकता। यह इस सूची की सबसे गंभीर विफलता है, क्योंकि उपयोगकर्ता बस किसी एक फ़ीचर से वंचित नहीं होता — वह पेज पर अटक जाता है, न आगे का रास्ता, न पीछे का।

सुधार कैसा दिखता है

dialog.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') close();   // and return focus to the trigger
});

आमतौर पर तब टूटती है जब

सही व्यवहार के लिए मोडल में फ़ोकस ट्रैप जोड़ा जाता है, पर उससे निकलने का रास्ता कभी Escape या बंद करने वाले बटन से जोड़ा ही नहीं जाता।

इसका अर्थ क्या है

फ़ोकस रिंग कीबोर्ड उपयोगकर्ता का कर्सर है। इसे हटा दें तो वे आँख मूँदकर टाइप कर रहे होते हैं — उन्हें पता नहीं चलता कि Enter कौन-सा कंट्रोल चालू करने वाला है। :focus-visible उसी वजह को सुलझा देता है जिसके लिए इसे आम तौर पर हटाया जाता है: यह रिंग कीबोर्ड फ़ोकस पर दिखाता है, माउस क्लिक के बाद नहीं।

सुधार कैसा दिखता है

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* never `outline: none` without a replacement */

आमतौर पर तब टूटती है जब

पहले ही दिन एक रीसेट स्टाइलशीट पूरी साइट से आउटलाइन हटा देती है, और कोई कुछ भी वापस नहीं लगाता।

इसका अर्थ क्या है

टैब क्रम डीओएम से आता है। पॉज़िटिव tabindex एलिमेंट को पूरे पेज के क्रम में सबसे आगे पहुँचा देता है, जिससे बाकी हर जगह क्रम टूट जाता है — एक अकेला tabindex="3" अपने आसपास पेज के हर कंट्रोल का क्रम चुपचाप बदल देता है।

सुधार कैसा दिखता है

tabindex="0"   // put it in the natural order
tabindex="-1"  // focusable by script only
tabindex="3"   // almost always a mistake

आमतौर पर तब टूटती है जब

कोई एक कंट्रोल ठीक करने के लिए tabindex का सहारा लेता है और पूरे पेज का क्रम बदल देता है।

इसका अर्थ क्या है

क्लाइंट-साइड रूट बदलने पर सामग्री तो बदल जाती है, पर फ़ोकस जहाँ था वहीं रह जाता है — अक्सर ऐसे लिंक पर जो अब मौजूद ही नहीं, जिससे फ़ोकस बिना किसी घोषणा के डॉक्यूमेंट के सबसे ऊपर जा गिरता है। इसका इलाज है फ़ोकस को सोच-समझकर ले जाना और बताना कि क्या बदला।

सुधार कैसा दिखता है

// after render
headingRef.current.focus();   // h1 with tabindex="-1"
// on dialog close
triggerRef.current.focus();

आमतौर पर तब टूटती है जब

राउटर ट्रांज़िशन को एनिमेट करता है और फ़ोकस भुला दिया जाता है, क्योंकि देखने में लगता है कि पेज बदल चुका है।

इसका अर्थ क्या है

स्किप लिंक के बिना हर पेज पर हर बार शुरुआत पूरे नेविगेशन में Tab करते हुए गुज़रने से होती है। आम गड़बड़ी बारीक है: लिंक पेज को स्क्रॉल तो कर देता है पर फ़ोकस पीछे रह जाता है, इसलिए अगला Tab फिर उसी मेनू में जा पहुँचता है जिससे उपयोगकर्ता बचकर निकलना चाहता था।

सुधार कैसा दिखता है

<a class="skip" href="#main">Skip to main content</a>
<main id="main" tabindex="-1">

आमतौर पर तब टूटती है जब

लक्ष्य एक ऐसा div है जिस पर tabindex नहीं है, इसलिए ब्राउज़र स्क्रॉल तो करता है पर फ़ोकस को वहाँ नहीं ले जाता।

इसका अर्थ क्या है

जिसके हाथ काँपते हों, जो चलती ट्रेन में हो या जो स्टाइलस इस्तेमाल कर रहा हो — ऐसे किसी के लिए भी छोटे टारगेट पर सही-सही टैप करना मुश्किल होता है। डब्ल्यूसीएजी 2.2 ने 24px की न्यूनतम सीमा जोड़ी है, और इसे दो तरह से पूरा किया जा सकता है: टारगेट को बड़ा करके, या उसके आसपास इतनी खाली जगह छोड़कर कि चूका हुआ टैप पड़ोसी टारगेट पर न लगे।

सुधार कैसा दिखता है

.icon-btn { min-inline-size: 24px; min-block-size: 24px; }
/* or leave 24px of clear space between targets */

आमतौर पर तब टूटती है जब

ठसाठस भरा टूलबार मोबाइल पर और सिकुड़ जाता है, जबकि वहाँ टारगेट को छोटा नहीं, बड़ा होना चाहिए।

इसका अर्थ क्या है

किसी फ़ील्ड पर फ़ोकस आते ही स्क्रीन रीडर लेबल ही बोलता है, और वॉइस कंट्रोल उपयोगकर्ता उस फ़ील्ड तक पहुँचने के लिए वही लेबल बोलते हैं। प्लेसहोल्डर किसी के टाइप करते ही ग़ायब हो जाता है और फ़ील्ड का इकलौता विवरण भी अपने साथ ले जाता है — और यह उन्हीं लोगों के लिए सबसे बुरा है जिन्हें उसे दोबारा देखने की सबसे ज़्यादा ज़रूरत पड़ती है।

सुधार कैसा दिखता है

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

<!-- or, visually hidden -->
<input aria-label="Search">

आमतौर पर तब टूटती है जब

सादगी वाले डिज़ाइन के चक्कर में लेबल हटा दिए जाते हैं, और उनकी जगह प्लेसहोल्डर से काम चलाया जाता है।

इसका अर्थ क्या है

त्रुटि को तीन बातें बतानी होती हैं: कि कुछ ग़लत है, किस फ़ील्ड में ग़लत है, और उसे ठीक करने के लिए क्या करना है। लाल बॉर्डर पहली बात बताता है, वह भी धुंधले ढंग से और सिर्फ़ उन लोगों को जो लाल रंग देख पाते हैं — फ़ील्ड से जुड़ाव और निर्देश, दोनों प्रोग्रामेटिक और शब्दों में होने चाहिए।

सुधार कैसा दिखता है

<input id="email" aria-invalid="true" aria-describedby="email-err">
<p id="email-err">Enter an email address, like [email protected]</p>

आमतौर पर तब टूटती है जब

वैलिडेशन पहले सिर्फ़ दिखने वाले रूप में लागू किया जाता है, और एआरआईए जोड़ने का काम बाद के किसी टिकट पर टाल दिया जाता है।

इसका अर्थ क्या है

autocomplete एट्रिब्यूट एक तय शब्दावली के ज़रिए बताता है कि फ़ील्ड कौन-सी जानकारी लेता है। इससे ब्राउज़र उसे अपने-आप भर पाते हैं, और कुछ सहायक तकनीकें शब्द की जगह कोई जाना-पहचाना आइकन दिखा पाती हैं। यह उन गिने-चुने मानदंडों में से है जहाँ सुलभ तरीक़ा अपनाने से कन्वर्ज़न में मापी जा सकने वाली बढ़ोतरी होती है।

सुधार कैसा दिखता है

<input name="tel" type="tel" autocomplete="tel">
<input name="postcode" autocomplete="postal-code">

आमतौर पर तब टूटती है जब

कोई कस्टम इनपुट कंपोनेंट अनजान एट्रिब्यूट को डीओएम तक पहुँचने से पहले ही रास्ते में गिरा देता है।

इसका अर्थ क्या है

रेडियो बटन अपना लेबल तो बोलता है, पर वह सवाल नहीं जिसका वह जवाब है। legend वही सवाल जोड़ता है, जिससे "स्टैंडर्ड डिलीवरी, रेडियो, 3 में से 1" बदलकर "डिलीवरी का तरीक़ा: स्टैंडर्ड डिलीवरी, रेडियो, 3 में से 1" हो जाता है।

सुधार कैसा दिखता है

<fieldset>
  <legend>Delivery method</legend>
  <label><input type="radio" name="ship"> Standard</label>
</fieldset>

आमतौर पर तब टूटती है जब

fieldset को स्टाइल करना मुश्किल है, इसलिए उसकी जगह एक div और एक हेडिंग लगा दी जाती है।

इसका अर्थ क्या है

क्लाइंट-साइड वैलिडेशन आमतौर पर फ़ॉर्म को उसी जगह दोबारा रेंडर कर देता है। इस दोबारा रेंडर के बारे में कुछ भी बोला नहीं जाता, इसलिए स्क्रीन रीडर उपयोगकर्ता सबमिट दबाता है, कुछ नहीं सुनता, और मान लेता है कि बटन ख़राब है।

सुधार कैसा दिखता है

<div role="alert">2 problems stop this form being submitted</div>
// or move focus to the summary, then to the first bad field

आमतौर पर तब टूटती है जब

त्रुटि सारांश डीओएम में मौजूद होने से पहले ही रेंडर हो जाता है, इसलिए लाइव रीजन के पास बोलने को कुछ नहीं होता।

इसका अर्थ क्या है

जिस भी काम में पैसा लगता हो, कोई अनुबंध बनता हो या डेटा मिटता हो, उसके लिए डब्ल्यूसीएजी तीन में से एक सुरक्षा माँगता है: कार्रवाई को पलटा जा सके, इनपुट की जाँच हो और उसे सुधारा जा सके, या अंतिम होने से पहले उपयोगकर्ता को पुष्टि का एक चरण मिले।

आमतौर पर तब टूटती है जब

रफ़्तार के लिए वन-क्लिक फ़्लो जोड़ा जाता है, और कटता है पुष्टि वाला चरण।

इसका अर्थ क्या है

alt टेक्स्ट एक ही सवाल का जवाब देता है: देख सकने वाले व्यक्ति को इस इमेज से ऐसा क्या मिलता है जो आसपास के टेक्स्ट से नहीं मिलता? अगर कुछ नहीं, तो alt="" ही सही और सोच-समझकर दिया गया मान है — खाली alt एक फ़ैसला है, जबकि alt एट्रिब्यूट का न होना एक चूक है, और स्क्रीन रीडर दोनों के साथ अलग-अलग बर्ताव करते हैं।

सुधार कैसा दिखता है

<img src="q3.png" alt="Revenue fell 12% in Q3, the first drop since 2019">
<img src="flourish.svg" alt="">

आमतौर पर तब टूटती है जब

CMS alt को अनिवार्य फ़ील्ड बना देता है, तो लेखक उससे पीछा छुड़ाने के लिए फ़ाइल का नाम टाइप कर देते हैं।

इसका अर्थ क्या है

तस्वीर में जड़ा हुआ टेक्स्ट खोज, अनुवाद, रीडर मोड और टेक्स्ट-स्पेसिंग ओवरराइड में से किसी को नहीं दिखता, और ज़ूम करने पर धुंधला हो जाता है। दस्तावेज़ में लगे कोड के स्क्रीनशॉट को न कॉपी किया जा सकता है, न पढ़कर सुनाया जा सकता है, और न ही उसमें दिख रहे त्रुटि संदेश के ज़रिए उसे खोजा जा सकता है।

आमतौर पर तब टूटती है जब

डिज़ाइन किए गए किसी उद्धरण या कोड सैंपल को पीएनजी के रूप में एक्सपोर्ट कर दिया जाता है, क्योंकि उसे असल में बनाने से यह जल्दी हो जाता था।

इसका अर्थ क्या है

कैप्शन में संवाद और ज़रूरी आवाज़ें होती हैं; ट्रांसक्रिप्ट उसी सामग्री को खोजने और सरसरी नज़र से पढ़ने लायक बनाता है। मशीनी कैप्शन नाम, तकनीकी शब्दावली और आँकड़े ठीक उन्हीं पलों में ग़लत कर देते हैं जब उनकी सबसे ज़्यादा अहमियत होती है, इसलिए वे शुरुआती बिंदु भर हैं, सौंपने लायक तैयार काम नहीं।

आमतौर पर तब टूटती है जब

ऑटो-कैप्शन एक बार चालू कर दिए जाते हैं, और फिर कोई उन्हें दोबारा नहीं पढ़ता।

इसका अर्थ क्या है

ऑडियो विवरण वह बयान करता है जो दिखाया तो जाता है पर कहा नहीं जाता — कोई डायग्राम, स्क्रीन पर दिखता कोई आँकड़ा, चुपचाप किया गया कोई प्रदर्शन। जहाँ वीडियो की योजना अच्छी तरह बनी हो, वहाँ वाचन ही यह सब समेट लेता है और अलग ट्रैक की ज़रूरत नहीं पड़ती।

आमतौर पर तब टूटती है जब

प्रोडक्ट डेमो इंटरफ़ेस दिखाता है, जबकि वॉइसओवर कहता है "जैसा कि आप यहाँ देख सकते हैं"।

इसका अर्थ क्या है

अपने-आप चलने वाला ऑडियो स्क्रीन रीडर की आवाज़ से टकराता है, और कान से दोनों को अलग नहीं किया जा सकता। रोकने वाला कंट्रोल फ़ोकस क्रम में शुरू में ही आना चाहिए, क्योंकि यह शोर ठीक उसी तक पहुँचना मुश्किल बना देता है।

आमतौर पर तब टूटती है जब

बैकग्राउंड वीडियो म्यूट करके जारी किया जाता है, और बाद का कोई बदलाव उसमें साउंडट्रैक जोड़ देता है।

इसका अर्थ क्या है

एक ही कारण, दो विफलताएँ। बिना नाम वाला, सिर्फ़ आइकन वाला बटन बस "बटन" बोला जाता है, और कुछ नहीं। टेक्स्ट लेबल के साथ लगा आइकन अगर सहायक तकनीक के लिए दिखता छोड़ दिया जाए, तो वह दो बार बोला जाता है, या अपने फ़ाइल-नाम से बोला जाता है।

सुधार कैसा दिखता है

<button aria-label="Delete"><svg aria-hidden="true">…</svg></button>
<button><svg aria-hidden="true">…</svg> Delete</button>

आमतौर पर तब टूटती है जब

एक ही आइकन कंपोनेंट दोनों तरह इस्तेमाल होता है, पर उनमें से एक तरीका उसमें हार्ड-कोड कर दिया गया है।

इसका अर्थ क्या है

कंट्रास्ट टेक्स्ट और उसके पीछे असल में मौजूद चीज़ के बीच मापा जाता है। पारभासी ओवरले, हल्के रंग वाले कार्ड और ग्रेडिएंट — ये सब उस पृष्ठभूमि को बदल देते हैं, इसलिए डिज़ाइन टोकन में लिखा अनुपात अक्सर स्क्रीन पर बनने वाला अनुपात नहीं होता — कोई रंग सफ़ेद पर पास हो सकता है और जिस कार्ड पर वह असल में रहता है, उस पर फ़ेल।

सुधार कैसा दिखता है

/* 4.5:1 body, 3:1 for 24px or 18.5px bold */

आमतौर पर तब टूटती है जब

कोई ग्रे रंग सफ़ेद के हिसाब से चुना जाता है, फिर क्रीम रंग की सतह पर दोबारा इस्तेमाल होता है, जहाँ वह पास नहीं होता।

इसका अर्थ क्या है

दिखना सिर्फ़ टेक्स्ट का ही ज़रूरी नहीं है। वह किनारा जो बताता है कि इनपुट कहाँ से शुरू होता है, वह टॉगल जो दिखाता है कि कोई सेटिंग चालू है, चार्ट की रेखा — इन सबको अपने आसपास के मुक़ाबले 3:1 चाहिए। इस नियम की चपेट में आम तौर पर बाल जितने पतले बॉर्डर आते हैं।

आमतौर पर तब टूटती है जब

नफ़ासत के लिए बहुत हल्का बॉर्डर चुना जाता है — लगभग 1.2:1 का।

इसका अर्थ क्या है

अगर सारा रंग हटाने से जानकारी भी हट जाती है, तो सारा काम अकेला रंग कर रहा था। इसका हल है एक दूसरा संकेत जो ग्रेस्केल में भी बचा रहे: अंडरलाइन, आइकन, आकृति, सीधा लेबल या पैटर्न।

आमतौर पर तब टूटती है जब

स्टेटस सिस्टम लाल, एम्बर और हरे रंग पर बनाया जाता है, और आकृतियाँ सिर्फ़ आइकनों में जोड़ी जाती हैं।

इसका अर्थ क्या है

कंट्रास्ट आम तौर पर एक ही बार, सामान्य स्थिति में जाँचा जाता है। बाक़ी हर स्थिति रंगों की एक अलग जोड़ी है, और जो होवर पृष्ठभूमि तो बदल दे पर टेक्स्ट नहीं, वही सबसे जाना-पहचाना तरीका है जिससे पास होने वाला बटन ठीक उसी पल पढ़ने लायक नहीं रहता जब उसका इस्तेमाल हो रहा होता है।

आमतौर पर तब टूटती है जब

होवर पर बटन ब्रांड रंग से भर जाता है और लेबल सफ़ेद ही रहता है।

इसका अर्थ क्या है

डार्क मोड कोई फ़िल्टर नहीं, एक दूसरा पैलेट है, और उसके अपने माप चाहिए। forced-colors मोड इससे भी आगे जाता है: ऑपरेटिंग सिस्टम आपके सारे रंग एक साथ बदल देता है, इसलिए बैकग्राउंड इमेज, शैडो या ग्रेडिएंट के ज़रिए दिखाई गई कोई भी चीज़ बस ग़ायब हो जाती है।

सुधार कैसा दिखता है

@media (forced-colors: active) {
  .card { border: 1px solid CanvasText; }
}

आमतौर पर तब टूटती है जब

फ़ोकस रिंग box-shadow से बनाई जाती है, जिसे forced-colors मोड हटा देता है।

इसका अर्थ क्या है

सिमुलेशन दिखाता है कि रंग दृष्टि दोष के तीन आम प्रकारों में कोई पैलेट कैसा हो जाता है। जो पैलेट स्वैच शीट पर अलग-अलग दिखते हैं, वे छोटे, एक-दूसरे से सटे और चार्ट सीरीज़ के रूप में रेंडर होते ही अक्सर सिमटकर दो रंग रह जाते हैं।

आमतौर पर तब टूटती है जब

पैलेट की जाँच हो जाती है, पर उससे बने इंटरफ़ेस की नहीं।

इसका अर्थ क्या है

वेस्टिबुलर विकारों में बड़ा मोशन सचमुच बीमार कर देता है: पैरालैक्स, ज़ूम होते ट्रांज़िशन और स्क्रॉल-जैकिंग से ऐसी मतली और माइग्रेन हो सकता है जो साइट छोड़ने के बाद भी बना रहे। ऑपरेटिंग सिस्टम को यह पसंद पहले से पता है; इसका पालन करने में बस एक मीडिया क्वेरी लगती है।

सुधार कैसा दिखता है

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

आमतौर पर तब टूटती है जब

मीडिया क्वेरी सीएसएस ट्रांज़िशन को तो सँभाल लेती है, पर जावास्क्रिप्ट वाला स्क्रॉल एनिमेशन चलता रह जाता है।

इसका अर्थ क्या है

एक सेकंड में लगभग 3 से 55 बार फ़्लैश होना प्रकाश-संवेदी मिर्गी वाले लोगों में दौरा ला सकता है। सूची में यही एक आइटम है जहाँ ग़लती का नतीजा असुविधा नहीं, बल्कि चिकित्सीय आपात स्थिति होता है।

आमतौर पर तब टूटती है जब

स्टाइल के लिए ग्लिच इफ़ेक्ट या स्ट्रोब की तरह चमकता लोडर जोड़ दिया जाता है।

इसका अर्थ क्या है

जो कुछ भी पाँच सेकंड से ज़्यादा समय तक अपने आप हिलता, टिमटिमाता या अपडेट होता है, उसे रोकने का कोई तरीका होना चाहिए। टेक्स्ट के बगल में चलता मोशन वाक्य के बीच में ही ध्यान खींच ले जाता है, और पढ़ते-पढ़ते ख़ुद को बदल लेने वाली सामग्री के साथ चल पाना नामुमकिन है।

आमतौर पर तब टूटती है जब

हीरो कैरोसेल टाइमर पर आगे बढ़ता रहता है, और उसमें कोई कंट्रोल ही नहीं होता।

इसका अर्थ क्या है

जहाँ निष्क्रियता से डेटा मिट सकता है, वहाँ उपयोगकर्ता को चेतावनी देनी होगी कि उसके पास कितना समय है — शुरू करने से पहले, डेटा चले जाने के बाद नहीं। टाइमआउट की मार ठीक उन्हीं लोगों पर पड़ती है जिन्हें पढ़ने या टाइप करने में ज़्यादा समय लगता है।

आमतौर पर तब टूटती है जब

सुरक्षा के लिए सेशन की अवधि तय की जाती है, और फ़्रंट एंड को इसकी कभी ख़बर ही नहीं होती।

इसका अर्थ क्या है

हर कंट्रोल को सहायक तकनीक को तीन बातें बतानी होती हैं: उसका नाम क्या है, वह किस तरह की चीज़ है, और वह किस स्थिति में है। मुश्किल हिस्सा तीसरा है — हर बार स्थिति बदलने पर उसे अपडेट करना पड़ता है, और पुराना पड़ चुका aria-expanded न होने से भी बुरा है, क्योंकि वह सीधे-सीधे झूठ बोलता है।

सुधार कैसा दिखता है

<button aria-expanded="false" aria-controls="menu">Filters</button>
// on toggle: btn.setAttribute('aria-expanded', String(open))

आमतौर पर तब टूटती है जब

एट्रिब्यूट पहले रेंडर में सेट होता है और फिर कभी छुआ नहीं जाता।

इसका अर्थ क्या है

टैब सूची ऐरो कुंजियों, Home और End पर प्रतिक्रिया देती है; मेन्यू Escape पर बंद होता है और फ़ोकस उसे खोलने वाले कंट्रोल पर लौटा देता है। ये परिपाटियाँ एआरआईए Authoring Practices Guide में दर्ज हैं, और सहायक तकनीक के उपयोगकर्ता इन्हें सीख चुके हैं — अपनी ख़ुद की परिपाटी गढ़ने का मतलब है कि उन्हें आपकी परिपाटी सीखनी पड़ेगी।

आमतौर पर तब टूटती है जब

कंपोनेंट में रोल तो सही लग जाते हैं, पर कीबोर्ड हैंडलिंग कभी लिखी ही नहीं जाती।

इसका अर्थ क्या है

फ़ोकस लिए बिना दिखने वाला संदेश स्क्रीन रीडर के लिए अदृश्य रहता है, जब तक वह किसी लाइव रीजन के भीतर न पहुँचे। टेक्स्ट आने से पहले कंटेनर का डीओएम में मौजूद होना ज़रूरी है, वरना वहाँ बदलाव को देखने वाला कोई होता ही नहीं।

सुधार कैसा दिखता है

<!-- render the container empty, then fill it -->
<div role="status" aria-live="polite">Saved</div>

आमतौर पर तब टूटती है जब

पूरा टोस्ट, उसके लाइव रीजन समेत, एक ही बार में जोड़ा जाता है, इसलिए कोई घोषणा नहीं होती।

इसका अर्थ क्या है

aria-hidden किसी एलिमेंट को एक्सेसिबिलिटी ट्री से तो हटा देता है, पर फ़ोकस क्रम से नहीं। फ़ोकस ऐसी जगह पहुँच सकता है जो स्क्रीन रीडर के हिसाब से मौजूद ही नहीं है — तब उपयोगकर्ता को कुछ भी सुनाई नहीं देता और वह समझ नहीं पाता कि क्या हुआ।

सुधार कैसा दिखता है

// hide from everyone, not just from AT
el.hidden = true;   // or inert on the container

आमतौर पर तब टूटती है जब

मोडल पृष्ठभूमि को aria-hidden से छिपा देता है, लेकिन उसके पीछे के लिंक Tab से अब भी पहुँचने लायक रह जाते हैं।

इसका अर्थ क्या है

स्क्रीन रीडर उपयोगकर्ता नेविगेट करने के लिए अक्सर पेज के सभी लिंक की सूची खोल लेते हैं। उस सूची में आसपास का पैराग्राफ़ नहीं होता, इसलिए "और पढ़ें" वाले ग्यारह लिंक ग्यारह एक जैसी प्रविष्टियाँ बन जाते हैं, जिन्हें एक-दूसरे से अलग पहचानने का कोई तरीका नहीं होता।

सुधार कैसा दिखता है

<a href="/q3">Read the Q3 report</a>
<!-- or keep the visible text and extend it -->
<a href="/q3">Read more<span class="visually-hidden"> about Q3</span></a>

आमतौर पर तब टूटती है जब

कार्ड कंपोनेंट में एक तय कॉल-टू-ऐक्शन होता है और उसे पूरे इंडेक्स पेज पर बार-बार दोहराया जाता है।

इसका अर्थ क्या है

400% ज़ूम पर 1280px का डेस्कटॉप व्यूपोर्ट सिर्फ़ 320px की उपयोगी चौड़ाई रह जाता है। सामग्री को उसी एक कॉलम में रीफ़्लो होना चाहिए: हर पैराग्राफ़ की हर पंक्ति पढ़ने के लिए बगल में स्क्रॉल करना पड़े — इसी को रोकने के लिए यह मानदंड बना है।

आमतौर पर तब टूटती है जब

तय चौड़ाई वाला कोई एलिमेंट — टेबल, एम्बेड, या बिना टूटी लंबी स्ट्रिंग — एक न्यूनतम सीमा बना देता है जिससे नीचे लेआउट सिकुड़ ही नहीं पाता।

इसका अर्थ क्या है

टेक्स्ट दोगुना बड़ा होने पर भी सामग्री न कटे और न ही बेकार हो। सबसे आम चूक तय ऊँचाई वाला कंटेनर है: टेक्स्ट बढ़ता है, बॉक्स नहीं बढ़ता, और आख़िरी पंक्ति कट जाती है या पूरी तरह छिप जाती है।

सुधार कैसा दिखता है

/* let it grow */
.card { min-block-size: 120px; }   /* not height: 120px */

आमतौर पर तब टूटती है जब

पंक्तियाँ सीध में रहें, इसके लिए कार्ड ग्रिड को तय ऊँचाई दे दी जाती है।

इसका अर्थ क्या है

कुछ उपयोगकर्ता, ख़ासकर डिस्लेक्सिया वाले लोग, टेक्स्ट को पढ़ने लायक बनाने के लिए ऐसी स्टाइलशीट लगाते हैं जो स्पेसिंग बढ़ा देती है। डब्ल्यूसीएजी सटीक मान तय करता है जिन्हें लागू करने पर भी कोई सामग्री खोनी नहीं चाहिए — जिसका ज़्यादातर मतलब है कि टेक्स्ट रखने वाली किसी भी चीज़ की ऊँचाई तय न करें।

सुधार कैसा दिखता है

* { line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important; }
p { margin-block-end: 2em !important; }

आमतौर पर तब टूटती है जब

कोई कंपोनेंट डिज़ाइन से मेल खाने के लिए सटीक ऊँचाई तय कर देता है, और फिर एक पाँचवाँ शब्द आ जाता है।

इसका अर्थ क्या है

कई उपयोगकर्ताओं का डिवाइस एक ही ओरिएंटेशन में स्थिर रहता है — व्हीलचेयर पर, स्टैंड पर या किसी आर्म पर लगा हुआ। इंटरफ़ेस को दूसरे ओरिएंटेशन पर लॉक करने से वह सिर्फ़ असुविधाजनक नहीं, बल्कि पूरी तरह बेकार हो जाता है।

आमतौर पर तब टूटती है जब

मोबाइल ऐप जैसा लेआउट पोर्ट्रेट को ही मानकर चलता है और मैनिफ़ेस्ट में उसे लॉक कर देता है।

इसका अर्थ क्या है

Tab से आगे बढ़ने पर अगला कंट्रोल स्क्रॉल होकर सामने आता है, और स्टिकी हेडर ठीक उसी जगह हो सकता है जहाँ वह पहुँचता है — यानी एलिमेंट पर फ़ोकस है, स्क्रॉल भी उसी तक हुआ है, फिर भी वह पूरी तरह ढका हुआ है। कीबोर्ड उपयोगकर्ता ऐसी चीज़ में टाइप करते रह जाते हैं जिसे वे देख ही नहीं सकते।

सुधार कैसा दिखता है

/* keep the focused element clear of the sticky header */
:target, :focus-visible { scroll-margin-block-start: 6rem; }

आमतौर पर तब टूटती है जब

स्टिकी हेडर देर से जोड़ा जाता है, फ़ोकस क्रम की जाँच हो जाने के काफ़ी बाद।

इसका अर्थ क्या है

स्वचालित नियम गायब alt एट्रिब्यूट, बिना लेबल वाले फ़ील्ड, कंट्रास्ट की विफलताएँ और टूटे एआरआईए रेफ़रेंस भरोसेमंद ढंग से पकड़ लेते हैं। यह ज़रूरी चीज़ों का लगभग एक-तिहाई है, और यही वह एक-तिहाई है जिसे हाथ से ढूँढना उबाऊ है — इसलिए इसकी जगह CI में है, ताकि समीक्षा उन दो-तिहाई चीज़ों पर ध्यान दे सके जिनमें विवेक की ज़रूरत होती है।

सुधार कैसा दिखता है

# fail the build, do not just report
npx axe-ci $URL --exit-code

आमतौर पर तब टूटती है जब

जॉब को बिल्ड रोकने वाला नहीं, सिर्फ़ चेतावनी देने वाला बनाकर जोड़ा जाता है, और वह हमेशा पीली चेतावनी पर अटका रहता है।

इसका अर्थ क्या है

इससे सस्ता और इतने नतीजे देने वाला कोई परीक्षण नहीं है। बिना पॉइंटर के एक असली काम पूरा करने की कोशिश के कुछ ही मिनटों में ज़्यादातर फ़ोकस ट्रैप, न दिखने वाली फ़ोकस रिंग, पहुँच से बाहर कंट्रोल और टूटे डायलॉग सामने आ जाते हैं।

आमतौर पर तब टूटती है जब

यह किसी एक व्यक्ति की तय ज़िम्मेदारी नहीं होती, इसलिए यह ऑडिट से ठीक पहले वाले हफ़्ते में होती है।

इसका अर्थ क्या है

स्क्रीन रीडर एक-दूसरे से भी अलग होते हैं और एक्सेसिबिलिटी ट्री से मिलने वाले अंदाज़े से भी। एक असली जोड़ी को शुरू से अंत तक परखना तीन स्पेसिफ़िकेशन पढ़ने से ज़्यादा सिखाता है, और यही एकमात्र तरीका है यह सुनने का कि आपके लाइव रीजन असल में क्या घोषित करते हैं।

आमतौर पर तब टूटती है जब

टीम ऐसे ब्राउज़र एक्सटेंशन से जाँच करती है जो ट्री को बोलकर सुनाने के बजाय बस उसकी रिपोर्ट दिखा देता है।

इसका अर्थ क्या है

बिना प्रमाण वाले निष्कर्ष पर बहस होती है; चिह्नित स्क्रीनशॉट और मानदंड संख्या वाला निष्कर्ष ठीक किया जाता है। इससे आपको तारीख़ के साथ एक ऑडिट ट्रेल भी मिलती है, और ख़रीद प्रक्रिया का सवाल असल में यही माँगता है।

आमतौर पर तब टूटती है जब

निष्कर्ष ऐसी स्प्रेडशीट में दर्ज होते हैं जिसमें पेज के लिए कॉलम है, पर प्रमाण के लिए कोई नहीं।

इसका अर्थ क्या है

चेकलिस्ट उन सबकों को दर्ज करती है जो पिछली विफलताओं ने किसी और को सिखाए। वह आपको यह नहीं बता सकती कि कोई फ़्लो तकनीकी रूप से अनुरूप होते हुए भी थका देने वाला है, या कोई पैटर्न सही होते हुए भी अनजाना है। यह सिर्फ़ वही लोग बता सकते हैं जो रोज़ सहायक तकनीक के साथ इस सॉफ़्टवेयर का इस्तेमाल करते हैं।

आमतौर पर तब टूटती है जब

अनुरूपता को न्यूनतम आधार मानने के बजाय अंतिम लक्ष्य मान लिया जाता है।