HTMLverse | إمكانية الوصول

١٣. اختبار إمكانية الوصول اتش.تي.ام.ال HTML Accessibility Quiz

اختبار

١. ما هي "إمكانية الوصول" (Accessibility) ؟

إمكانية الوصول هي مجموعة من الممارسات المعيارية التي تضمن إمكانية استخدام تطبيقات الويب من قِبل الجميع، بمن فيهم ذوو الإعاقة.

٢. أي مما يلي يُعد مثالاً جيداً على "الهيكل السليم لمستويات العناوين" (Proper heading level structure) ؟


<h6>العنوان 6</h6>
<h5>العنوان 5</h5>
<h4>العنوان 4</h4>
<h3>العنوان 3</h3>
<h2>العنوان 2</h2>
<h1>العنوان 1</h1>


<h1>العنوان 1</h1>
<h2>العنوان 2</h2>
<h3>العنوان 3</h3>
<h4>العنوان 4</h4>
<h5>العنوان 5</h5>
<h6>العنوان 6</h6>


<h3>العنوان 3</h3>
<h3>العنوان 3</h3>
<h3>العنوان 3</h3>
<h1>العنوان 1</h1>
<h2>العنوان 2</h2>
<h4>العنوان 4</h4>


<h6>العنوان 6</h6>
<h1>العنوان 1</h1>
<h1>العنوان 1</h1>
<h5>العنوان 5</h5>
<h2>العنوان 2</h2>
<h2>العنوان 2</h2>


<h1>العنوان 1</h1>
<h2>العنوان 2</h2>
<h3>العنوان 3</h3>
<h4>العنوان 4</h4>
<h5>العنوان 5</h5>
<h6>العنوان 6</h6>

٣. ما هي الفئات الست الرئيسية لأدوار ARIA ؟

Document Structure, Landmark, Window, Abstract, Widget, and Live Region

٤. ما هي الطريقة الصحيحة لإضافة السمة `alt` إلى عنصر `img` ؟


<img src="cat.jpg"> alt="cat running"


alt=""<img src="cat.jpg">


alt="cat running"<img src="cat.jpg">


<img src="cat.jpg" alt="cat running">


<img src="cat.jpg" alt="cat running">

٥. ماذا تعني عبارة WAI-ARIA ؟

مبادرة روابط الويب — تطبيقات إنترنت غنية بالروابط (Web Anchor Initiative - Anchor Rich Internet Applications) .
مبادرة إمكانية الوصول إلى الويب — تطبيقات إنترنت جاهزة للاستخدام (Web Accessibility Initial - Accessible Ready Internet Applications) .
مبادرة إمكانية الوصول إلى مواقع الويب — تطبيقات إنترنت سهلة الاستخدام مكتوبة بلغة Rust (Website Accessible Initiative - Accessible Rust Internet Applications) .
مبادرة إمكانية الوصول إلى الويب — تطبيقات إنترنت غنية وسهلة الاستخدام (Web Accessibility Initiative - Accessible Rich Internet Applications) .

مبادرة إمكانية الوصول إلى الويب — تطبيقات إنترنت غنية وسهلة الاستخدام (Web Accessibility Initiative - Accessible Rich Internet Applications) .

٦. ما هو دور السمة `aria-hidden` ؟

تُستخدم هذه الخاصية لإخفاء عنصر عن التقنيات المساعدة.

٧. ما هي السمة التي تجعل العناصر "قابلة للتركيز" (focusable) وتحدد "الترتيب النسبي" (the relative order) الذي يتم من خلاله التنقل بينها باستخدام لوحة المفاتيح؟

`tabindex`

٨. لماذا يُعد تضمين عنصر "التسمية التوضيحية" `caption` داخل جدول HTML ممارسة جيدة؟

يُسهّل على المستخدمين فهم غرض الجدول ومحتواه بسرعة.

٩. ما الفرق بين السمتين `aria-label` و `aria-labelledby` ؟

تتيح لك سمة `aria-labelledby` إعطاء العنصر اسمًا يسهل الوصول إليه من خلال الإشارة إلى عنصر موجود في الصفحة، بينما تتيح لك سمة `aria-label` تحديد الاسم مباشرةً في السمة نفسها.

١٠. أي من السمات التالية توفر معلومات إضافية حول عنصر ما لمستخدمي قارئ الشاشة من خلال الإشارة إلى المحتوى الموجود على الصفحة؟

`aria-describedby`

١١. أي من السمات التالية تُستخدم لتحديد "اختصار لوحة المفاتيح" (a keyboard shortcut) لعنصر ما؟

`accesskey`

١٢. أي من الأمثلة التالية هي الطريقة الصحيحة لربط "تسمية" `label` بـ"عنصر إدخال" `input` ؟


<form>
 <label for="name">اسمك</label>
 <input type="text" id="name" />
</form>


<form>
 <label associate="name">اسمك</label>
 <input type="text" id="name" />
</form>


<form>
 <label accessible="name">اسمك</label>
 <input type="text" id="first-name" />
</form>


<form>
 <label for="name">اسمك</label>
 <input type="text" id="name" />
</form>


<form>
 <label for="name">اسمك</label>
 <input type="text" id="name" />
</form>

١٣. كيف تساعد "عدسة تكبير الشاشة" (a screen magnifier) المستخدمين ذوي الإعاقة البصرية على تصفح صفحات الويب؟

يُساعد مُكبّر الشاشة المستخدمين ذوي الإعاقة البصرية على تصفح صفحات الويب من خلال تمكينهم من التكبير والتصغير.

١٤. أي من الخيارات التالية هو الاستخدام الصحيح لخاصية `aria-describedby` لتوفير المزيد من السياق حول "وظيفة الزر" (a button's action) ؟


<button aria-describedby="delete-message">حذف</button>
<p id="delete-message">تحذير! جميع عمليات الحذف نهائية.</p>


<button id="delete-message">حذف</button>
<p aria-describedby="delete-message">تحذير! جميع عمليات الحذف نهائية.</p>


<button id="delete-btn" aria-describedby="delete-btn">حذف</button>
<p aria-describedby="delete-message" id="delete-message">تحذير! جميع عمليات الحذف نهائية.</p>


<button id="delete-message" aria-describedby="delete-message">حذف</button>
<p aria-describedby="delete-message" id="delete-message">تحذير! جميع عمليات الحذف نهائية.</p>


<button aria-describedby="delete-message">حذف</button>
<p id="delete-message">تحذير! جميع عمليات الحذف نهائية.</p>

١٥. ما الفرق بين معايير WCAG و WAI-ARIA ؟

توفر WAI-ARIA إرشادات عامة لإمكانية الوصول إلى الويب، بينما تقدم WCAG قواعد محددة لجعل المحتوى الديناميكي والتفاعلي متاحًا لمستخدمي التقنيات المساعدة.
توفر WCAG إرشادات عامة لإمكانية الوصول عبر الأجهزة المحمولة فقط، بينما توفر WAI-ARIA قواعد محددة لجعل المحتوى الديناميكي والتفاعلي متاحًا لمستخدمي التقنيات المساعدة.
توفر WAI-ARIA إرشادات عامة لإمكانية الوصول عبر الأجهزة المحمولة فقط، بينما تقدم WCAG قواعد محددة لجعل المحتوى الديناميكي والتفاعلي متاحًا لمستخدمي التقنيات المساعدة.
توفر WCAG إرشادات عامة لإمكانية الوصول إلى الويب، بينما توفر WAI-ARIA قواعد محددة لجعل المحتوى الديناميكي والتفاعلي متاحًا لمستخدمي التقنيات المساعدة.

توفر WCAG إرشادات عامة لإمكانية الوصول إلى الويب، بينما توفر WAI-ARIA قواعد محددة لجعل المحتوى الديناميكي والتفاعلي متاحًا لمستخدمي التقنيات المساعدة.

١٦. أي من الحالات التالية تُعد حالة استخدام شائعة لخاصية `aria-hidden` ؟

الأيقونات والصور التي تُستخدم لأغراض تزيينية فقط.

١٧. ما الغرض من سمة "الدور" `role` ؟

لتنسيق العناصر باستخدام تأثيرات CSS المتحركة، مما يُتيح للتقنيات المساعدة فهم كيفية تفسير العنصر والتفاعل معه بشكل أفضل.
لإضافة تسميات إلى عناصر النماذج، مما يُتيح للتقنيات المساعدة فهم كيفية تفسير العنصر والتفاعل معه بشكل أفضل.
لتحديد المظهر المرئي لعناصر HTML، مما يُتيح للتقنيات المساعدة فهم كيفية تفسير العنصر والتفاعل معه بشكل أفضل.
لتحديد نوع العنصر ووظيفته، مما يُتيح للتقنيات المساعدة فهم كيفية تفسير العنصر والتفاعل معه بشكل أفضل.

لتحديد نوع العنصر ووظيفته، مما يُتيح للتقنيات المساعدة فهم كيفية تفسير العنصر والتفاعل معه بشكل أفضل.

١٨. لماذا من المهم استخدام نص وصفي للروابط؟

لضمان فهم الجميع، بمن فيهم مستخدمو التقنيات المساعدة، لغرض الرابط.

١٩. أي من الممارسات التالية هي الأفضل لجعل المحتوى الصوتي والمرئي متاحًا للجميع؟

توفير ترجمة مكتوبة ونصوص مكتوبة للمحتوى الصوتي والمرئي لتسهيل الوصول إليه للأشخاص ذوي الإعاقة السمعية.

٢٠. ما هي المبادئ الأربعة التي تقوم عليها "إرشادات إمكانية الوصول إلى محتوى الويب" (the Web Content Accessibility Guidelines) ؟

Perceivable, Operable, Understandable, and Robust.

→ السابق التالي ←

١٣. اختبار إمكانية الوصول اتش.تي.ام.ال HTML Accessibility Quiz

١. ما هي "إمكانية الوصول" (Accessibility) ؟

إمكانية الوصول هي مجموعة من الممارسات المعيارية التي تضمن إمكانية استخدام تطبيقات الويب من قِبل الجميع، بمن فيهم ذوو الإعاقة.

٢. أي مما يلي يُعد مثالاً جيداً على "الهيكل السليم لمستويات العناوين" (Proper heading level structure) ؟

<h1>العنوان 1</h1> <h2>العنوان 2</h2> <h3>العنوان 3</h3> <h4>العنوان 4</h4> <h5>العنوان 5</h5> <h6>العنوان 6</h6>

٣. ما هي الفئات الست الرئيسية لأدوار ARIA ؟

Document Structure, Landmark, Window, Abstract, Widget, and Live Region

٤. ما هي الطريقة الصحيحة لإضافة السمة alt إلى عنصر img ؟

<img src="cat.jpg" alt="cat running">

٥. ماذا تعني عبارة WAI-ARIA ؟

مبادرة إمكانية الوصول إلى الويب — تطبيقات إنترنت غنية وسهلة الاستخدام (Web Accessibility Initiative - Accessible Rich Internet Applications) .

٦. ما هو دور السمة aria-hidden ؟

تُستخدم هذه الخاصية لإخفاء عنصر عن التقنيات المساعدة.

٧. ما هي السمة التي تجعل العناصر "قابلة للتركيز" (focusable) وتحدد "الترتيب النسبي" (the relative order) الذي يتم من خلاله التنقل بينها باستخدام لوحة المفاتيح؟

tabindex

٨. لماذا يُعد تضمين عنصر "التسمية التوضيحية" caption داخل جدول HTML ممارسة جيدة؟

يُسهّل على المستخدمين فهم غرض الجدول ومحتواه بسرعة.

٩. ما الفرق بين السمتين aria-label و aria-labelledby ؟

تتيح لك سمة aria-labelledby إعطاء العنصر اسمًا يسهل الوصول إليه من خلال الإشارة إلى عنصر موجود في الصفحة، بينما تتيح لك سمة aria-label تحديد الاسم مباشرةً في السمة نفسها.

١٠. أي من السمات التالية توفر معلومات إضافية حول عنصر ما لمستخدمي قارئ الشاشة من خلال الإشارة إلى المحتوى الموجود على الصفحة؟

aria-describedby

١١. أي من السمات التالية تُستخدم لتحديد "اختصار لوحة المفاتيح" (a keyboard shortcut) لعنصر ما؟

accesskey

١٢. أي من الأمثلة التالية هي الطريقة الصحيحة لربط "تسمية" label بـ"عنصر إدخال" input ؟

<form> <label for="name">اسمك</label> <input type="text" id="name" /> </form>