वेब एक्सेसिबिलिटी चेकलिस्ट

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


Contents

आपको क्यों परवाह करनी चाहिए सरल उपयोग?

डेवलपर्स, डिजाइनर और उनके नियोक्ताओं / ग्राहकों को यह सुनिश्चित करने के कई कारण हैं कि एक्सेसिबिलिटी वेब विकास की प्रक्रिया का एक प्रारंभिक और अभिन्न हिस्सा है।.

  • कई क्षेत्रों, जैसे संयुक्त राज्य अमेरिका, यूरोपीय संघ, ब्रिटेन, इज़राइल और जापान में, यह उनकी कानूनी अक्षमता के कारण लोगों के साथ भेदभाव न करने की एक कानूनी आवश्यकता है। पिछले साल यूएसए में, 2,235 नए एडीए वेबसाइट मुकदमे दायर किए गए थे संघीय न्यायालय में। वह प्रति घंटे एक है.
  • एक्सेस करने योग्य साइटें बेहतर कोडित होती हैं, अधिक मजबूत होती हैं और सर्च इंजन पर अच्छी तरह से रैंक करती हैं.
  • सुलभ स्थल होते हैं गैर-अक्षम आगंतुकों के लिए अधिक उपयोगी है, अधिक से अधिक संतुष्टि और रूपांतरण के लिए अग्रणी.
  • दुर्गम स्थल व्यवसाय के लिए खराब हैं। 2019 में ए ब्रिटेन का सर्वेक्षण पाया गया कि 4 मिलियन से अधिक लोगों ने एक खुदरा वेबसाइट को छोड़ दिया क्योंकि उनकी पहुंच में बाधाएं थीं। वह खोया हुआ व्यवसाय, ‘क्लिक-दूर पाउंड’ £ 17.1 बिलियन था। यही कारण है कि के एक अरब. अकेले ब्रिटेन में.
  • संभावित ग्राहकों को स्वेच्छा से दूर करना बुरा व्यवसाय है.

सामान्य मानक और समस्याएं

सौभाग्य से, W3C (शरीर जो कई मानकों का उत्पादन करता है जो वेब पर निर्भर करता है) में वेबसाइटों को कैसे सुलभ बनाया जाए, इसका एक मानक है। इसे कहते हैं वेब सामग्री अभिगम्यता दिशानिर्देश (डब्लुसीएजी)। तीन अनुरूपता स्तर (ए, एए, एएए) हैं, जिनमें being ए ’पहुंच का निम्नतम स्तर है। मैं आपको स्तर एए के लिए लक्ष्य करने की सलाह देता हूं.

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

क्लिक-दूर पाउंड सर्वेक्षण में, विकलांगों के उत्तरदाताओं से पूछा गया कि खरीद को पूरा करने वाले मुख्य ब्लॉक क्या थे। यहां शीर्ष बाधाएं हैं (कई उत्तरों की अनुमति थी):

  1. बहुत अधिक सामग्री के साथ भीड़ वाले पृष्ठ – 66%
  2. reCAPTCHA परीक्षण – 59%
  3. गरीब सुगमता (इसके विपरीत, पाठ लेआउट) 56%
  4. चलती छवियों और ग्राफिक्स की व्याकुलता – 53%
  5. खराब लिंक की जानकारी – 59% (स्क्रीन रीडर उपयोगकर्ताओं के लिए 77%)
  6. फॉर्म भरने में 56%

वेबसाइट एक्सेसिबिलिटी कैसे सुधारें

सबसे पहले, ध्यान दें कि शीर्ष 5 में से कोई भी तकनीकी समस्या नहीं है – वे एक डिज़ाइन या कॉपी राइटिंग त्रुटियां हैं.

1) बहुत अधिक सामग्री

संक्षेप में: शीर्षकों और बुलेटेड सूचियों के साथ अनुभागों में पाठ को तोड़ दें। सरल भाषा का प्रयोग करें.

यह सर्वविदित है कि जैसे-जैसे विकल्पों की संख्या बढ़ती जाती है, वैसे-वैसे ऐसा होता है जानकारी एकत्र करने के लिए आवश्यक प्रयास और अच्छे निर्णय लें। बहुत अधिक सामग्री के साथ भी ऐसा ही है – यह जल्द ही भारी हो जाता है। आवश्यक सामग्री के लिए सामग्री को पार करना एक समय लेने वाला शिल्प है; जैसा कि मार्क ट्वेन (कथित तौर पर) ने लिखा है: “मेरे पास एक छोटा पत्र लिखने का समय नहीं था, इसलिए मैंने इसके बजाय एक लंबा पत्र लिखा।”

हाल की किताब लेखन डिजाइनिंग है पता चलता है

लोग दृष्टि या श्रव्य की परवाह किए बिना पाठ के लंबे खंडों को स्किम करना चाहते हैं, इसलिए हेडर, लघु पैराग्राफ और अन्य सामग्री डिज़ाइन सर्वोत्तम प्रथाओं के साथ अपने लॉन्गफॉर्म लेखन की संरचना करना अत्यंत महत्वपूर्ण है.

इसलिए:

  • केवल एक है

    एक पृष्ठ पर.

  • उदारता से उप-शीर्षों का उपयोग करें; यह दृष्टिहीन उपयोगकर्ताओं के लिए पाठ का एक ab स्लैब ’तोड़ता है, जबकि स्क्रीनिंग जैसे सहायक तकनीकों के उपयोगकर्ता शीर्षकों के बीच कूदने या शीर्षक संरचना से सामग्री का मानसिक मानचित्र प्राप्त करने के लिए शॉर्ट-कट कुंजी का उपयोग कर सकते हैं।.
  • शीर्षकों का स्तर न छोड़ें। उदाहरण के लिए, यदि आप एक का उपयोग करते हैं

    , यह सुनिश्चित करें कि यह एक से पहले है

    .

  • HTML में सही तरीके से चिह्नित बुलेटेड सूचियों (इस तरह!) का उपयोग करें
      ,
    • . स्क्रीन रीडर “10 वस्तुओं की सूची” की घोषणा करेंगे (और उपयोगकर्ता को उन पर कूदने की अनुमति देगा).

    सादा अंग्रेजी का प्रयोग करें

    मोन्जो बैंक “हमारे स्वर की आवाज़” गाइड स्पष्ट भाषा के महत्व की व्याख्या करता है:

    2010 में, अमेरिकी अटॉर्नी सीन फ्लेमर ने एक प्रयोग किया। उन्होंने 800 सर्किट कोर्ट के न्यायाधीशों से एक पारंपरिक ‘कानूनी तर्क’ के साथ, या एक जिसे उन्होंने ‘सादा अंग्रेजी’ कहा था.

    न्यायाधीशों ने सादे अंग्रेजी संस्करण (66% से 34%) को प्राथमिकता दी, और यह प्राथमिकता उनकी उम्र या पृष्ठभूमि से कोई फर्क नहीं पड़ा.

    फ़्लेमर नोट्स (PDF) सादे अंग्रेजी संस्करण का:

    यह लगभग एक पृष्ठ से भी छोटा है, इसलिए यह स्पष्ट रूप से अनावश्यक वाक्य और शब्दों को समाप्त करता है। इसके वाक्य औसतन 17.8 शब्द हैं, 25.2 शब्दों के विपरीत.

    वह निष्कर्ष निकालता है:

    अब हमारे पास 25 साल का अनुभवजन्य शोध है जो एक अपरिहार्य निष्कर्ष पर ले जाता है: यदि आप अपने पाठक को खुश करना और राजी करना चाहते हैं, तो सादे अंग्रेजी में लिखें.

    2) ReCAPTCHA

    संक्षेप में: डेवलपर समय बचाने के लिए अपने उपयोगकर्ताओं को संभावित असंभव हुप्स के माध्यम से कूदने न दें.

    उत्तरदाता अक्सर एक पुराने के बारे में बात कर रहे थे ReCAPTCHA संस्करण:

    wCbly पाठ के साथ reCAPTCHA के संस्करण जिन्हें आपको फिर से लिखना होगा

    मैं छवियों और संख्याओं या अक्षरों को टाइप करने के लिए संघर्ष करता हूं। उस तरह से जहां मुझे क्लिक करना है कि किन छवियों की दुकान है या जो भी है, मैं हमेशा कुछ याद करता हूं या भ्रमित हो जाता हूं और ऊर्जा का उपयोग करता हूं जो मैंने नहीं किया है …

    ReCAPTCHA की अस्पष्ट पत्र शैली को अब हटा दिया गया है। “कोई कैप्चा reCAPTCHA” नामक एक नए अवतार को देखना अधिक आम है (इसे “के रूप में भी जाना जाता है”)मैं एक रोबोट नहीं हूँ “चेकबॉक्स) जिसके लिए उपयोगकर्ता को एक बॉक्स की जांच करने की आवश्यकता होती है, जो पुष्टि करता है कि वे रोबोट नहीं हैं और जो उपयोगकर्ता को स्कोर करने के लिए गुप्त वूडू का उपयोग करता है। यदि वे पास हो जाते हैं, तो आगे बातचीत की आवश्यकता नहीं है। हालाँकि, यदि वे विफल होते हैं, तो एक और चुनौती प्रदर्शित की जाएगी:

    उपयोगकर्ता की मांग करने वाले कैप्चा का आंशिक स्क्रीनशॉट संतरे दिखाने वाले सभी वर्गों पर क्लिक करता है

    यह ध्यान रखें कि CAPTCHA के प्रकार के लिए उपयोगकर्ता को सभी चौकों पर क्लिक करने की आवश्यकता होती है (कहते हैं) एक सड़क पर हस्ताक्षर आवश्यक नहीं है अंतर्राष्ट्रीय है। जैसा कि टेरेंस ईडन लिखते हैं, कैप्चा आपको मानव साबित नहीं करते – वे आपको अमेरिकी साबित करते हैं.

    ReCAPTCHA का सबसे सुलभ रूप है reCAPTCHA v3 जिसके लिए किसी उपयोगकर्ता सहभागिता की आवश्यकता नहीं है, लेकिन आपको परीक्षण विफल होने वाली विज़िट से निपटने के लिए अधिक कार्य करने की आवश्यकता है:

    यह एक शुद्ध जावास्क्रिप्ट एपीआई है जो एक स्कोर लौटाता है, जिससे आपको अपनी साइट के संदर्भ में कार्रवाई करने की क्षमता मिलती है: उदाहरण के लिए प्रमाणीकरण के अतिरिक्त कारकों की आवश्यकता होती है, एक पोस्ट को मॉडरेशन, या थ्रॉटलिंग बॉट्स जो सामग्री को स्क्रैप कर सकते हैं।.

    ३) निर्धनता

    संक्षेप में: सुनिश्चित करें कि पाठ में पर्याप्त कंट्रास्ट है, पठनीय है और उचित नहीं है.

    • पर्याप्त विपरीत सुनिश्चित करें. वेब पर सबसे आम पहुंच अवरोधकों में से एक पाठ और पृष्ठभूमि के बीच खराब विपरीत है। W3C दिशानिर्देशों में बड़े पैमाने पर पाठ और बड़े पैमाने के पाठ की छवियों को छोड़कर कम से कम 4.5: 1 के विपरीत अनुपात की आवश्यकता होती है, जिसमें कम से कम 3: 1 का विपरीत अनुपात होना चाहिए (लोगो और id आकस्मिक ‘पाठ छूट रहे हैं)। कई उपयोगिताओं हैं जो आपके लिए विपरीत अनुपात को माप सकते हैं; मेरा व्यक्तिगत पसंदीदा एडा रोज तोप का उत्कृष्ट है विपरीत विजेट, जो एक उपयोगी ब्राउज़र बुकमार्कलेट है जो आपके पृष्ठ पर अपर्याप्त कंट्रास्ट के क्षेत्रों को उजागर करता है.
    • सभी-कैपिटल शीर्षक नहीं हैं. इस बात के प्रमाण हैं कि वे पढ़ना कठिन हैं क्योंकि पूंजी अक्षर सभी समान हैं, इसलिए हम सामान्य शब्दों के आकार को नहीं पहचान सकते। इसके अतिरिक्त, कुछ स्क्रीन रीडर कैपिटल अक्षरों के समूहों को बाहर निकाल देंगे जैसे कि वे संक्षिप्त रूप (जैसे बीबीसी, डीओजे, आदि) थे। यदि आपके पास सभी पूंजीगत सुर्खियां होनी चाहिए, तो उन्हें अपने HTML में एक सामान्य स्थिति में लिखें और उन्हें सीएसएस के साथ बदल दें पाठ-परिवर्तन: अपरकेस.
    • पाठ को संरेखित करें. (अरबी या हिब्रू जैसी दाईं-बाईं भाषाओं के पृष्ठों के लिए, दाएं-संरेखित पाठ।) यह उचित नहीं है, क्योंकि इससे डिस्लेक्सिया वाले लोगों को पढ़ना मुश्किल हो जाता है। ब्रिटिश डिस्लेक्सिया एसोसिएशन की स्टाइल गाइड सुझाव भी देता है

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

    4) विचलित करने वाले चित्र और ग्राफिक्स

    संक्षेप में: उपयोगकर्ताओं को किसी भी आंदोलन को रोकने की अनुमति देता है; उनकी ऑपरेटिंग सिस्टम सेटिंग्स का सम्मान करें; ऑटो-प्ले वीडियो न करें.

    क्लिक-दूर पाउंड सर्वेक्षण के लिए एक प्रतिवादी ने लिखा,

    जिन साइटों का उपयोग मैंने छोटे मुद्दे के साथ किया था, वे अब एक समस्या बनती जा रही हैं क्योंकि वे अब चलती हुई विज्ञापनों पर ले रही हैं और दुकान के रूप में अधिक विज्ञापनों को लगातार लोड कर रही हैं.

    WCAG के सबसे बुनियादी स्तर के लिए “किसी भी चलती, ब्लिंकिंग या स्क्रॉलिंग जानकारी की आवश्यकता होती है जो (1) स्वचालित रूप से शुरू होती है, (2) पांच सेकंड से अधिक समय तक चलती है, और (3) अन्य सामग्री के समानांतर प्रस्तुत किया जाता है, इसके लिए एक तंत्र है। उपयोगकर्ता को रोकना, रोकना, या छिपाना जब तक कि आंदोलन, निमिष या स्क्रॉल करना एक गतिविधि का हिस्सा नहीं है, जहां यह आवश्यक है ”.

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

    एनिमेशन के लिए उपयोगकर्ता की पसंद का सम्मान करें

    सभी प्रमुख ऑपरेटिंग सिस्टम उपयोगकर्ता को ऑन-स्क्रीन कम गति के लिए वरीयता व्यक्त करने की अनुमति देते हैं – शायद इसलिए कि उनके पास गति-ट्रिगर वेस्टिबिस्ट स्पेक्ट्रम डिसऑर्डर है। आपकी वेबसाइट यह पता लगा सकती है कि उपयोगकर्ता ने CSS के साथ ऐसा किया है या नहीं पसंद-कम-गति मीडिया क्वेरी.

    यहां, यदि उपयोगकर्ता ने कोई वरीयता नहीं दी है, तो हम केवल चेतन को एक बटन की अनुमति देते हैं:

    @मीडिया (वरीयता-घटा-गति: कोई वरीयता नहीं) {
    बटन {
    / * `वाइब्रेट` कीफ्रेम को कहीं और परिभाषित किया जाता है * /
    एनीमेशन: कंपन 0.3s रैखिक अनंत दोनों;
    }
    }

    यदि आप किसी ऐसी साइट को दोबारा देखना चाहते हैं जिसमें कई एनीमेशन नियम हैं, तो निम्नलिखित हो सकते हैं पहले से घोषित सभी सीएसएस एनिमेशन बंद करें:

    @मीडिया (प्राथमिकता-घटा-गति: कम करें) {
    *,
    *::इससे पहले,
    *::उपरांत {
    एनीमेशन-अवधि: 0.001 महत्वपूर्ण;
    संक्रमण-अवधि: 0.001 महत्वपूर्ण;
    }
    }

    उपयोगकर्ता की ऑपरेटिंग सिस्टम वरीयताओं का सम्मान करने के विषय पर, आप विचार करना चाह सकते हैं डार्क मोड के लिए अपनी वेबसाइट डिजाइन करना.

    5) गरीब लिंक जानकारी

    संक्षेप में: अद्वितीय लिंक पाठ के साथ लिंक को पहचानने योग्य बनाएं। यदि कोई लिंक नया टैब या फ़ाइल खोलेगा, तो उपयोगकर्ताओं को चेतावनी दें.

    खराब लिंक के मुख्य कारणों में से एक अक्सर खराब कॉपी राइटिंग है। अधिकांश स्क्रीन रीडर उपयोगकर्ता को एक पृष्ठ पर लिंक की सूची को जल्दी से देखने की अनुमति देते हैं (सबसे अधिक उपयोग किए जाने वाले वाणिज्यिक स्क्रीन रीडर, JAWS में, कीबोर्ड शॉर्टकट Ins + F7 है;) मुफ्त एनव्हिडिए स्क्रीन रीडर, एक ही कीबोर्ड शॉर्टकट एक एलीमेंट लिस्ट लाता है जो पेज लिंक, हेडिंग और लैंडस्केप को सूचीबद्ध करता है).

    हालाँकि, यदि हर लिंक में यह कहा जाता है कि “यहाँ क्लिक करें” या “और पढ़ें”, उन्हें अलग करने के लिए और कुछ नहीं है, यह बेकार है। इसे हल करने का सबसे आसान तरीका केवल अद्वितीय लिंक पाठ लिखना है, लेकिन अगर यह संभव नहीं है, तो आप प्रत्येक लिंक पर एक अद्वितीय एरिया-लेबल विशेषता का उपयोग करके सहायक तकनीक के लिए लिंक पाठ को ओवर-राइड कर सकते हैं.

    यहाँ से एक अच्छा उदाहरण है जूमला वेबसाइट:

    जूमला वेबसाइट, एक जैसी दिखने वाली दो अलग-अलग कहानियां

    दृश्य लिंक पाठ केवल “अधिक पढ़ें” है, लेकिन जूमला का उपयोग करता है aria-लेबल सहायक प्रौद्योगिकी के लिए प्रत्येक अद्वितीय बनाने के लिए विशेषताएं:

    अधिक पढ़ें
    
    अधिक पढ़ें

    जिस वजह से aria-लेबल सहायक तकनीकों द्वारा लिंक पाठ के बजाय पाठ का उपयोग किया जाएगा, W3C की सिफारिश की जाती है कि लिंक के भीतर उपयोग किए गए पाठ के साथ “लेबल के रूप में उपयोगकर्ताओं के बीच लगातार संचार की अनुमति होगी”.

    ध्यान दें: कुछ बुरी सलाह जो मैं अभी भी पुरानी साइटों पर देख रहा हूं, का उपयोग करके लिंक पर व्याख्यात्मक पाठ जोड़ना है शीर्षक विशेषता:

    और पढ़ें>

    यह मत करो. शीर्षक अधिकांश स्क्रीन पाठकों के सामने नहीं आया है (डेवलपर्स इसे “एसईओ” उद्देश्यों के लिए कीवर्ड के साथ सामान करने के लिए उपयोग करते हैं, इसलिए स्क्रीन रीडर विक्रेताओं ने इसे डिफ़ॉल्ट रूप से अक्षम कर दिया), और ब्राउज़र शीर्षक विशेषताओं को title टूलटिप्स ‘के रूप में प्रस्तुत करते हैं जो केवल होवर पर माउस उपयोगकर्ताओं के लिए उपलब्ध हैं।.

    लिंक की तरह दिखना चाहिए लिंक

    डिफ़ॉल्ट रूप से, ब्राउज़र लिंक को रेखांकित करते हैं। इसे बदलना सबसे अच्छा नहीं है, लेकिन यदि आप इस बारे में डिजाइनर के साथ कार पार्क में कोई लड़ाई हार जाते हैं, तो लिंक टेक्स्ट में आसपास के नॉन-लिंक टेक्स्ट से 3: 1 कंट्रास्ट अनुपात होना चाहिए और कुछ ‘नॉन-कलर डिज़ाइनर’ देना चाहिए। उदाहरण के लिए, जब वे मँडराते या फ़ोकस किए जाते हैं, तो वे एक कड़ी होते हैं:

    a: होवर, a: फोकस {टेक्स्ट-डेकोरेशन: अंडरलाइन ;;

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

    Case नॉन-कलर डिज़ाइनर ’(हमारे मामले में, एक अंडरलाइन) यह सुनिश्चित करता है कि कम दृष्टि या रंग अंधापन वाले आगंतुक हॉवर या फ़ोकस पर परिवर्तन देखेंगे। (स्क्रीन पाठक स्वचालित रूप से लिंक पाठ से पहले “लिंक” की घोषणा करते हैं।)

    लोग बताएं कि क्या लिंक एक नया टैब / पृष्ठ खोलता है

    यह एक आगंतुक को भ्रमित कर सकता है यदि किसी लिंक को सक्रिय करने से एक नया टैब या एक नई विंडो खुलती है, खासकर यदि किसी पृष्ठ पर केवल कुछ लिंक ऐसा करते हैं (उदाहरण के लिए, केवल बाहरी लिंक एक नया टैब खोलते हैं)। यदि आपको ऐसा करना चाहिए, तो आपको उपयोगकर्ता को लिंक टेक्स्ट में, या ऊपर दिए गए aria- लेबल विधि का उपयोग करके सतर्क करना चाहिए.

    लोगों को बताएं कि क्या लिंक एक फ़ाइल के लिए है

    यदि एक लिंक एक फ़ाइल (उदाहरण के लिए, एक पीडीएफ या एक वीडियो) के लिए है, तो लिंक पाठ में उपयोगकर्ता को बताएं। इसे अंदर न छुपायें aria-लेबल, क्योंकि यह बहुत से देखे गए उपयोगकर्ताओं के लिए उपयोगी हो सकता है (कुछ मोबाइल उदाहरण के लिए .docx फ़ाइल नहीं खोल सकते हैं)। यदि यह एक बड़ी फ़ाइल है, तो अनुमानित आकार के उपयोगकर्ता को सचेत करने पर विचार करें; वे 3G पर एक बड़ी वीडियो फ़ाइल डाउनलोड करने की इच्छा नहीं कर सकते हैं.

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

    वार्षिक रिपोर्ट (पीडीएफ, 240 एमबी)

    6) एक और डिज़ाइन त्रुटि: फोकस रिंग को हटाना

    संक्षेप में: सुनिश्चित करें कि एक कीबोर्ड उपयोगकर्ता हमेशा देख सकता है कि वे वर्तमान में कहां केंद्रित हैं.

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

    लिंक के चारों ओर क्रोमियम की डिफ़ॉल्ट फोकस रिंग का स्क्रीनशॉट (जो एक छवि भी है)

    हालांकि, कुछ लोग इस बात पर विचार करते हैं कि जब वे माउस का उपयोग कर रहे हैं और सीएसएस के साथ इसे बंद कर देते हैं, तो यह कीबोर्ड उपयोगकर्ताओं के लिए दुर्गम हो जाता है।.

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

    बटन: फोकस {/ * कुछ रोमांचक बटन फोकस शैलियों * /}
    बटन: फोकस: नहीं (: फोकस-दृश्य) {
    / * उपरोक्त सभी केंद्रित बटन शैलियों को पूर्ववत करें
    यदि बटन पर ध्यान केंद्रित है, लेकिन ब्राउज़र सामान्य रूप से नहीं होगा
    डिफ़ॉल्ट फ़ोकस शैलियाँ दिखाएं * /
    }
    बटन: फोकस-दृश्य {/ * कुछ भी * अधिक * रोमांचक बटन फोकस शैलियों * /}

    7) फॉर्म भरना

    संक्षेप में: डिज़ाइन फॉर्म फ़ील्ड जो फॉर्म फ़ील्ड की तरह दिखते हैं, प्रत्येक एक लेबल के साथ जुड़ा हुआ है। स्वतः-भरण अक्षम न करें.

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

    ऑटोफिल इज़ योर फ्रेंड

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

    इसके अलावा, स्वत: पूर्ण वर्तमान में एए अनुपालन प्राप्त करने के लिए एकमात्र पर्याप्त तकनीक है सफलता मानदंड 1.3.5: इनपुट उद्देश्य की पहचान करें.

    प्रपत्र फ़ील्ड बनाएँ प्रपत्र फ़ील्ड की तरह देखें

    डिफ़ॉल्ट रूप से, ब्राउज़र बॉक्स के रूप में इनपुट फ़ील्ड प्रदर्शित करते हैं। हर तरह से, मार्जिन, पैडिंग और बॉर्डर के साथ स्टाइल करें, लेकिन उन्हें बक्से के रूप में रखें। कई डिजाइनरों ने उपयोगकर्ता के इनपुट इनपुट टेक्स्ट के लिए Google की पूर्व-2017 सामग्री डिज़ाइन पैटर्न का अनुसरण किया:

    पुरानी सामग्री डिजाइन इनपुट, आयताकार बॉक्स के बजाय क्षितिज रेखा के साथ

    हालांकि, Google ने पाया कि पुराने टेक्स्ट फ़ील्ड के तहत लाइन कुछ उपयोगकर्ताओं के लिए स्पष्ट नहीं थी, जो अक्सर एक विभक्त के साथ भ्रमित होती थी, और डिज़ाइन को बदल देती थी। में प्रयोज्य परीक्षण 600 प्रतिभागियों के साथ, उन्होंने यह पता लगाया

    एक आयताकार (बॉक्स) आकार के साथ संलग्न पाठ क्षेत्र एक लाइन खर्च के साथ उन लोगों की तुलना में बेहतर प्रदर्शन किया … आज, ये नए पाठ फ़ील्ड खाते के साइन-इन पृष्ठों से Google रूपों तक Google उत्पादों में दिखाई देते हैं.

    यदि आप Google की पूर्ण सामग्री डिज़ाइन UI लाइब्रेरी को अपनाने पर विचार कर रहे हैं, तो पढ़ें सामग्री डिज़ाइन पाठ फ़ील्ड का उपयोग करना बंद करें! मात्सुको फ्रीडलैंड द्वारा यह देखने के लिए कि क्या यह आपकी आवश्यकताओं को पूरा करता है.

    सभी प्रपत्र फ़ील्ड लेबल करें

    सभी फॉर्म फ़ील्ड (टेक्स्ट इनपुट, चेकबॉक्स, रेडियो बटन, स्लाइडर, आदि) को लेबल करने की आवश्यकता है। ऐसा करने का सबसे अच्छा तरीका एक HTML का उपयोग करना है ; जैसा कि WCAG कहता है, “विनिर्देशन के अनुसार उपयोग किए जाने पर मानक HTML नियंत्रण पहले से ही इस सफलता की कसौटी पर खरा उतरता है”.

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

    नकली बनाम असली लेबल तुलना

    यह मोटर नियंत्रण कठिनाइयों वाले किसी व्यक्ति के लिए इनपुट को बहुत आसान बनाता है – या शायद आपके लिए, एक ऊबड़ ट्रेन पर एक छोटे स्क्रीन पर एक छोटे चेकबॉक्स की जांच करने की कोशिश कर रहा है। यह स्क्रीन रीडर उपयोगकर्ताओं के लिए भी महत्वपूर्ण है जो एक फॉर्म में फ़ील्ड के माध्यम से टैब करेंगे (डिफ़ॉल्ट रूप से, केवल लिंक और फ़ॉर्म फ़ील्ड टैबिंग द्वारा ध्यान देने योग्य हैं); जब वे एक इनपुट फ़ील्ड में टैब करते हैं, तो स्क्रीन रीडर संबंधित लेबल की सामग्री की घोषणा करेगा.

    इसके लिए कोड सरल है। इनपुट फ़ील्ड को एक विशिष्ट आईडी दी गई है, और लेबल का उपयोग करके इसके साथ जुड़ा हुआ है के लिये विशेषता:

    
    

    लेबल छिपाना

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

    इनपुट फ़ील्ड, बटन के साथ 'खोज' बाद में

    हम इनपुट फ़ील्ड को “खोज” पाठ के साथ जोड़ सकते हैं, जो सबमिट बटन का उपयोग करके सामग्री है aria-labelledby:

    
    

    हम इस्तेमाल कर सकते थे aria-लेबल (जो हम पहले लिंक के बारे में बात करते समय मिले थे):


    लेकिन पृष्ठ पर दिखाई देने वाले पाठ को प्राथमिकता देना हमेशा बेहतर होता है क्योंकि यदि अनुवाद उपकरण के माध्यम से पृष्ठ चलाया जाता है, तो इसका अनुवाद किया जाएगा, जबकि HTML विशेषताओं में पाठ “छिपा” नहीं होगा। (इस टिप के लिए एड्रियन रोज़ेली को हैट-टिप, अपने शानदार लेख से एक नियंत्रण लेबलिंग के लिए तरीकों की मेरी प्राथमिकता.)

    शीर्ष मिलियन मुख पृष्ठ पर अधिकांश सामान्य त्रुटियाँ

    हमने ई-कॉमर्स साइटों के शीर्ष अवरोधों को देखा, जैसा कि उपयोगकर्ताओं द्वारा किसी न किसी रूप में हानि के साथ रिपोर्ट किया गया था। अब आइए साइटों के एक अधिक व्यापक सेट पर देखें – शीर्ष 1,000,000 वेब साइटों के लिए होम पेज, WebAIM द्वारा स्वचालित रूप से विश्लेषण किया गया अगस्त 2019 में। विश्लेषण किए गए पृष्ठों के 98% में कम से कम एक त्रुटि थी। सबसे आम त्रुटियां हैं

    1. कम विपरीत पाठ (86.1%)
    2. छवियों के लिए वैकल्पिक पाठ गुम (67.9%)
    3. खाली लिंक (58.9%)
    4. मिसिंग फॉर्म इनपुट लेबल (53.2%)
    5. दस्तावेज़ भाषा गुम (30.5%)

    हमने निम्न कंट्रास्ट, लिंक और उपरोक्त इनपुट से निपटा है। अब देखते हैं कि हम अन्य सामान्य त्रुटियों से कैसे बच सकते हैं.

    8) सभी छवियों, वीडियो और ऑडियो के लिए पाठ विकल्प प्रदान करें

    संक्षेप में: एक छवि या वीडियो के माध्यम से संचारित किसी भी जानकारी के लिए एक पाठ के बराबर होना चाहिए.

    प्रत्येक वैकल्पिक पाठ (“ऑल्ट टेक्स्ट”) होना चाहिए, जो विज़ुअल इम्पीरमेंट वाले विज़िटर या कम बैंडविड्थ / महंगे डेटा प्लान वाले उन लोगों तक पहुँचाया जा सकता है जिन्होंने अपने ब्राउज़र में चित्र बंद कर दिए हैं। इसमें पाठ की छवियां शामिल हैं.

    यहाँ बुनियादी नियम हैं:

    • यदि छवि विशुद्ध रूप से सजावटी है, तो इसका खाली होना आवश्यक है: alt = "". (लेकिन विशुद्ध रूप से सजावटी चित्र शायद सीएसएस में होना चाहिए, वैसे भी।)
    • यदि किसी चित्र को बॉडी टेक्स्ट में वर्णित किया गया है तो उसमें खाली ऑल्ट टेक्स्ट होना चाहिए (alt = ""), पुनरावृत्ति से बचने के लिए। लेकिन सावधान रहें अगर यह में
      – देख आप कैसे समझते है? अधिक जानकारी के लिए.
    • यदि कोई चित्र लिंक की एकमात्र सामग्री है (उदाहरण के लिए, आपके संगठन के लोगो को होमपेज पर जाने के लिए क्लिक किया जा सकता है) वैकल्पिक पाठ को लिंक के गंतव्य का वर्णन करना चाहिए। उदाहरण के लिए, alt = "होम पेज".
    • आइकन फ़ॉन्ट का उपयोग न करें; वे डिस्लेक्सिक लोगों के लिए वास्तव में खराब हो सकते हैं। यदि आप उनका उपयोग करते हैं, उन्हें एसवीजी में परिवर्तित करें.

    वीडियो और ऑडियो वैकल्पिक पाठ

    यह मत भूलो कि श्रवण दोष वाले लोगों के लिए ऑडियो सामग्री को वैकल्पिक पाठ की आवश्यकता है। इसका मतलब है कि पॉडकास्ट के टेप और वीडियो पर उपशीर्षक। और, फिर से: ऑटोप्ले मीडिया मत करो.

    9) उचित दस्तावेज़ भाषा जोड़ें

    संक्षेप में: सहायक तकनीक उस भाषा को जाने, जो आपके पाठ में है.

    30% मुख पृष्ठ उन भाषाओं को घोषित नहीं करते हैं, जिनमें वे लिखी गई हैं, जो उन्हें स्क्रीन रीडर उपयोगकर्ताओं के लिए भ्रमित कर सकती हैं। यह महत्वपूर्ण है क्योंकि उदाहरण के लिए “छह” शब्द बहुत अलग तरीके से उच्चारित किया जाता है यदि वाक्य अंग्रेजी या फ्रेंच में है.

    अपने HTML तत्व में एक lang विशेषता जोड़कर इसे हल करना आसान है:

    “एन” एक स्क्रीन रीडर (या अनुवाद सॉफ्टवेयर) बताता है कि यह पृष्ठ अंग्रेजी में है। “Es” स्पेनिश है, “fr” फ्रेंच है, और इसी तरह। अधिकांश भाषाओं के लिए, भाषा टैग निर्धारित करना बहुत आसान है। W3C के पास एक गाइड है भाषा टैग चुनना.

    यदि पृष्ठ में अपनी मुख्य घोषित की गई भाषा के अलावा अन्य भाषा में सामग्री है, तो उस सामग्री के आस-पास के तत्व में एक भाषा विशेषता जोड़ें। उदाहरण के लिए, अंग्रेजी में घोषित पृष्ठ पर:

    यदि आप चैट करना चाहते हैं Matador, कुछ शांत में छोटा भवन
    और मिलो senoritas स्कोर से, एस्पाना पोर एहसान

    10) अपनी सामग्री के आसपास एक आगंतुक की मदद करें

    संक्षिप्त में: सहायक तकनीकी उपयोगकर्ताओं को आपकी सामग्री को समझने और नेविगेट करने में मदद करने के लिए HTML लैंडमार्क तत्वों का उपयोग करें.

    जब कोई विज़िटर आपके पृष्ठ पर आता है, तो वे आसानी से यह समझने के लिए इसे स्कैन कर सकते हैं कि नेविगेशन कहां है, और मुख्य सामग्री कहां से शुरू होती है। एक स्क्रीन रीडर उपयोगकर्ता ऐसा नहीं कर सकता है। हालाँकि, HTML5 हमें इन क्षेत्रों को चिह्नित करने के लिए कुछ नए टैग देता है, और सहायक तकनीकों के शॉर्टकट हैं जो लैंडस्केप को छोड़ (या छोड़ सकते हैं) हैडर, फ़ुटबाल, पथ प्रदर्शन और जैसे.

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

    • अपनी मुख्य सामग्री, यानी सामान, जो हेडर नहीं है, प्राथमिक नेविगेशन या पाद, एक में लपेटें
      तत्व। लगभग सभी मामलों में, केवल एक ही होना चाहिए
      प्रति पृष्ठ। सभी ब्राउज़र (IE9 +) आपको इसे स्टाइल करने की अनुमति देते हैं, और सहायक तकनीकों को पता है कि इसके साथ क्या करना है.
    • अपने हेडर (ब्रांड लोगो, स्ट्रैपलाइन, पृष्ठ की हेडिंग) को एक में लपेटें
      तत्त्व.
    • अपने पाद (कानूनी सामान, संपर्क विवरण, कॉपीराइट नोटिस आदि) को एक में लपेटें
    • अपने प्राथमिक नेविगेशन का उपयोग करके चिह्नित करें
        में लिपटे तत्व। यह अंदर घोंसला किया जा सकता है
        यदि वह पृष्ठ के दृश्य डिजाइन को फिट बैठता है.
      • विज्ञापन और गैर-आवश्यक सामग्री को एक में लपेटा जाना चाहिए
      • यदि आपके पास एक पृष्ठ पर एक से अधिक उत्पाद / वीडियो / समाचार आइटम / ब्लॉग पोस्ट हैं, तो उनमें से प्रत्येक को एक में लपेटें
        तत्त्व.

      उसकी में स्क्रीन रीडर उपयोगकर्ताओं का सर्वेक्षण, WebAIM ने पाया कि 26% स्क्रीन रीडर उपयोगकर्ता किसी पृष्ठ को नेविगेट करते समय अक्सर या इन स्थलों का उपयोग करते हैं.

      इसके अतिरिक्त, सामग्री के असतत टुकड़े लपेटकर

      Apple के वॉचओएस को सामग्री को बेहतर तरीके से प्रदर्शित करने में मदद करता है। मेरा लेख देखें सिमेंटिक HTML का व्यावहारिक मूल्य इस पर और अधिक के लिए.

      11) HTML का सही तरीके से उपयोग करें

      संक्षेप में: HTML तत्वों के शब्दार्थ और डिफ़ॉल्ट व्यवहार को समझें; अपनी सामग्री के लिए सही तत्व का उपयोग करें.

      इस लेख में एक सामान्य विषय सही HTML तत्वों का उपयोग किया गया है। इसका उपयोग करना लेबल एक अंतर्निहित ब्राउज़र व्यवहार है जो इसके संबंधित इनपुट क्षेत्र को केंद्रित करता है; का उपयोग करते हुए

      के लिए बेहतर है

      क्योंकि यह स्क्रीन रीडर उपयोगकर्ताओं को एक स्क्रीन रीडर का उपयोग नहीं करने वालों के लिए पूरी तरह से विनीत होने के साथ महत्वपूर्ण सामग्री पर सीधे कूदने की अनुमति देता है.

      एक और उदाहरण एक का उपयोग कर रहा है

      Like this post? Please share to your friends:
Adblock
detector
map