التعرّف على ميزات تسهيل الاستخدام

ما هي الأدوات الشائعة الاستخدام لمساعدة الأشخاص ذوي الاحتياجات الخاصة على استخدام الويب؟

يُرجى اختيار كل ما ينطبق.

أجهزة الإخراج بلغة برايل

أجهزة قارئ الشاشة

محطات الإرساء

إعدادات نظام التشغيل

ما هي الطريقة الفعّالة لإحداث تغيير على الويب؟

يُرجى اختيار كل ما ينطبق.

تقديم شكوى على وسائل التواصل الاجتماعي

تقديم دعوى قضائية

التواصل مع مطوّري إحدى الشركات مباشرةً

ما هو أعلى مستوى من معايير إرشادات إتاحة محتوى الويب؟

المستوى AAA

المستوى A

صب

ما هي أمثلة على المحتوى القابل للتشغيل؟

يُرجى اختيار كل ما ينطبق.

تتضمّن جميع الفيديوهات عناصر تحكّم.

يجب أن يتوفّر للمستخدمين وقت كافٍ لإكمال النموذج.

تتوافق جميع العناصر النشطة مع لوحة المفاتيح والشاشة التي تعمل باللمس.

استخدام لغة بسيطة

أيّ مما يلي يمثّل أفضل ممارسة لإنشاء زر يسهل الوصول إليه؟

<div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div>

<a id="saveChanges" aria-label="Some awesome article title">Go to shop</a>

<button id="saveChanges" type="button">Go to shop</button>

موقعك الإلكتروني هو كتاب مدرسي على الإنترنت بلغات متعددة، حيث يتم عرض لغات متعددة على صفحة واحدة. ما هي أفضل طريقة لإخبار التكنولوجيات المساعدة بلغة النص؟

اضبط لغة أساسية lang <html>، ولغات إضافية على العناصر التي تتضمّن محتوًى بلغة مختلفة.

لا داعي للقلق، يمكن للتكنولوجيا المساعدة قراءة كل لغة تلقائيًا.

أدرِج جميع اللغات في العنصر <html>. على سبيل المثال <html lang="en,lt,pl,pt">

أيّ مثال على نمط CSS `:focus` هو الأنسب للاستخدام على خلفية بيضاء؟

outline: 0.5rem solid yellow;

background-color:black;

outline: none; text-decoration:none; background:none;

text-decoration: dotted underline 2px blue;

ما هو الغرض من رابط التخطّي؟

مساعدة مستخدمي لوحة المفاتيح في تخطّي مجموعات الروابط المكرّرة أو غير المفيدة

تساعد هذه السمة مستخدمي لوحة المفاتيح في تخطّي المحتوى غير المهم.

ما هي أفضل طريقة لتغيير نمط عنصر باستخدام JavaScript؟

استخدِم JavaScript لتبديل فئة عنصر، وأضِف النمط إلى ورقة أنماط CSS.

استخدِم JavaScript لتطبيق نمط ديناميكي مباشرةً داخل عنصر HTML.

هل يمكن أن تتوافق جميع إجراءات JavaScript مع مستخدمي لوحة المفاتيح؟

نعم، تتوافق جميع الإجراءات تلقائيًا مع مستخدمي لوحة المفاتيح.

نعم، ولكن قد تحتاج إلى بذل بعض الجهد الإضافي.

لا، يمكنك توفير إمكانية الوصول إلى لوحة المفاتيح باستخدام HTML الدلالي فقط.

كيف يمكن جعل الصور المعقّدة سهلة الوصول؟

يُرجى اختيار كل ما ينطبق.

ضمِّن شرحًا لاحقًا في المقالة.

أضِف نصًا بديلاً طويلاً يتضمّن وصفًا كاملاً.

أضِف السمة aria-describedby إلى الصورة.

استخدِم رابطًا لتقديم توضيحات أطول.

لا يكفي اللون وحده كمعرّف للمستندات. ما هي العناصر الأخرى التي ستساعد القراء في التعرّف على عناصر واجهة المستخدم؟

النقش

نص

رمز

جميع الإجابات صحيحة

ما الذي يمكننا إنشاؤه ليعكس إعدادات نظام التشغيل المتعلقة بالحركة؟

@prefers-reduced-motion

أزرار التبديل في JavaScript

للحصول على نسخة قابلة للقراءة، يجب دائمًا استخدام تباين عالٍ بين النسخة والخلفية.

خطأ

صحيح

ما هي الخطوط الأفضل من حيث سهولة الاستخدام؟

الخطوط التي تسهّل القراءة

خطوط النظام، مثل Arial وVerdana

هذا لا يهم.

أيّ مما يلي هو نموذج الإدخال الأكثر سهولة في الاستخدام؟

<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>

Email address: <input type="email" required>

<label>Email address: <input type="email" required></label>

<label>Email address: <input type="email" required autocomplete="email"></label>

هل تظلّ المكوّنات التي يمكن الوصول إليها متاحة للمستخدمين دائمًا؟

لا، عليك اختبار مكوّناتك أولاً.

نعم، يمكنك استخدام هذه المكوّنات بدون بذل جهد إضافي.

ما هو نوع الاختبار الذي يجب إجراؤه للتأكّد من إمكانية الوصول إلى موقعك الإلكتروني؟

يُرجى اختيار كل ما ينطبق.

الاختبار الآلي

الاختبار اليدوي

اختبار المستخدم

اختبار التكنولوجيا المساعدة

اختبار التقييم

ما هي الأخطاء التي يتم رصدها في الاختبارات المبرمَجة؟

يُرجى اختيار كل ما ينطبق.

لغة شاملة

نص بديل غير متوفر

مشاكل تباين الألوان

تصنيفات الأشكال الوصفية

أخطاء ARIA

ما هي العناصر التي يجب أن تستوفي معايير تباين الألوان في WCAG؟

الرموز

الرؤوس

النص الأساسي

كل ما سبق

ما هو أفضل قارئ شاشة يمكن استخدامه لاختبار إمكانية الوصول؟

لا يوجد

JAWS

VoiceOver

Orca

ما الغرض من الاختبار باستخدام التكنولوجيا المساعدة؟

لاختبار العيوب في موقعك الإلكتروني أو تطبيقك

لتجربة ما يختبره الأشخاص الذين يستخدمون التكنولوجيا المساعدة

ما هي الأدوات الشائعة الاستخدام لمساعدة الأشخاص ذوي الاحتياجات الخاصة على استخدام الويب؟

ما هي الطريقة الفعّالة لإحداث تغيير على الويب؟

ما هو أعلى مستوى من معايير إرشادات إتاحة محتوى الويب؟

ما هي أمثلة على المحتوى القابل للتشغيل؟

أيّ مما يلي يمثّل أفضل ممارسة لإنشاء زر يسهل الوصول إليه؟

موقعك الإلكتروني هو كتاب مدرسي على الإنترنت بلغات متعددة، حيث يتم عرض لغات متعددة على صفحة واحدة. ما هي أفضل طريقة لإخبار التكنولوجيات المساعدة بلغة النص؟

أيّ مثال على نمط CSS :focus هو الأنسب للاستخدام على خلفية بيضاء؟

ما هو الغرض من رابط التخطّي؟

ما هي أفضل طريقة لتغيير نمط عنصر باستخدام JavaScript؟

هل يمكن أن تتوافق جميع إجراءات JavaScript مع مستخدمي لوحة المفاتيح؟

كيف يمكن جعل الصور المعقّدة سهلة الوصول؟

لا يكفي اللون وحده كمعرّف للمستندات. ما هي العناصر الأخرى التي ستساعد القراء في التعرّف على عناصر واجهة المستخدم؟

ما الذي يمكننا إنشاؤه ليعكس إعدادات نظام التشغيل المتعلقة بالحركة؟

للحصول على نسخة قابلة للقراءة، يجب دائمًا استخدام تباين عالٍ بين النسخة والخلفية.

ما هي الخطوط الأفضل من حيث سهولة الاستخدام؟

أيّ مما يلي هو نموذج الإدخال الأكثر سهولة في الاستخدام؟

هل تظلّ المكوّنات التي يمكن الوصول إليها متاحة للمستخدمين دائمًا؟

ما هو نوع الاختبار الذي يجب إجراؤه للتأكّد من إمكانية الوصول إلى موقعك الإلكتروني؟

ما هي الأخطاء التي يتم رصدها في الاختبارات المبرمَجة؟

ما هي العناصر التي يجب أن تستوفي معايير تباين الألوان في WCAG؟

ما هو أفضل قارئ شاشة يمكن استخدامه لاختبار إمكانية الوصول؟

ما الغرض من الاختبار باستخدام التكنولوجيا المساعدة؟

أيّ مثال على نمط CSS `:focus` هو الأنسب للاستخدام على خلفية بيضاء؟