2015-06-10 6 views
9

मैं अपने एचटीएमएल पेज को स्क्रीन पाठकों के लिए उपयुक्त बनाना चाहता हूं। हैडर, साइडबार और सामग्री:कुछ HTML पेज भागों के स्क्रीन पाठकों के लिए प्राथमिकता कैसे सेट करें?

वर्तमान में, पेज 3 मुख्य भागों है

enter image description here

स्क्रीन रीडर, पहली बार में हैडर पढ़ा तो साइडबार और अंत में खोज परिणाम

दुर्भाग्यवश, जिन उपयोगकर्ताओं को दृष्टि के साथ समस्याएं हैं, वे लंबे समय तक प्रतीक्षा करते हैं, जबकि कार्यक्रम सभी साइड बार सामग्री को पढ़ेगा (कारण साइडबार में कई फ़िल्टर होते हैं)। मैं खोज परिणामों के लिए एक बड़ी प्राथमिकता कैसे निर्धारित कर सकता हूं? कारण खोज परिणाम साइडबार सामग्री से पहले पढ़ा जाना चाहिए।

और यह महान अगर कोई मुझे मैं क्या HTML पृष्ठों की पहुंच स्तर को बढ़ाने के लिए कर सकते हैं के बारे में एक HTML ट्यूटोरियल प्रदान किया जाएगा:

  • मैं कुछ DIV तत्वों स्क्रीन रीडर द्वारा छोड़ी जाने वाली कैसे बदल सकता हूँ?
  • मैं पेज पेज पढ़ने के अनुक्रम को कैसे बदल सकता हूं?
  • मैं केवल पठनीय केवल खोज फ़ॉर्म और खोज परिणाम (और कुछ लिंक) कैसे बना सकता हूं?
+0

साथ परीक्षण किया गया यह केवल एक आंशिक जवाब है, लेकिन शीर्ष, पादुका, एनएवी, एक तरफ, लेख और खंड की तरह एचटीएमएल 5 तत्वों का उपयोग कर अपने कारण में मदद मिलेगी। इसके अलावा, उचित div तत्वों पर एरिया लैंडमार्क भूमिकाओं (भूमिका = "खोज", भूमिका = "नेविगेशन", भूमिका = "मुख्य", आदि) का उपयोग करना सुनिश्चित करें। – cfnerd

+0

क्या मैं पूछ सकता हूं कि आप इन चीजों को करने का प्रयास क्यों कर रहे हैं? – unobf

+0

@unobf क्योंकि मैं खोज फिल्टर के एक बड़ी सूची है और उपयोगकर्ताओं को पहले – bmalets

उत्तर

3

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

आप एचटीएमएल 5 का उपयोग कर सकते हैं, तो क्रमशः अपने हैडर, फिल्टर और साइड नेविगेशन और खोज परिणामों के लिए <header>, <aside> या <nav> और फिर <main> तत्वों का उपयोग करें।

यदि आप HTML5 का उपयोग नहीं कर सकते हैं, तो इन क्षेत्रों के रैपिंग तत्वों में भूमिका = "बैनर", भूमिका = "पूरक", भूमिका = "नेविगेशन" और भूमिका = "मुख्य" जोड़ें।

एक सबसे अच्छा अभ्यास तुम भी दस्तावेज़ में संरचना शीर्षक (स्क्रीन रीडर्स इन भी द्वारा नेविगेट कर सकते हैं) जोड़ना चाहिए और एक को छोड़ लिंक (देखे, कुंजीपटल-केवल उन के लिए)

0

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

<a href="#main" class="skip-navigation">Skip Navigation</a> 

... 

<h1 id="main">Search Results</h1> 

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

.skip-navigation { 
    position: absolute; 
    left: -5000px; 
    top: 0; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
} 
+0

धन्यवाद @Brad, लेकिन क्या बारे में 'div' टैग स्थापित किया गया है ? यदि 'स्किप-नेविगेशन' कक्षा हो तो इसे लिंक के रूप में छोड़ा जाएगा? – bmalets

+2

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

+0

@bmalets यहां 'स्किप-नेविगेशन' कक्षा केवल स्टाइल के लिए है। आपको इसका इस्तेमाल करने की आवश्यकता नहीं है। यहां पूरी कार्रवाई यह है कि आपके पास ऑन-पेज संदर्भ का लिंक है। – Brad

0

समस्या के रूप में "aria-live" प्रॉपर्टी

साथ तय हुई थी

स्क्रीन रीडर प्रत्येक सामग्री में परिवर्तन के बाद "एरिया-लाइव" टैग पढ़ता है। इसलिए, यदि उपयोगकर्ता खोज फ़ॉर्म में टेक्स्ट बदलता है - स्क्रीन रीडर AJAX- लोड किए गए खोज परिणामों के साथ "एरिया-लाइव" टैग की सामग्री पढ़ेगा।

ChromeVox

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