2012-10-24 11 views
5

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

यह करना आसान लगता है, पृष्ठ के शीर्ष में एक एंकर पर एक लिंक फेंक दें और लोग नेविगेशन या अन्य बड़े पैमाने पर महत्वहीन सामग्री को छोड़ने के लिए इसे 'क्लिक' कर सकते हैं।

समस्या यह है कि, जब आप अपने कीबोर्ड का उपयोग करके एंकर लिंक पर क्लिक करते हैं और फिर 'टैब' कुंजी फिर से दबाते हैं, तो आप 'सामग्री पर जाएं' लिंक के बाद सीधे तत्व पर ले जाते हैं और अगले नहीं मुख्य सामग्री क्षेत्र में तत्व। हां, आपके द्वारा लिंक किए गए एंकर को फोकस नहीं मिला है।

ऐसा लगता है कि यह एक आम समस्या है, क्योंकि मुझे अभी तक 'सामग्री पर छोड़ने' लिंक वाली साइट नहीं मिल रही है, जिस पर यह सही तरीके से काम कर रहा है। यहां तक ​​कि Vision Australia साइट पर भी समस्या है।

मैं उम्मीद कर रहा था कि किसी को इस काम को करने के लिए तकनीक/हैक/लाइब्रेरी के बारे में पता था।

EDIT: मैं पुष्टि कर सकता हूं कि यह समस्या क्रोम और सफारी में है, लेकिन मेरे मैक पर फ़ायरफ़ॉक्स नहीं है।

+2

यह वह जगह है वास्तव में एक क्रोम/वेबकिट मुद्दा; यह वास्तव में विंडोज़ पर आईई और फ़ायरफ़ॉक्स में ठीक काम करता है; तो मुद्दा वास्तव में एक ब्राउज़र बग के आसपास काम करने के लिए कैसे है, एचटीएमएल स्वयं वास्तव में प्रति spec ठीक है। – BrendanMcK

उत्तर

6

अधिकतर ब्राउज़र समान पृष्ठ लिंक के लक्ष्य पर दृश्यमान रूप से नीचे स्क्रॉल करते हैं, लेकिन वास्तव में उस लिंक पर कीबोर्ड फ़ोकस नहीं करते हैं। आप लक्षित करने के लिए ध्यान केंद्रित करने देने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं (या JQuery नीचे दिए गए उदाहरण के रूप में):

$("a[href^='#']").not("a[href]='#'").click(function() { 
    $("#"+$(this).attr("href").slice(1)+"").focus(); 
}); 

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

+1

जबकि आईई और फ़ायरफ़ॉक्स लक्ष्य तत्व पर ध्यान केंद्रित नहीं करते हैं (सादा ए के बिना किसी href के पहले स्थान पर ध्यान केंद्रित नहीं किया जाता है), वे सही ढंग से व्यवहार करते हैं * अगली * टैब कुंजी * प्रेस * लक्ष्य के बाद फोकस को अगले टैबबबल आइटम पर ले जाएं। आईई के प्रारंभिक संस्करणों के बाद से यह लंबे समय से व्यवहार है। क्रोम/वेबकिट उल्लेखनीय है कि यह केवल स्क्रॉल करता है, और मूल लिंक से टैबबिंग जारी रहता है, लक्ष्य स्थिति नहीं। – BrendanMcK

+0

ग्रेट पोस्ट, टेरिल। मुझे एक नामांकित एंकर की बजाय आईडी से जोड़ने की अवधारणा पसंद है। ब्राउज़र की कमियों के बावजूद, यदि मुख्य स्क्रीन पाठक इसे सही तरीके से प्राप्त कर रहे हैं तो मुझे लगता है कि यह बेहतर बनाता है (लेकिन अभी भी सही नहीं है।) – Christian

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