2008-09-14 13 views
6

मैं एक recent episode of Hanselminutes सुन रहा था जहां स्कॉट Hanselman वेब अनुप्रयोगों में पहुंच चर्चा कर रहा था और यह मेरे अपने ही अनुप्रयोगों में पहुँच के बारे में सोच मिला है के लिए वेब उपयोगकर्ता अनुभव को बढ़ाना।दृष्टि बिगड़ा

हम सभी अपने वेब अनुप्रयोगों में अर्थ मार्कअप के महत्व को समझने के रूप में यह अन्य साधारण संवर्द्धन कि विकलांग उपयोगकर्ताओं के लिए उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है के बारे में पहुँच से संबंधित है लेकिन क्या?

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

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

दृष्टि के लिए उपयोगकर्ता अनुभव में सुधार के लिए आपकी कुछ सरल चाल क्या हैं?

उत्तर

4

चेक बाहर Fangs

Fangs कि emulates क्या एक स्क्रीन रीडर "देखता है" किसी वेब पेज पर जाकर जब Firefox के लिए एक में ब्राउज़र उपकरण है। इसका कार्य सरल है: एक वेब पेज का दौरा करते समय एक स्क्रीन रीडर किसी उपयोगकर्ता को क्या पढ़ा जाएगा, इसकी प्रतिलिपि बनाने के लिए। यदि आपने अपनी सामग्री को प्रभावी ढंग से संरचित किया है, तो यह त्वरित रूप से विश्लेषण करने के लिए एक उपयोगी टूल है ताकि यह दृष्टिहीन लोगों द्वारा समझ में और उपयोग योग्य हो, बिना किसी स्क्रीन-रीडर एप्लिकेशन जैसे जैव या विंडोज आइज़ का उपयोग (और खरीद) सीखने के लिए आपको मजबूर किया जा सके।

1

स्क्रीन पाठकों के साथ सबसे बड़ी समस्या आमतौर पर आपके पृष्ठ पर चीजों को रखने के लिए टेबल होती है। स्क्रीनreaders वास्तव में उनको संभाल नहीं सकते हैं। अपने एचटीएमएल में div में सामान डाल दें और उन्हें एक समझदार क्रम में रखें। फिर div को अपने पृष्ठ पर सीएसएस के साथ रखें। तालिका में होने वाली सामग्री को प्रदर्शित करने के लिए टेबल का उपयोग करें।

2

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

1

कई वेब पृष्ठों के लिए कोड के रूप में संरचित है:

  1. हैडर
  2. शीर्ष नेविगेशन
  3. बायां मार्गदर्शक
  4. सामग्री
  5. पाद

जब इस तरह से संरचित, फिर "मुख्य सामग्री पर जाएं" के लिए छिपा लिंक नीचे है ficial।

  1. सामग्री
  2. हैडर
  3. शीर्ष नेविगेशन
  4. बायां मार्गदर्शक
  5. पाद

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

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

+0

अच्छे अंक। मुझे कल्पना है कि कई मौजूदा वेबसाइटें उनकी सामग्री प्लेसमेंट को आसानी से पुन: संरचना करने में सक्षम नहीं हो सकती हैं। –

+0

हालांकि, आपको अपनी सामग्री के आदेश के बारे में सोचना होगा। विशेष रूप से सीएसएस पोजिशनिंग के साथ, यह उस क्रम में होना चाहिए जो समझ में आता है यदि आप ऊपर से नीचे पढ़ रहे हैं। उस स्थिति में, ऐसा लगता है कि यह पहला उदाहरण होना चाहिए, दूसरा नहीं, लेकिन इसे किसी भी तरह से बहस की जा सकती है। – lordscarlet

1

आंशिक रूप से आंशिक दृष्टि से हमें यह सुनिश्चित करने की आवश्यकता है कि पाठ अत्यधिक छोटा नहीं है और पृष्ठभूमि रंग को काफी हद तक विपरीत करता है। हमें यह भी सुनिश्चित करना चाहिए कि em जैसे पीएक्स (हालांकि, मेरी राय में, यह एक समस्या से कम हो रहा है क्योंकि ब्राउज़र तेजी से ज़ूमिंग का पक्ष ले रहे हैं क्योंकि सापेक्ष आकार देने वाली इकाइयों का उपयोग करके पाठ का आकार बदलना चाहिए। टेक्स्ट आकार बदलने पर)।

स्क्रीन पाठकों के उपयोगकर्ताओं के लिए, स्क्रीन पाठकों का वास्तविक उपयोग करने के तरीके के बारे में एक अच्छा विचार प्राप्त करना सहायक होता है। निम्नलिखित लेख स्क्रीन पाठकों का उपयोग कर वेब ब्राउज़ करने वाले अंधे लोगों के अवलोकनों के आधार पर guidlines प्रस्तुत करता है; पुराना होने के एक छोटे से अब है, लेकिन आप स्क्रीन रीडर उपयोगकर्ताओं में मदद मिलेगी क्या के लिए एक अच्छा लग रहा है देता है, और क्या नहीं करेंगे:

http://redish.net/content/papers/interactions.html

साथ ही, नेत्रहीनों के लिए अमेरिकी फाउंडेशन एक section of their website dedicated to advice for web developers on how to cater for vision impaired users है।

दृष्टिहीन रूप से प्रभावित होने के अलावा, हमें उन विकलांगों पर विचार करने की आवश्यकता है जो उन्हें माउस का उपयोग करने से रोकते हैं, और न्यूरोलॉजिकल विकलांगता वाले भी। यदि कोई व्यक्ति उन व्यक्तियों को पूरा करने के बारे में सलाह देकर संसाधन प्रदान कर सकता है, तो यह बहुत अच्छा होगा।

3

थोड़ा समय के बाद से मैं एक नौकरी है जहाँ हम धारा 508 का पालन करने के लिए किया था पर किया गया है किया गया है, लेकिन यहाँ मैं क्या याद है कि अन्य पोस्टर द्वारा को छुआ नहीं किया गया है ...

  1. केवल डेटा के लिए टेबल का उपयोग करें। यदि आप इससे बच सकते हैं तो लेआउट के लिए टेबल का उपयोग न करें।
  2. डेटा के लिए टेबल का उपयोग करते समय, आपके कॉलम हेडर को TH टैग में घोंसला होना चाहिए और आपको शीर्षक और स्कोप विशेषताओं का उपयोग करना चाहिए। आपके टेबल टैग को सारांश विशेषता का उपयोग करना चाहिए।
  3. छवियों के पास alt विशेषता के लिए एक मान होना चाहिए जो छवि में क्या हो रहा है और यदि छवि कोई उद्देश्य नहीं देती है (यह एक शर्म छवि या कुछ समान है) तो alt विशेषता खाली स्ट्रिंग पर सेट की जानी चाहिए।
  4. भाषण पाठक को एक पाठ का उपयोग करने का प्रयास करें और/या केवल कीबोर्ड के माध्यम से नेविगेट करें और/या स्टाइलशीट बंद करें। मेरा मानना ​​है कि आपको जवा खरीदने की ज़रूरत है, लेकिन मुझे यकीन है कि वहां मुफ्त स्क्रीन पाठक हैं। आपको स्क्रीन रीडर के माध्यम से एक साइट का अनुभव करने की ज़रूरत है ताकि वास्तव में समझ सकें कि अधिकांश वेब पेजों को पाठकों की व्याख्या करने वाले संकेतों के बिना नेविगेट करना कितना मुश्किल है।
4

सुलभ पृष्ठों को बनाना कुछ ऐसा है जो इस बारे में सोचना मुश्किल है कि आपने कभी ऐसा नहीं किया है। हालांकि, एक बार जब आप बुनियादी अवधारणाओं को सीखते हैं तो 95% मामलों में करना बहुत आसान होता है। मैं ज्यादातर दोहरा जाएगा क्या अन्य लोगों ने कहा है, लेकिन:

  1. केवल तालिका डेटा के लिए तालिकाओं का उपयोग
  2. आप HTML के माध्यम से अर्थ उपकरण आप के लिए उपलब्ध का उपयोग सुनिश्चित करें। इसका मतलब है कि एक स्कोप विशेषता के साथ TH का उपयोग करना। <em> <i> और < > < बी > के बजाय > का उपयोग करें। संक्षिप्त नाम और abbrev टैग का उपयोग करें। परिभाषा सूचियों का प्रयोग करें। यदि कोई चाहती है तो मैं इन चीजों पर विस्तार कर सकता हूं।
  3. इनपुट क्षेत्रों पर लेबल टैग का उपयोग करना सबसे महत्वपूर्ण बातों में से एक है। हर इनपुट क्षेत्र, रेडियो बटन, चेकबॉक्स और TextInput के लिए आप होना चाहिए:

    < = "उपयोगकर्ता नाम" के लिए> प्रयोक्ता नाम लेबल: </label> < इनपुट नाम = "उपयोगकर्ता नाम" />

  4. जोड़ें " नेविगेशन छोड़ें "या" नेविगेशन पर छोड़ें "टेक्स्ट के बड़े भाग कहां हैं। यदि आप किसी सरकारी साइट पर काम कर रहे हैं तो यह दूसरी प्रकृति होनी चाहिए कि जो कुछ भी आप बना रहे हैं, वह आपको दोहराव वाली जानकारी छोड़ने की अनुमति देता है।

  5. जोर के लिए रंगों का उपयोग न करें।

  6. सुनिश्चित करें कि आपका सभी टेक्स्ट आकार बदलने योग्य है। यह बहुत अधिक मतलब आपके सीएसएस में "पीएक्स" का उपयोग नहीं करते हैं।

  7. मैं इस पर फिर से जोर देउंगा: अर्थपूर्ण पृष्ठ बनाएं। अपने शीर्षक के लिए एच टैग का उपयोग करें। नेविगेशन के लिए उल/ली का उपयोग करें।

  8. सभी छवियों पर alt विशेषता का उपयोग करें। यदि आपके पास स्पेसर gif है ... अच्छा .. नहीं। अन्यथा, समझाएं कि तस्वीर क्या है और इसकी सामग्री के साथ इसका महत्व क्या है। अपने चार्ट टैग के रूप में "चार्ट" का उपयोग न करें। "वाईटीडी वित्त का चार्ट: $ 5,000 क्यू 1, $ 4,000 क्यू 2, $ 8,000 क्यू 3" या कुछ इसी तरह का उपयोग करें।

  9. बंद कैप्शन या सभी ऑडियो और वीडियो घटकों

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

आपको स्टाइलशीट के बिना अक्सर अपनी साइट को देखना चाहिए (ctrl-shift-s अगर आपके पास फ़ायरफ़ॉक्स औरहै) यह देखने के लिए कि पृष्ठ समझ में आता है या नहीं। यदि यह आपको दृष्टिहीन व्यक्ति के रूप में समझ में नहीं आता है, तो यह स्क्रीन रीडर का उपयोग करने वाले किसी के लिए समझ में नहीं आता है।

+1

जोर के लिए रंग का उपयोग ठीक है जब तक कि यह जोर देने का एकमात्र तरीका नहीं है। – ale

संबंधित मुद्दे