डिस्प्ले: कोई भी बनाम दृश्यता: छुपा बनाम टेक्स्ट-इंडेंट: 99 99 स्क्रीन रीडर प्रत्येक के साथ कैसे व्यवहार करता है?

Question

स्क्रीन रीडर उपयोगकर्ताओं के लिए इन तीनों के बीच क्या अंतर है?

Answer 1

देखें: http://css-discuss.incutio.com/?page=ScreenreaderVisibility

प्रदर्शन: कोई नहीं: है और न ही नहीं देखा जाएगा सुना। *
दृश्यता: छुपा: नहीं देखा जाएगा और न ही सुना जाएगा। *
टेक्स्ट इंडेंट: 99 99: नहीं देखा जाएगा लेकिन यह सुना जाएगा।

• स्क्रीन रीडर 'बात' नहीं होगा प्रदर्शन के अधिकांश: कोई नहीं और visibility: hidden, लेकिन वहाँ जो भी इन भी पढ़ा जाएगा pwWebSpeak और HtReader की तरह कुछ स्क्रीन रीडर हैं।

Answer 2

स्क्रीन पाठकों को WebAIM पर इन गुणों की व्याख्या करने का एक बहुत अच्छा सारांश है।

संक्षेप में,और display:none स्क्रीन पाठकों से टेक्स्ट छिपाएगा जैसे कि यह दूसरों से करता है। अन्य सभी विधियां स्क्रीन रीडर को 'दृश्यमान' होंगी।

Answer 3

ए सूची के अलावा इसमें अच्छी व्याख्या है। http://www.alistapart.com/articles/fir/ यह उत्पाद पर निर्भर करता है।

 
PRODUCT       DISPLAY: NONE  VISIBILITY: HIDDEN 
Hal version 5.20    Does not read  Reads 
IBM Home Page Reader 3.02  Does not read  Does not read 
Jaws (4.02, 4.50, 5.0 beta)  Reads    Reads 
OutSpoken 9      Does not read  Does not read 
Window-Eyes 4.2     Does not read  Does not read 

Answer 4

नेत्रहीन सामग्री छिपा लेकिन यह स्क्रीन पाठकों के लिए उपलब्ध है many techniques रहे हैं।

H5BP तकनीक एफएफ, वेबकिट, ओपेरा और IE6 +

में काम करता है

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

Answer 5

पूरा answere यहाँ है यकीन है कि क्रोम does not को autoshow/स्वत: भरण इनपुट बॉक्स बनाने के लिए। मेरे वेब पेज (नया उपयोगकर्ता) पर, टेलीफोन फ़ील्ड और पासवर्ड फियोल्ड को कैश किए गए डेटा के साथ स्वत: भर दिया जा रहा था। इससे छुटकारा पाने के लिए, मैंने दो डमी फ़ील्ड बनाए और उन्हें एक कक्षा दी जो उन्हें उपयोगकर्ता के लिए अदृश्य बनाता है। एक jquery समारोह दिखाने के लिए और फिर एक अंश के बाद इन्हें छुपाएं।

$().ready(function() { 
    $(".fake-autofill-fields").show(); 
    // some DOM manipulation/ajax here 
    window.setTimeout(function() { 
     $(".fake-autofill-fields").hide(); 
    }, 1000); 
}); 

कक्षा::

.fake-autofill-fields 
{ 

    border: none; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

इनपुट फ़ील्ड:

jQuery समारोह & छिपाने को दिखाने के लिए

<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/> 
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>