الفرق بين المراجعتين ل"Bootstrap/screenreaders"
اذهب إلى التنقل
اذهب إلى البحث
| سطر 2: | سطر 2: | ||
استخدم أدوات قارئات الشاشة التي يقدّمها إطار العمل Bootstrap لإخفاء العناصر على جميع الأجهزة ما عدا قارئات الشاشة. | استخدم أدوات قارئات الشاشة التي يقدّمها إطار العمل Bootstrap لإخفاء العناصر على جميع الأجهزة ما عدا قارئات الشاشة. | ||
| − | يُستخدَم الصنف <code>.sr-only</code> لإخفاء عنصُر على جميع الأجهزة '''ما عدا قارئات الشاشة'''. استخدم الصنف <code>.sr-only-focusable</code> إلى جانب الصنف <code>.sr-only</code> لإظهار العنصُر مرةً أخرى عند تلقّيه المؤشّر (مثلًا بالنسبة للزوّار الذين يستخدمون لوحة المفاتيح فقط). | + | يُستخدَم الصنف <code>.sr-only</code> لإخفاء عنصُر على جميع الأجهزة '''ما عدا قارئات الشاشة'''. استخدم الصنف <code>.sr-only-focusable</code> إلى جانب الصنف <code>.sr-only</code> لإظهار العنصُر مرةً أخرى عند تلقّيه المؤشّر (مثلًا بالنسبة للزوّار الذين يستخدمون لوحة المفاتيح فقط). يتوافر الصنفان بصيغة [[Sass/mixins|المخاليط في Sass]] أيضًا.<syntaxhighlight lang="html"> |
<a class="sr-only sr-only-focusable" href="#content">الانتقال إلى المحتوى الرئيسيّ</a> | <a class="sr-only sr-only-focusable" href="#content">الانتقال إلى المحتوى الرئيسيّ</a> | ||
</syntaxhighlight><syntaxhighlight lang="sass"> | </syntaxhighlight><syntaxhighlight lang="sass"> | ||
مراجعة 02:37، 15 أبريل 2018
استخدم أدوات قارئات الشاشة التي يقدّمها إطار العمل Bootstrap لإخفاء العناصر على جميع الأجهزة ما عدا قارئات الشاشة.
يُستخدَم الصنف .sr-only لإخفاء عنصُر على جميع الأجهزة ما عدا قارئات الشاشة. استخدم الصنف .sr-only-focusable إلى جانب الصنف .sr-only لإظهار العنصُر مرةً أخرى عند تلقّيه المؤشّر (مثلًا بالنسبة للزوّار الذين يستخدمون لوحة المفاتيح فقط). يتوافر الصنفان بصيغة المخاليط في Sass أيضًا.
<a class="sr-only sr-only-focusable" href="#content">الانتقال إلى المحتوى الرئيسيّ</a>
// استخدام المخلوط
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}