العرض: لا شيء مقابل الرؤية: مخفي مقابل المسافة البادئة للنص: 9999 كيف يتصرف قارئ الشاشة مع كل واحد؟
-
20-09-2019 - |
سؤال
ما الفرق بين هذه الثلاثة بالنسبة لمستخدمي قارئ الشاشة؟
المحلول
يشير إلى: http://css-discuss.incutio.com/?page=ScreenreaderVisibility
عرض لا شيء: لن يرى ولا يسمع.*
الرؤية:مختفي: لن يرى ولا يسمع.*
المسافة البادئة النص:9999: لن يتم رؤيته ولكن سيتم سماعه.
- معظم قارئ الشاشة لن "يتكلم" عرض لا شيء و الرؤية:مختفي ، ولكن هناك عدد قليل من برامج قراءة الشاشة مثل pwWebSpeak وHtReader الذي سيقرأ هذه أيضًا.
نصائح أخرى
هناك تفسير جيد حول هذا في قائمة. 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
هناك ملخص جيد جدًا لكيفية تفسير قراء الشاشة من هذه الخصائص في Webaim.
شيء صغير، visibility: hidden
و display:none
سوف يخفي النص من قراء الشاشة تمامًا كما يفعل من الآخرين. جميع الطرق الأخرى ستكون "مرئية" لقارئ الشاشة.
هناك العديد من التقنيات لإخفاء المحتوى بصريًا ولكنه متاحًا لقراء الشاشة.
تعمل تقنية 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;
}
الإجابة الكاملة موجودة هنا للتأكد من عدم وجود مربعات إدخال 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"/>