الفرق بين المراجعتين لصفحة: «Bootstrap/accessibility»

مراجعة 03:28، 15 مارس 2018

نظرة مُختصرة على ميزات Bootstrap ومواطن قصوره في إنشاء محتوى سهل الوصول Accessibility.

يوفّر Bootstrap إطار عمل سهل الاستخدام بتنسيقات جاهزة للاستخدام وأدوات تخطيط وعناصر تفاعليّة ممّا يسمح للمطوّر بإنشاء مواقع ويب وتطبيقات جذّابة بصريًّا، غنيّة وظيفيًّا وسهلة الوصول.

نظرة عامّة على سهولة الوصول في Bootstrap ومكامن القصور فيه

تعتمد سهولة الوصول عمومًا في أي مشروع مبنيّ بإطار العمل Bootstrap على نحو واسع على شيفرات HTML وتنسيقات CSS الإضافيّة والسكربتات المستخدَمة. بافتراض أن هذه العناصر نُفّذت على نحو صحيح فإنه بالإمكان استخدام Bootstrap لإنشاء مواقع ويب وتطبيقات تتوافق مع الإصدر الثاني من معيار الخطوط العامّة لإنشاء محتوى ويب سهل الوصول WCAG 2.0 ومعايير ومتطلّبات سهولة الوصول المشابهة.

البنية التنظيمية

يمكن تطبيق تنسيقات Bootstrap وتخطيطاته على عدد كبير من البنى التنظيمية في HTML. يهدف هذا التوثيق إلى تقديم أمثلة من الممارسات الأفضل إلى المطوّرين لتوضيح استخدام Bootstrap وشرح الترميزات الدلالية (semantic) المناسبة، بما في ذلك كيفية التغلّب على العراقيل المحتملة في سهولة الوصول.

العناصر التفاعلية

صُمِّمت العناصر التفاعليّة في Bootstrap - مثل مربعات الحوار (modals) والقوائم المنسدلة (dropdown menus) والتلميحات المُخصَّصة - للعمل عند اللمس، النقر ولدى مستخدمي لوحات المفاتيح. يُفتَرَض أن يؤدّي استخدام الأدوار والخاصيّات المناسبة ضمن معيار WAI-ARIA إلى جعل هذه العناصر مفهومةً ويمكن تشغيلها بتقنيّات مساعدة (مثل قارئات الشاشة).

نظرًا لأن عناصر Bootstrap مكتوبةٌ لتوائم أغراضًا عامّة فإن مبرمجي الصفحات قد يحتاجون لتضمين أدوار وخاصيّات إضافية من معيار ARIA وسلوك JavaScript لعكس طبيعة ووظيفة العنصُر على نحو أدق. يشير التوثيق عادة إلى هذه المسألة.

التباين اللوني

ينتُج عن غالبيّة الألوان المبدئيّة في إطار العمل Bootstrap - المستخدمة في إطار العمل لأمور من قبيل تنويعات الأزرار، وتنويعات التنبيهات، ومؤشّرات التصديق (validation) في الاستمارات (forms) - ينتُج عنها تباين لوني غير كاف (أقلّ من نسبة التباين اللوني 4.5:1 المنصوح بها في WCAG 2.0 عند الاستخدام في خلفيّة مضيئة. لذا سيتطلّب الأمر تعديل الألوان المبدئيّة أو تمديدها للتأكّد من الحصول على نسبة تباين لوني مناسبة.

المحتوى المخفي بصريًا

يمكن استخدام الصنف ‎.sr-only لتنسيق المحتوى المخفي بصريّا والمطلوب إبقاؤه متوافرًا للتقنيات المُساعدة مثل قارئات الشاشة. يفيد هذا الأمر كثيرًا في الحالات التي يُحتاج فيها لنقل معلومات بصريّة إضافية أو إشارات (مثل إيصال معان باستخدام ألوان) إلى ذوي القدرات البصرية المحدودة.

<p class="text-danger">
  <span class="sr-only">خطر: </span>
  لا يمكن إلغاء مفعول هذا الإجراء بعد تنفيذه
</p>

يمكن الجمع بين الصنفين ‎.sr-only و‎.sr-only-focusable لأزرار التحكّم المخفيّة بصريًا مثل روابط التخطّي (skip links) التقليدية. تتأكد هذه الطريقة من جعل هذه الأزرار مرئية عند ما يُركَّز عليها (بالنسبة لمستخدمي لوحات المفاتيح البصرية).

<a class="sr-only sr-only-focusable" href="#content">تجاوز إلى المحتوى الرئيس </a>

موارد إضافية

مصادر

صفحة Accessibility ضمن توثيق Bootstrap.

@@ سطر 2: / سطر 2: @@
 نظرة مُختصرة على ميزات Bootstrap ومواطن قصوره في إنشاء محتوى سهل الوصول Accessibility.
-يوفّر Bootstrap إطار عمل سهل الاستخدام بتنسيقات جاهزة للاستخدام، أدوات تخطيط وعناصر تفاعليّة ممّا يسمح للمطوّر بإنشاء مواقع ويب وتطبيقات جذّابة بصريًّا، غنيّة وظيفيًّا وسهلة الوصول.
+يوفّر Bootstrap إطار عمل سهل الاستخدام بتنسيقات جاهزة للاستخدام وأدوات تخطيط وعناصر تفاعليّة ممّا يسمح للمطوّر بإنشاء مواقع ويب وتطبيقات جذّابة بصريًّا، غنيّة وظيفيًّا وسهلة الوصول.
 == نظرة عامّة على سهولة الوصول في Bootstrap ومكامن القصور فيه ==
-تعتمد سهولة الوصول عموما في أي مشروع مبنيّ بإطار العمل Bootstrap على نحو واسع على ترميزات المؤلّفين Author’s markup، التنسيقات الإضافيّة والسكربتات المستخدَمة. بافتراض أن هذه العناصر نُفّذت على نحو صحيح فإنه بالإمكان استخدام Bootstrap لإنشاء مواقع ويب وتطبيقات تتوافق مع الإصدر الثاني من معيار [https://www.w3.org/TR/WCAG20/ الخطوط العامّة لإنشاء محتوى ويب سهل الوصول WCAG 2.0] ومعايير ومتطلّبات سهولة الوصول المشابهة.
+تعتمد سهولة الوصول عمومًا في أي مشروع مبنيّ بإطار العمل Bootstrap على نحو واسع على شيفرات HTML وتنسيقات CSS الإضافيّة والسكربتات المستخدَمة. بافتراض أن هذه العناصر نُفّذت على نحو صحيح فإنه بالإمكان استخدام Bootstrap لإنشاء مواقع ويب وتطبيقات تتوافق مع الإصدر الثاني من معيار [https://www.w3.org/TR/WCAG20/ الخطوط العامّة لإنشاء محتوى ويب سهل الوصول WCAG 2.0] ومعايير ومتطلّبات سهولة الوصول المشابهة.
-=== الترميزات البنيوية ===
+=== البنية التنظيمية ===
-يمكن تطبيق تنسيقات Bootstrap وتخطيطاته على عدد كبير من بنيات الترميز Markup structures. يهدف هذا التوثيق إلى تقديم أمثلة من الممارسات الأفضل إلى المطوّرين لتوضيح استخدام Bootstrap وشرح الترميزات الدلالية Semantic المناسبة، بما في ذلك كيفية التغلّب على عراقيل محتملة في سهولة الوصول.
+يمكن تطبيق تنسيقات Bootstrap وتخطيطاته على عدد كبير من البنى التنظيمية في HTML. يهدف هذا التوثيق إلى تقديم أمثلة من الممارسات الأفضل إلى المطوّرين لتوضيح استخدام Bootstrap وشرح الترميزات الدلالية (semantic) المناسبة، بما في ذلك كيفية التغلّب على العراقيل المحتملة في سهولة الوصول.
-=== العناصر التفاعليّة ===
+=== العناصر التفاعلية ===
-صُمِّمت العناصر التفاعليّة في Bootstrap - مثل النوافذ الشرطية Modals، القوائم المنسدلة Dropdown menus والتلميحات المُخصَّصة - للعمل عند اللمس، النقر ولدى مستخدمي لوحات المفاتيح. يُفتَرَض أن يؤدّي استخدام الأدوار والخاصيّات المناسبة ضمن معيار WAI-ARIA إلى جعل هذه العناصر مفهومة ويمكن تشغيلها بتقنيّات مساعدة (مثل قارئات الشاشة).
+صُمِّمت العناصر التفاعليّة في Bootstrap - مثل مربعات الحوار (modals) والقوائم المنسدلة (dropdown menus) والتلميحات المُخصَّصة - للعمل عند اللمس، النقر ولدى مستخدمي لوحات المفاتيح. يُفتَرَض أن يؤدّي استخدام الأدوار والخاصيّات المناسبة ضمن معيار WAI-ARIA إلى جعل هذه العناصر مفهومةً ويمكن تشغيلها بتقنيّات مساعدة (مثل قارئات الشاشة).
-نظرا لأن عناصر Bootstrap لتوائم أغراضا عامّة فإن المؤلفين قد يحتاجون لتضمين أدوار وخاصيّات إضافية من معيار ARIA وسلوك [[JavaScript]] لعكس طبيعة ووظيفة العنصُر على نحو أدق. يشير التوثيق عادة إلى هذه المسألة.
+نظرًا لأن عناصر Bootstrap مكتوبةٌ لتوائم أغراضًا عامّة فإن مبرمجي الصفحات قد يحتاجون لتضمين أدوار وخاصيّات إضافية من معيار ARIA وسلوك [[JavaScript]] لعكس طبيعة ووظيفة العنصُر على نحو أدق. يشير التوثيق عادة إلى هذه المسألة.
 === التباين اللوني ===
-ينتُج عن غالبيّة الألوان المبدئيّة في إطار العمل Bootstrap - المستخدمة في إطار العمل لأمور من قبيل تنويعات الأزرار، تنويعات التنبيهات، مؤشّرات التصديق Validation في الاستمارات - ينتُج عنها تباين لوني ''غير كاف'' (أقلّ من [https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html نسبة التباين اللوني 4.5:1 المنصوح بها في WCAG 2.0] عند الاستخدام في خلفيّة مضيئة. سيتطلّب الأمر تعديل الألوان المبدئيّة أو تمديدها للتأكّد من الحصول على نسبة تباين لوني مناسبة.
+ينتُج عن غالبيّة الألوان المبدئيّة في إطار العمل Bootstrap - المستخدمة في إطار العمل لأمور من قبيل تنويعات الأزرار، وتنويعات التنبيهات، ومؤشّرات التصديق (validation) في الاستمارات (forms) - ينتُج عنها تباين لوني ''غير كاف'' (أقلّ من [https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html نسبة التباين اللوني 4.5:1 المنصوح بها في WCAG 2.0] عند الاستخدام في خلفيّة مضيئة. لذا سيتطلّب الأمر تعديل الألوان المبدئيّة أو تمديدها للتأكّد من الحصول على نسبة تباين لوني مناسبة.
-=== المحتوى المخفي بصريا ===
+=== المحتوى المخفي بصريًا ===
-يمكن استخدام الصنف ‎<code>.sr-only</code> لتنسيق المحتوى المخفي بصريّا والمطلوب إبقاؤه متوفرا للتقنيات المُساعدة مثل قارئات الشاشة. يفيد هذا الأمر كثيرا في الحالات التي يُحتاج فيها لنقل معلومات بصريّة إضافية أو إشارات (مثل إيصال معان باستخدام ألوان) إلى ذوي القدرات البصرية المحدودة.<syntaxhighlight lang="html">
+يمكن استخدام الصنف ‎<code>.sr-only</code> لتنسيق المحتوى المخفي بصريّا والمطلوب إبقاؤه متوافرًا للتقنيات المُساعدة مثل قارئات الشاشة. يفيد هذا الأمر كثيرًا في الحالات التي يُحتاج فيها لنقل معلومات بصريّة إضافية أو إشارات (مثل إيصال معان باستخدام ألوان) إلى ذوي القدرات البصرية المحدودة.<syntaxhighlight lang="html">
 <p class="text-danger">
    <span class="sr-only">خطر: </span>
    لا يمكن إلغاء مفعول هذا الإجراء بعد تنفيذه
 </p>
-</syntaxhighlight>يمكن الجمع بين الصنفين ‎<code>.sr-only</code> و‎<code>.sr-only-focusable</code> لأزرار التحكّم المخفيّة بصريا مثل روابط التخطّي Skip التقليدية. تتأكد هذه الطريقة من جعل هذه الأزرار مرئية عند ما يُركَّز عليها (بالنسبة لمستخدمي لوحات المفاتيح البصرية).<syntaxhighlight lang="html">
+</syntaxhighlight>يمكن الجمع بين الصنفين ‎<code>.sr-only</code> و‎<code>.sr-only-focusable</code> لأزرار التحكّم المخفيّة بصريًا مثل روابط التخطّي (skip links) التقليدية. تتأكد هذه الطريقة من جعل هذه الأزرار مرئية عند ما يُركَّز عليها (بالنسبة لمستخدمي لوحات المفاتيح البصرية).<syntaxhighlight lang="html">
 <a class="sr-only sr-only-focusable" href="#content">تجاوز إلى المحتوى الرئيس </a>
 </syntaxhighlight>