उपयोग: कीबोर्ड के नेविगेशन के लिए होवर प्रतिस्थापन

Question

WCAG 2.0:focus का उपयोग करने की अनुशंसा करता है जब :hover कुंजीपटल नेविगेशन का समर्थन करने के लिए लिंक तत्वों पर उपयोग किया जाता है। यह लिंक तत्वों के लिए अच्छी तरह से काम करता है, लेकिन दोनों के बीच कुछ अंतर हैं।

• किसी भी तत्व :hover राज्य हो सकता है, जबकि केवल बहुत कम ध्यान केंद्रित किया जा सकता है
• जब एक तत्व पर मँडरा, आप भी अपनी मूल तत्वों के सभी पर होवर करें। फोकस

यह प्रश्न सख्ती से सीएसएस के बारे में नहीं है। कुंजीपटल नेविगेशन के लिए :hover (ऊपर वर्णित अनुसार) के व्यवहार को अनुकरण करने का कोई तरीका है? या क्या कोई मजबूत कारण हैं कि कोई ऐसा क्यों नहीं चाहेगा?

इसे और अधिक यहाँ स्पष्ट करने के लिए एक उदाहरण है:

एचटीएमएल:

<div id="box"> 
    foo bar 
    <a href="#">click me</a> 
</div> 

सीएसएस:

#box { 
    opacity: 0.3; 
} 
#box:hover { 
    opacity: 1; 
} 
#box a:focus { 
    opacity: 1; 
} 

एक माउस मैं इसे उपयोग करने से पहले लिंक तत्व पर होवर जाएगा का उपयोग करते समय । चूंकि :hover राज्य प्रचारित करता है #box पूरी तरह से अपारदर्शी होगा।

कीबोर्ड का उपयोग करते समय मैं इसका उपयोग करने से पहले लिंक तत्व पर ध्यान केंद्रित करूंगा। चूंकि :focus राज्य ऊपर 0,प्रसारित करेगा पूरी तरह से अपारदर्शी नहीं होगा।

Answer 1

यह focusin/focusout घटनाओं के साथ जावास्क्रिप्ट में किया जा सकता का उपयोग करने के (वे focus और blur वे बुलबुला को छोड़कर जैसे हैं)। Here एक पहेली है।

यह यह फ़ंक्शन करने पर निर्भर करता:

var deepFocus = function(element, cls) { 
    cls = cls || 'deep-focus'; 

    element 
     .on('focusin', function() { 
      element.addClass(cls); 
     }) 
     .on('focusout', function() { 
      var value = !!element.find(':focus').length; 
      element.toggleClass(cls, value); 
     }); 
}; 

अद्यतन: यहां एक मसौदा कल्पना कि :focus-within चयनकर्ता जो वास्तव में यहाँ क्या आवश्यक है क्या करना होगा होता है।

Answer 2

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

आपके उदाहरण में आपको यह समझने की आवश्यकता है कि अगर लिंक अस्पष्टता बदलती है तो अस्पष्टता भी पैर div पर रहती है।

आप काम कर रहे नमूना here देख सकते हैं। या नमूना tabindex

<div tabindex="1">Touch the Div</div>