विशेष आवश्यकताओं वाले उपयोगकर्ताओं को देखते हुए, एक वेबसाइट या एप्लिकेशन कैसे बनाएं

डिजिटल सामग्री बनाना, हम औसत उपयोगकर्ता पर ध्यान केंद्रित करने के लिए उपयोग किया जाता है। इस प्रकार, रूस की लगभग एक तिहाई आबादी को नजरअंदाज किया जाता है - ये विकलांग लोग, बुजुर्ग, साथ ही अस्थायी रूप से विशेष आवश्यकता वाले लोग हैं। पिछले लेख में, हमने Sberbank में डिजिटल सेवाओं को अपनाने के बारे में अपने दृष्टिकोण के बारे में बात की थी।

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

प्रबंधकों के लिए सामान्य सिफारिशें

विकलांग लोगों के उपयोगकर्ता अनुभव कल्पना करने के लिए, इस कार्यक्रम के विभिन्न प्रकार के अनुकरण करने की कोशिश रंग अंधापन , कम दृष्टि, और अन्य उल्लंघनों । - के बारे में अंधे लोगों के लिए एक आवाज इंटरफेस के साथ काम करने के लिए कैसे स्क्रीन रीडर फिट अधिक जानने के लिए योग्यता MacOS पर , योग्यता iOS पर , सभी Android पर TalkBack , NVDA या जबड़े Windows के लिए)।

शुरू से ही विकास प्रक्रिया में पहुंच को शामिल करें:

1. टीम को बताएं कि एक्सेसिबिलिटी आवश्यकताओं के आधार पर उपयोगकर्ता अनुभव बनाना और उसका मूल्यांकन करना महत्वपूर्ण है।
   
2. विकलांग लोगों की जरूरतों के लिए हर अपडेट और नई सुविधा की जाँच करें।
   
3. प्रत्येक स्प्रिंट, जल्दी से सामान्य त्रुटियों को पकड़ने के लिए डेवलपर्स के साथ स्वचालित परीक्षण का संचालन करता है, और पहुंच आवश्यकताओं को प्राप्त करने के लिए इसे कस्टम परीक्षण के साथ संयोजित करता है।
   
4. एक नियमित आधार पर मैनुअल उत्पाद परीक्षण करें: फिर अंतिम चरण में कुछ सुधार होंगे;
   
5. इससे पहले कि उत्पाद को कम से कम तीन सप्ताह तक बेच दिया जाए, एक पहुंच विशेषज्ञ के साथ अंतिम परीक्षण करें।
   

डिजाइनर को क्या करना है

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

संरचनात्मक तत्वों और पृष्ठ प्रबंधन के लिए आवश्यकताएँ

• डिजाइन ऐसा होना चाहिए कि उपयोगकर्ता जल्दी और आसानी से महत्वपूर्ण जानकारी पा सके।
  
• सभी सामग्री और डिज़ाइन शीर्षकों की तार्किक संरचना में फिट होने चाहिए: यह नेत्रहीन उपयोगकर्ताओं और बुजुर्गों के लिए बहुत मदद करता है।
  
• उपयोगकर्ताओं को साइट को कई तरीकों से नेविगेट करने में सक्षम होना चाहिए: सामग्री की तालिका, साइट मानचित्र, पृष्ठों और खोज के बीच लिंक के माध्यम से।
  
• स्क्रीन पाठकों चल वस्तुओं के साथ अच्छी तरह से काम नहीं है, इसलिए मोडल विंडो बेहतर उपयोग करने के लिए नहीं है।
  
• स्टाइल्स का सही इस्तेमाल किया जाना चाहिए। शीर्षक लेआउट में 1 स्तर कोड एच 1 शीर्षकों में होना चाहिए। इसके विपरीत, जो प्रथम स्तर का शीर्षक नहीं है, उसे H1 शीर्षक के रूप में चिह्नित नहीं किया जाना चाहिए।
  

पेज के समुचित स्केलिंग भी आसान किसी भी इलेक्ट्रॉनिक मीडिया सामग्री से पढ़ सकते हैं और नेत्रहीनों की धारणा की सुविधा के लिए कर देगा। इस मामले में सबसे अच्छा समाधान अनुकूली लेआउट है। जब लेआउट तैयार है, एक परीक्षण करना: स्क्रीन के कीबोर्ड शॉर्टकट «Cmd +» या «Ctrl +» मदद से 200% तक वृद्धि हुई है।


(खराब स्केलिंग उदाहरण)


(स्केलिंग का एक अच्छा उदाहरण)

कीबोर्ड नियंत्रण बिगड़ा हुआ मस्कुलोस्केलेटल सिस्टम और मोटर कौशल के साथ-साथ नेत्रहीन उपयोगकर्ताओं के लिए एक वास्तविक मोक्ष है जो स्क्रीन रीडर का उपयोग इंटरनेट पर नेविगेट करने के लिए करते हैं। कीबोर्ड से सही पहुंच के लिए, आपको निम्नलिखित बिंदुओं को नियंत्रित करने की आवश्यकता है:

• उपयोगकर्ता को टैब, स्थान और तीर कुंजियों का उपयोग करके पृष्ठ पर किसी भी इंटरैक्टिव तत्व को चुनने और सक्रिय करने में सक्षम होना चाहिए।
  
• देखे गए उपयोगकर्ताओं के लिए, यह महत्वपूर्ण है कि संवादात्मक तत्व दृश्य और परिचित अवस्थाएँ हों: फ़ोकस, होवर, सक्रिय और विज़िट की गई।
  
• नेविगेशन तत्वों के साथ विज्ञापनों में छोड़ सकते हैं और मुख्य जानकारी पर प्रत्यक्ष रूप से, सुनने के लिए अनावश्यक सामग्री की संख्या को कम - नेत्रहीन उपयोगकर्ताओं की महत्वपूर्ण विशेषता है कि आप मुख्य सामग्री पर जाने के लिए अनुमति देता है के लिए।
  
• उपयोगकर्ता यह भी उम्मीद करता है कि तत्वों के बीच फोकस एक तार्किक क्रम में बदल जाएगा: आमतौर पर यह बाएं से दाएं और ऊपर से नीचे तक होता है।
  
• जब साइट का लेआउट तैयार हो जाता है, तो टैब कुंजी के साथ जांचें, क्या यह कीबोर्ड से नियंत्रित करते समय हर जगह दिखाई देता है जहां फोकस है?
  

कुछ उपयोगकर्ताओं के लिए, आइटम क्लिक क्षेत्र सेट करना बेहद महत्वपूर्ण है। मस्कुलोस्केलेटल सिस्टम और मोटर कौशल के विकार वाले लोग हैं। वे इसे कठिन एक हाथ से साइट / एप्लिकेशन के साथ एक दूसरे लिंक करने के लिए छोटे या खड़े करीब है, काम हिट करने के लिए लगता है। इस तरह के एक यूजर इंटरफेस की उपलब्धता सुनिश्चित करने के लिए, आप की जरूरत है:

• सुनिश्चित करें कि आप बड़े फोन पर भी अपने अंगूठे और बाएं और दाएं हाथों से मूल नियंत्रण तक पहुंच सकते हैं।
  
• सेट क्षेत्र दबाने से कम 44 CSS पिक्सेल नहीं है। तो यह बस उन पर एक औसत वयस्क के लिए लगभग 10 मिमी की उंगलियों के आकार के साथ मिलेगा। प्रतीक अक्सर छोटे होते हैं, तो दबाने की जरूरत के आसपास के क्षेत्र को बढ़ाने के लिए।
  
• 8-पिक्सेल स्थान के साथ क्लिक करने योग्य तत्वों को अलग करें।
  

साइट / आवेदन सामग्री

साइट पर सभी ग्रंथों को पठनीय होना चाहिए। यहाँ आप क्या कर सकते हैं:

• बचें kantselyarizmov विशिष्ट शब्दों और गूढ़ प्रदान करता है, गति के सभी प्रकार से भरा हुआ;
  
• पैराग्राफ को छोटा करने की कोशिश करें - मोबाइल उपकरणों पर उन्हें देखना आसान होगा;
  
• यदि संभव हो, छोटे वाक्यों का उपयोग करें।
  
• यदि आपको शर्तों का उपयोग करने की आवश्यकता है, तो उन्हें समझाएं। यदि बहुत अधिक हैं, तो एक शब्दकोष संकलित करें।
  
• पहली बार संक्षिप्तीकरण या समरूपता का उपयोग करते समय, उन्हें समझें।
  
• मुहावरे का उपयोग नहीं करने, लोगों को सांकेतिक भाषा में बात कर रहा है, साथ ही मानसिक रूप से विकलांग उपयोगकर्ताओं को उन सचमुच अनुभव कर सकते हैं के रूप में की कोशिश करो;
  
• कीबोर्ड लेआउट और टाइपोस पर नज़र रखें, क्योंकि उनकी उपस्थिति स्क्रीन पाठकों के काम को बहुत जटिल करती है।
  

इसके अलावा पाठ की पठनीयता से यह महत्वपूर्ण है कि इसकी डिजाइन उसकी धारणा में मदद मिली है। ऐसा करने के लिए:

• सुनिश्चित करें कि न्यूनतम विपरीत अनुपात 4.5: 1 है, बढ़े हुए पाठ के लिए आप 3: 1 के विपरीत को कम कर सकते हैं। अपवाद लोगो, तत्वों, प्रदर्शन एक सजावटी भूमिका और निष्क्रिय नियंत्रण कर रहे हैं;
  
• आरामदायक पढ़ने के लिए पर्याप्त फ़ॉन्ट आकार का उपयोग करें: मुख्य पाठ के लिए न्यूनतम 16 पिक्सेल है।
  
• एक सुपाठ्य फ़ॉन्ट चुनें, पैमाने की परवाह किए बिना अच्छी तरह से पढ़ा जा सकता है, चयनित आकार में काफी बड़ा, सभी आवश्यक वर्णों और शैलियों का समर्थन करते हुए, मापदंडों के साथ जो अक्षर रूपों और अद्वितीय अक्षरों के लिए निरंतर हैं जो एक दूसरे के साथ भ्रमित नहीं हो सकते।
  

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

ग्राफिक्स का उपयोग केवल उसी जगह किया जाना चाहिए जहां एक पाठ का सामना करना असंभव है। यदि यह है कि पता चला:

• सुनिश्चित करें कि सभी ग्राफिक्स एक संक्षिप्त और समझने योग्य विवरण के साथ हैं।
  
• परिचित आइकन चुनें - उदाहरण के लिए, कचरा हटाने के लिए।
  
• किसी चित्र पर पाठ को ओवरले करते समय, इसके विपरीत को याद रखें: एक ठोस पृष्ठभूमि का उपयोग करें या छवि को गहरा करें;
  
• साथ डेटा दृश्य संक्षिप्त विवरण संदर्भ में उपयोगकर्ता को विसर्जित करने के लिए।
  
• प्रस्तुत आंकड़ों के बीच पर्याप्त विपरीत प्रदान करें ताकि रंग अंधापन वाले लोग रंगों को अलग कर सकें।
  
• ऐसी सामग्री के लिए एक वैकल्पिक फ़ॉर्म बनाएँ जिसे पाठ के रूप में प्रस्तुत नहीं किया जा सकता है। उदाहरण के लिए, खोज के माध्यम से और एक मेज या सूची भर में एटीएम कार्ड के रूप में लागू किया जा सकता;
  
• कैप्टन अंधे लोगों के लिए सबसे बड़ी समस्याओं में से एक है। यह कचरे के नहीं किया जा सकता है, तो इस तरह के ध्वनि के रूप में, धारणा का एक वैकल्पिक तरीका है।
  
• सुनिश्चित करें कि आपके डिज़ाइन में ऐसे तत्व नहीं हैं जो प्रति सेकंड तीन बार से अधिक फ्लैश करते हैं, क्योंकि साइट के एनिमेटेड तत्व लोगों को मिर्गी के दौरे के कुछ प्रकार के विकारों का नेतृत्व कर सकते हैं।
  

तत्व कैप्शन, लिंक और निर्देशों को तार्किक रूप से उचित बनाने की आवश्यकता है ताकि, उदाहरण के लिए, एक अंधा उपयोगकर्ता समझता है कि उन्हें किसी विशेष स्थिति में क्यों आवश्यक है और जब आप उन पर क्लिक करते हैं तो क्या होता है।

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

प्रासंगिक संकेत एक महत्वपूर्ण सहायक कार्य करते हैं, साइट पर एक फॉर्म भरते समय त्रुटियों की संभावना को कम करते हैं। सुनिश्चित करें कि आप यह है कि सुनिश्चित करें। और मत भूलना:

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

• फॉर्म भरने की प्रक्रिया में नई जानकारी के प्रकट होने के बारे में उपयोगकर्ता को सूचित करें।
  
• उन निर्देशों की जांच करें जो उपयोगकर्ता को त्रुटि को ठीक करने में मदद करते हैं।
  

वेब डेवलपर टिप्स

ब्लाइंड लोग स्क्रीन एक्सेस / स्क्रीन रीडर कार्यक्रमों की मदद से इंटरफेस के साथ इंटरैक्ट करते हैं जो स्क्रीन पर प्रदर्शित होने वाली आवाज में पुन: पेश करते हैं। स्क्रीन रीडर उपयोगकर्ता के लिए इंटरफ़ेस की उपलब्धता मुख्य रूप से डेवलपर पर निर्भर करती है। यदि स्क्रीन रीडर कर्सर बटन पर है, तो डेवलपर से बटन का नाम और ऑपरेटिंग सिस्टम से इस तत्व का प्रकार ध्वनि संदेश आउटपुट ब्लॉक में गिर जाएगा। तो अंधा उपयोगकर्ता समझता है कि यह तत्व क्या है और इसके साथ कैसे काम करना है।

चूंकि डेवलपर नेविगेशन में लगा हुआ है, इसलिए यहां इससे संबंधित सिफारिशें दी गई हैं:

• पृष्ठों के बीच एक तार्किक संक्रमण प्रदान करें। जब पृष्ठ लंबे समय तक लोड होता है, तो साइट के विज़िटर को यह कठिनाई के बिना समझ में आता है, लेकिन अंधे उपयोगकर्ता को चेतावनी दी जानी चाहिए कि लोडिंग जारी है;
  
• जब आप अपग्रेड या एक नया पृष्ठ बनाने के लिए स्विच सुनिश्चित करें कि फोकस एक बार आप पहले तत्व पर मिलता है - "वापस" बटन या पृष्ठ शीर्षक। यह नेत्रहीन उपयोगकर्ता को यह जानने की अनुमति देगा कि पृष्ठ को अपडेट किया गया है, और यह समझने के लिए कि उसे कहां मिला;
  
• जब पृष्ठ पुनः लोड नहीं होता है, और केवल कंटेनरों की सामग्री बदल जाती है, तो आपको उपयोगकर्ता को सूचित करना होगा कि सामग्री बदल गई है।
  
• तत्वों के बीच एक तार्किक फोकस संक्रमण प्रदान करें: आमतौर पर यह बाएं से दाएं या ऊपर से नीचे की ओर स्विच होता है।
  
• पृष्ठ पर प्रत्येक तत्व को अलग-अलग बनाएं, क्योंकि अन्यथा एक अंधा व्यक्ति यह नहीं समझेगा कि यह या उस हस्ताक्षर को किस क्षेत्र में संदर्भित किया गया है।
  
• पृष्ठ पर उपयोगकर्ताओं के त्वरित नेविगेशन के लिए लिंक वाले तत्वों का उपयोग करें;
  
• पृष्ठ शीर्षक के लिए "मुख्य सामग्री पर जाएं" के लिए एक संदर्भ जोड़ें। इससे आपको पेज को तेजी से घुमाने में मदद मिलेगी। यह विकल्प शुरू में छिपा हो सकता है, लेकिन जब यह ध्यान केंद्रित हो जाता है यह दृश्यमान हो जाना चाहिए।
  
• एचटीएमएल 5 में सिमेंटिक मार्करों द्वारा या एआरआईए भूमिकाओं का उपयोग करके बुनियादी लैंडमार्क तत्वों को काम करें।
  

तर्क और संरचना है, तो के संबंध में:

• पृष्ठ की सामग्री को तार्किक ब्लॉकों में विभाजित करने के लिए सामग्री - अनुभाग, लेख, एक तरफ की विशेषताओं का उपयोग करें।
  
• सुनिश्चित करें कि शीर्षक पृष्ठ संरचना के अनुरूप हैं।
  
• हेडर स्तरों का उपयोग करें H1 - H6: उच्चतम स्तर के लिए H1, निम्नतम के लिए H6। शीर्ष स्तर को न छोड़ें।
  
• साइट मैप, साइट खोज: सामग्री के लिए खोज करने के लिए अलग अलग तरीकों से प्रदान करें।
  

सभी उपयोगकर्ताओं को सहज बनाने के लिए, आपको निम्न करने की आवश्यकता है:

• बटन की तरह देशी नियंत्रण का उपयोग करने का प्रयास करें ।
  
• जांचें कि कस्टम इंटरफ़ेस घटक स्क्रीन रीडर उपयोगकर्ताओं के लिए सुलभ हैं।
  
• किसी भी इंटरफ़ेस तत्व के लिए कोड के प्रकार, उसके राज्य (मान), नाम और टूलटिप का संकेत दें जो स्क्रीन रीडर उपयोगकर्ता की किसी भी कार्रवाई की प्रतीक्षा कर रहा है।
  
• जांचें कि क्या तत्व प्रकार सही तरीके से परिभाषित किए गए हैं। आमतौर पर, देशी तत्वों के प्रकार अच्छी तरह से डिफ़ॉल्ट रूप से परिभाषित किया गया है और प्रकार का रिवाज या अधिक जटिल तत्वों को गलत तरीके से निर्धारित किया जा सकता है और फिर इसे अपने आप को परिभाषित करने के लिए आवश्यक है।
  
• सारणीबद्ध डेटा के लिए तालिकाओं का उपयोग करें - फिर वे स्क्रीन रीडर के लिए उपलब्ध होंगे।
  
• किसी भी इंटरफ़ेस तत्व पर हस्ताक्षर करें जो स्क्रीन रीडर के लिए देखा और मूल्यवान है। यदि तत्व स्क्रीन रीडर के लिए मूल्य का नहीं है, तो उपयोगकर्ता के लिए उसकी "दृश्यता" अक्षम होनी चाहिए। चित्र का कैप्शन नेत्रहीन उपयोगकर्ता को यह समझने की अनुमति देता है कि उस पर क्या दिखाया गया है। कोड में चित्रों के लिए हस्ताक्षर धीमी गति से इंटरनेट वाले उपयोगकर्ताओं के लिए महत्वपूर्ण हैं।
  
• लेबल के माध्यम से इनपुट क्षेत्र का वर्णन करें, या शीर्षक विशेषता aria-लेबल;
  
• यदि आप एक तत्व को दूसरे तत्व के लिए लेबल स्रोत के रूप में सेट करना चाहते हैं, तो विशेषता बाइंडिंग और सहायक तकनीकों के लिए एक विशेष वर्ग का उपयोग करें।
  

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

एक त्वरित स्वचालित जाँच कई तरीकों से की जा सकती है:

• सीधे HTML कोडस्निफर , कुल्हाड़ी , लाइटहाउस एक्सेसिबिलिटी ऑडिट या WAVE का उपयोग करके ब्राउज़र में;
  
• एकीकृत उपकरण कुल्हाड़ी कोर , प्रकाशस्तंभ तो ऑडिट या AccessLint.js करने के लिए सॉफ्टवेयर को जोड़ने के लिए अपनी परियोजना इंटरफेस की विधानसभा में उपलब्धता और पकड़ त्रुटियों का परीक्षण करती है;
  
• GitHub पर खींचने के दौरान एक्सेसिबिलिटी मुद्दों को खोजने के लिए AccessLint जैसे टूल का उपयोग करना।
  

लेकिन उपयोगकर्ता के एल्गोरिथ्म अंधा उपयोगकर्ताओं के साथ परीक्षण:

• जाँच करें कि स्क्रीन रीडर्स तत्वों और सब कुछ की आवाज की जरूरत है, लेबल, संकेत और त्रुटि शामिल हो जाता है।
  
• सुनिश्चित करें कि सामग्री सही क्रम में वापस खेला जाता है बनाओ: सामग्री के लिए क्षेत्र हेडर के लिए लेबल, आदि
  
• जांचें कि कोड सही भाषा को इंगित करता है और स्क्रीन रीडर उच्चारण के बिना शब्दों का उच्चारण करता है।
  
• सुनिश्चित करें कि बटन और लिंक इस विवरण है, जो हमें समझने के लिए जहां उन पर क्लिक करेंगे अनुमति देता है।
  

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

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

हमें उम्मीद है कि आपकी साइट / आवेदन की हमारी सिफारिशों दर्शकों विशेष आवश्यकता वाले आभारी उपयोगकर्ताओं की भरपाई। हमें टिप्पणियों में प्रश्नों का उत्तर देने में खुशी होगी।