العرض: لا شيء مقابل الرؤية: مخفي مقابل المسافة البادئة للنص: 9999 كيف يتصرف قارئ الشاشة مع كل واحد؟

Question

ما الفرق بين هذه الثلاثة بالنسبة لمستخدمي قارئ الشاشة؟

Answer 1

يشير إلى: http://css-discuss.incutio.com/?page=ScreenreaderVisibility

عرض لا شيء: لن يرى ولا يسمع.*
الرؤية:مختفي: لن يرى ولا يسمع.*
المسافة البادئة النص:9999: لن يتم رؤيته ولكن سيتم سماعه.

• معظم قارئ الشاشة لن ​​"يتكلم" عرض لا شيء و الرؤية:مختفي ، ولكن هناك عدد قليل من برامج قراءة الشاشة مثل pwWebSpeak وHtReader الذي سيقرأ هذه أيضًا.

Answer 2

هناك تفسير جيد حول هذا في قائمة. 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 3

هناك ملخص جيد جدًا لكيفية تفسير قراء الشاشة من هذه الخصائص في Webaim.

شيء صغير، visibility: hidden و display:none سوف يخفي النص من قراء الشاشة تمامًا كما يفعل من الآخرين. جميع الطرق الأخرى ستكون "مرئية" لقارئ الشاشة.

Answer 4

هناك العديد من التقنيات لإخفاء المحتوى بصريًا ولكنه متاحًا لقراء الشاشة.

تعمل تقنية H5BP في FF و WebKit و Opera و IE6+

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

Answer 5

الإجابة الكاملة موجودة هنا للتأكد من عدم وجود مربعات إدخال Autoshow/Autofill. على صفحة الويب الخاصة بي (مستخدم جديد) ، تم توجيه تلقائي تلقائيًا مع حقل الهاتف وكلمة المرور من البيانات. للتخلص من هذا ، قمت بإنشاء حقلين وهميين ومنحتهما فصلًا مما يجعلها غير مرئية للمستخدم. وظيفة jQuery لإظهار ثم إخفاء هذه بعد الكسر.

وظيفة 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; 
}

حقول الإدخال:

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