' - उद्देश्य से।
शीर्ष पदानुक्रम: एक '
' प्रति पृष्ठ, फिर तार्किक संरचना '' - ''।
लैंडमार्क: '', '', '', '
ARIA केवल जरूरत पड़ ने पर: 'भूमिका', 'आरिया-लेबल', 'आरिया-वर्णित', 'आरिया-विस्तारित', 'आरिया-लाइव'।
'आरिया-अमान्य', 'आरिया-त्रुटि' के माध्यम से राज्य/त्रुटियां।
4) कीबोर्ड और फोकस प्रबंधन
पूर्ण कुंजीपट नियंत्रण: 'टैब/शिफ्ट + टैब' - क्रम, 'एंटर/स्पेस' - सक्रिय करें, 'Esc' - निकास।
दृश्यमान फोकस हमेशा; रूपरेखा निष्क्रिय नहीं करें।
फोकस जाल: मोडल में - चक्रीय फोकस, बंद होने के बाद स्रोत पर ध्यान केंद्रित करना।
छिपे हुए तत्वों को टैब क्रम में नहीं गिरना चाहिए (' प्रदर्शन: कोई नहीं', 'आरिया-छिपा =" सही")।
लिंक छोड़ें: "मुख्य सामग्री पर जाएं" - पृष्ठ की शुरुआत में।
5) रंग, विपरीत और टाइपोग्राफी
पाठ कंट्रास्ट: कम से कम 4। 5:1 सादे पाठ के लिए और 3:1 बड़े पाठ के लिए।
केवल रंग पर भरोसा न करें: प्रतीक/पैटर्न/हस्ताक्षर के साथ डुप्लिकेट करें।
क्लिकेबल लक्ष्यों का आकार: कम से कम 40-48 पीएक्स, आसपास पर्याप्त क्षेत्र।
फ़ॉन्ट्स: पढ़ ने योग्य टाइपफेस, लाइन-टू-लाइन 1। 4–1. 6, लाइन लंबाई 45-90 वर्ण।
6) गति, एनिमेशन और एपिलेप्टोजेनिक फ्लैश
सिस्टम को पसंद-कम-गति ध्वज का सम्मान करें - सरलीकृत एनिमेशन/अक्षम लंबन जोड़ें।
फ़्लिकर्स> 3 बार/सेकंड से बचें.
सभी स्वचालित गतियों में ठहराव/स्टॉप/छुपाएँ होना चाहिए.
7) फॉर्म, त्रुटियां और सत्यापन
स्पष्ट रूप से लेबल और फ़ील्ड बांधे: '<लेबल फ़ॉर = "आईडी">'।
प्लेसहोल्डर एक लेबल नहीं है।
क्षेत्र के बगल में त्रुटि संदेश और शीर्ष पर त्रुटि सारांश में; 'आरिया-वर्णित' के माध्यम से बांधता है।
इनपुट प्रारूप, उदाहरण, मास्क की व्याख्या करें; इकाइयों और मुद्रा निर्दिष्ट
जब कोई त्रुटि हो तो पूर्ण फ़ील्ड रीसेट न करें; समस्या क्षेत्र पर ध्यान केंद
उदाहरण (टुकड़ा):
html
<label for="email">Эл. mail </label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id = "email-hint" class = "hint"> We don't send spam </div>
<div id = "email-err" class = "error" role = "alert"> Specify an address in the format name @ example. com</div>
8) घटक और इंटरैक्टिव: पैटर्न
बटन बनाम लिंक: क्रिया = '<बटन>', जंप = ''।
टैब/समझौते: नेविगेशन तीर, 'आरिया-नियंत्रण', 'आरिया-चयनित'।
मोडल्स/संवाद: 'रोल = "डायलॉग",' आरिया-मोडल = "ट्रू", फोकस ट्रैप, 'Esc' बंद हो जाता है।
औज़ारटिप/पॉपओवर: कुंजीपटल पहुँच, टाइमआउट पढ़ ने में हस्तक्षेप नहीं करते.
ड्रॉप: विकल्प - ऊपर खिसकाएँ/नीचे बटन, कुंजीपट तीर; घटना सिर्फ माउस के साथ नहीं।
9) मीडिया: वीडियो/ऑडियो/ग्राफिक्स
वीडियो: उपशीर्षक, प्रतिलेख, वैकल्पिक ऑडियो विवरण (AD) ट्रैक।
ऑडियो: पाठ प्रतिलेख।
ग्राफ/आरेख: पाठ सारांश ("क्या महत्वपूर्ण है"), डेटा तालिका, अक्षों के वर्णनात्मक लेबल।
रहने वाले क्षेत्र: 'आरिया-लाइव = "विनम्र "/" मुखर "- बहुत बार" चीखने "के लिए सावधान न करें।
10) टेबल और सूची
'
', हस्ताक्षर, योग का उपयोग करें।
जमे हुए स्तंभ/पंक्तियाँ - टैब क्रम को न तोड़ें।
पृष्ठ द्वारा बड़ी तालिका - पृष्ठ; हमेशा निर्यात प्रदान करें (CSV/JSON)।
11) i18n, स्थानीय और आरटीएल
Html जड़ पर 'लैंग' विशेषता; स्थानीय संख्या/तिथि/मुद्रा प्रारूप।
आरटीएल समर्थन (अरबी/हिब्रू): प्रतिबिंब प्रतीक, नेविगेशन क्रम, कर्सर।
शब्दों को प्रतीकों में सिलने से बचें (पाठ अनुवाद योग्य होना चाहिए)।
सरल योगों, शब्दजाल से बचें; शब्दों की शब्दावली।
12) समय, सत्र, कैप्च और विकल्प
टाइमआउट - एक चेतावनी और विस्तार करने की क्षमता के साथ।
CAPTCHA: विकल्प पसंद करें (प्रश्न, अदृश्य बॉट विश्लेषक, मेल/फोन द्वारा पुष्टि); यदि आप उपयोग करते हैं - एक पाठ विकल्प और न केवल दृश्य।
सत्यापन: पासवर्ड प्रबंधकों के लिए समर्थन, "पासवर्ड दिखाएँ", WebAuthn.
13) संवेदी और मोटर हानि के लिए पहुँच
इशारों में क्लिक/कुंजीपट समकक्ष होना चाहिए।
एक विकल्प के बिना लंबे होल्ड/डबल नल की आवश्यकता नहीं है।
"पॉइंटर रद्द": रद्द करने का मौका देने के लिए "प्रेस" पर नहीं, रिलीज पर कार्रवाई की जानी चाहिए।
14) राज्य, नोटिस और अलर्ट
गतिशील संदेशों के लिए 'रोल = "स्थिति "/" अलर्ट "का उपयोग करें।
अपने फोकस को चिपचिपे बैनर के साथ कवर न करें।
टोस्ट सूचनाएं - फोकस/होवर पर ठहराव और कीबोर्ड से पहुंच के साथ।
15) परीक्षण योजना (मैनुअल और ऑटो)
मैनुअल (न्यूनतम):
- सभी कुंजी स्क्रिप्ट केवल कुंजीपट के साथ पास करें.
- प्रत्येक आइटम पर फोकस दृश्यता की जाँच करें।
- 200% तक जूम - इंटरफ़ेस क्षैतिज स्क्रॉलिंग के बिना कार्यात्मक रहता है।
- तंत्र मोड चालू करें "गति कम करें" - एनिमेशन हस्तक्षेप नहीं करते हैं।
- स्क्रीन रीडर (एनवीडीए/वॉयसओवर) के साथ स्क्रिप्ट पास करें, सुनिश्चित करें कि भूमिकाएं/टैग/ऑर्डर सही हैं।
ऑटोटेस्ट (सीआई में):
- घटक-स्तर पहुंच लिंट।
- इसके विपरीत, वैकल्पिक ग्रंथों, हेडर क्रम, ARIA वैधता की जाँच करें।
- महत्वपूर्ण स्क्रीन के लिए शब्दार्थ (भूमिका वृक्ष) के स्नैपशॉट।
16) उपलब्धता गुणवत्ता मेट्रिक्स
A11y कवरेज: पूर्ण चेकलिस्ट वाले घटकों का अनुपात।
कुंजीपट केवल पास दर: कुंजीपट द्वारा ट्रेस की गई स्क्रिप्ट का प्रतिशत।
कंट्रास्ट - तत्व।
एसआर फ्लो टाइम: स्क्रीन रीडर के साथ स्क्रिप्ट रन टाइम।
उपयोगकर्ता-प्रतिक्रिया: उपलब्धता, प्रतिक्रिया समय और सुधार के बारे में शिकायतें।
17) घटक चेकलिस्ट
- निरर्थक ARIA के बिना सही शब्दार्थ/भूमिका
- हस्ताक्षरित लेबल, 'एरिया-' सही
- पूर्ण कीबोर्ड नियंत्रण, दृश्यमान फोकस
- पाठ/प्रतीक/सीमा विपरीत सामान्य है
- त्रुटियों और शर्तों को स्क्रीन रीडर द्वारा आवाज दी जाती है
- सम्मान पसंद-कम गति
- क्लिकेबल क्षेत्र का आकार ≥ 40-48 पीएक्स
- स्थानीयकरण और आरटीएल खाका नहीं तोड़ ते
18) एंटी-पैटर्न
भूमिका/कीबोर्ड के बिना "डिव-बटन"।
'रूपरेखा: कोई भी' विकल्प के बिना फोकस नहीं करता है।
लेबल के बजाय प्लेसहोल्डर।
केवल रंग में त्रुटियाँ।
फोकस ट्रैप के बिना और 'Esc' के बिना मोडल।
केवल कुंजीपट के बिना खींचें.
अक्षम करने के विकल्प के बिना लंबा ऑटो-स्क्रॉलिंग/लंबन।
19) भूमिकाएँ और प्रक्रिया
A11y-owner कमांड में (उत्पाद/डिजाइन/देव)।
डेटा की परिभाषा (DoD) में उपलब्धता शामिल है।
डिजाइन समीक्षा: कंट्रास्ट, फोकस, लेबल की जाँच।
कोड समीक्षा: शब्दार्थ/ARIA, कीबोर्ड परीक्षण।
नियमित लेखा परीक्षा और सुधार योजना।
20) पुनरावृत्ति द्वारा कार्यान्वयन
पुनरावृत्ति 1 - फाउंडेशन (2 सप्ताह):
- शब्दार्थ/शीर्षक, विपरीत, फोकस और कीबोर्ड, मूल रूप और त्रुटियां।
पुनरावृत्ति 2 - इंटरएक्टिव (3-4 सप्ताह):
- मोडल, टैब/अकॉर्डियन, टेबल/रेखांकन पाठ सारांश के साथ, वीडियो उपशीर्षक, कम एनीमेशन।
पुनरावृत्ति 3 - स्केल एंड कंट्रोल (सतत):
- सीआई, metrics, नियमित ऑडिट, टीम प्रशिक्षण में ऑटोटेस्ट।
21) टेम्पलेट और स्निपेट्स
मोडाल्का (सरलीकृत):
html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id = "dlg-title "> Confirm action </h2>
<p id = "dlg-desc "> This operation is not reversible. </p>
<button> Cancel </button>
<button> Confirm </button>
</div>
सामग्री बटन में छोड़ें:
html
<a class =" skip-link" href = "# main"> Go to main content </a>
<main id="main">...</main>
सम्मान पसंद-कम गति:
css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0. 01ms! important; animation-iteration-count: 1! important; transition: none! important; }
}
22) मिनी-एफएक्यू
क्या मुझे एक अलग "नेत्रहीन संस्करण" की आवश्यकता है?
नहीं, यह नहीं है। सेटिंग के साथ सभी के लिए एक अनुकूली, सुलभ संस्करण।
क्या यह केवल विपरीत की जाँच करने के लिए पर्याप्त है
नहीं, यह नहीं है। कंट्रास्ट केवल पार्ट है। कुंजीपट, फोकस, शब्दार्थ, फॉर्म त्रुटियां, मीडिया, आदि की आवश्यकता है।
ARIA सब कुछ हल कर देगा?
ARIA गलत शब्दार्थ को सही नहीं करेगा। पहले सही टैग, फिर ARIA परिशोधन।
कुल
उपलब्धता एक प्रणाली अनुशासन है: शब्दार्थ → कीबोर्ड/फोकस → कंट्रास्ट/कलर → फॉर्म/गलतियाँ → मीडिया/शेड्यूल → i18n/RTL → परीक्षण योजना और मैट्रिक्स। DoD और टीम संस्कृति का एक्सेसिबिलिटी हिस्सा बनाएं - और आपका उत्पाद सभी के लिए वास्तव में बहुमुखी, विश्वसनीय और सुविधाजनक होगा।
वीडियो जल्द ही अपडेट किया जाएगा
वीडियो इस समय अपडेट किया जा रहा है।
कृपया बाद में फिर से देखें — नया संस्करण रास्ते में है।
हम इस समय परियोजनाओं में बहुत व्यस्त हैं
इस समय हमारा पूरा ध्यान आपके उत्पादों के विकास और इंटीग्रेशन पर केंद्रित है।
लेकिन हम सोशल मीडिया के लिए भी समय निकालने की कोशिश कर रहे हैं। नया कंटेंट बहुत जल्द अपडेट किया जाएगा — जुड़े रहें!
|