الفرق بين المراجعتين ل"Bootstrap/screenreaders"
اذهب إلى التنقل
اذهب إلى البحث
(إنشاء الصفحة) |
|||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:قارئات الشاشة Screenreaders في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:قارئات الشاشة Screenreaders في إطار العمل Bootstrap}}</noinclude> | ||
+ | استخدم أدوات قارئات الشاشة التي يقدّمها إطار العمل Bootstrap لإخفاء العناصر على جميع الأجهزة ما عدا قارئات الشاشة. | ||
+ | |||
+ | يُستخدَم الصنف <code>.sr-only</code> لإخفاء عنصُر على جميع الأجهزة '''ما عدا قارئات الشاشة'''. استخدم الصنف <code>.sr-only-focusable</code> إلى جانب الصنف <code>.sr-only</code> لإظهار العنصُر مرةً أخرى عند تلقّيه المؤشّر (مثلًا بالنسبة للزوّار الذين يستخدمون لوحة المفاتيح فقط). توجد الصنفان بصيغة مخاليط.<syntaxhighlight lang="html"> | ||
+ | <a class="sr-only sr-only-focusable" href="#content">الانتقال إلى المحتوى الرئيسيّ</a> | ||
+ | </syntaxhighlight><syntaxhighlight lang="sass"> | ||
+ | // استخدام المخلوط | ||
+ | .skip-navigation { | ||
+ | @include sr-only; | ||
+ | @include sr-only-focusable; | ||
+ | } | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | == مصادر == | ||
+ | * [https://getbootstrap.com/docs/4.0/utilities/screenreaders/ صفحة Screenreaders في توثيق Bootstrap]. | ||
+ | [[تصنيف:Bootstrap]] | ||
+ | [[تصنيف:Bootstrap utilities]] |
مراجعة 13:04، 14 أبريل 2018
استخدم أدوات قارئات الشاشة التي يقدّمها إطار العمل Bootstrap لإخفاء العناصر على جميع الأجهزة ما عدا قارئات الشاشة.
يُستخدَم الصنف .sr-only
لإخفاء عنصُر على جميع الأجهزة ما عدا قارئات الشاشة. استخدم الصنف .sr-only-focusable
إلى جانب الصنف .sr-only
لإظهار العنصُر مرةً أخرى عند تلقّيه المؤشّر (مثلًا بالنسبة للزوّار الذين يستخدمون لوحة المفاتيح فقط). توجد الصنفان بصيغة مخاليط.
<a class="sr-only sr-only-focusable" href="#content">الانتقال إلى المحتوى الرئيسيّ</a>
// استخدام المخلوط
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}