HTML الدلالية لإمكانية الوصول

لماذا يهم

قد تبدو الصفحة المبنية من عناصر <div> منسّقة مكتملةً وهي مع ذلك غير قابلة للاستخدام: يسمع مستخدم قارئ الشاشة «قابل للنقر» بدلاً من «زر»، ويفتح قائمة عناوين فارغة، ويقع في حقل بلا اسم، ويقرأ رقماً في جدول بلا عمود. وكل واحدة من هذه إخفاق في معيار النجاح 1.3.1 المعلومات والعلاقات (Info and Relationships) أو 4.1.2 الاسم والدور والقيمة (Name, Role, Value) من WCAG 2.2، وكلاهما من المستوى A، فتفشل الصفحة في المطابقة عند أدنى مستوى، ولا يستطيع من يعتمدون على التقنيات المساعدة إتمام المهمة.

وبالنسبة إلى المختبِر، الدلالات من أرخص فحوص إمكانية الوصول. فلا تحتاج إلى قارئ شاشة لترى أن العنوان مجرد <div> منسّق أو أن حقل الإدخال بلا <label>: تُظهر الشيفرة ولوحة إمكانية الوصول في المتصفح ذلك في ثوانٍ، والإصلاح غالباً تغيير عنصر واحد. واكتشاف ذلك في أول مراجعة لمكوّن جديد يوفّر جولة كاملة من اختبار قارئ الشاشة لاحقاً، كما أن الأدوار والأسماء نفسها تجعل الاختبارات الآلية والمحددات (Locators) أكثر استقراراً.

من الشيفرة إلى شجرة إمكانية الوصول

حين يحلّل المتصفح HTML يبني نموذج DOM، أي الشجرة الحية لعناصر الصفحة، ومنه يبني بنية ثانية: شجرة إمكانية الوصول. يصبح كل عنصر ذي معنى عقدة لها دور (Role) مثل عنوان أو رابط أو زر أو مربع نص أو خلية، واسم قابل للوصول (Accessible name) مثل نص العنوان أو نص الرابط أو تسمية الحقل، وحالات أو خصائص مثل عنوان من المستوى 2 أو مطلوب أو محدد أو معطّل. أما العناصر التي لا تحمل معنى، مثل <div> و<span>، فتصبح عقداً عامة (Generic) أو تُحذف من الشجرة كلياً.

تقرأ قارئات الشاشة والتحكم الصوتي هذه الشجرة عبر واجهة برمجة إمكانية الوصول (Accessibility API) في نظام التشغيل، لا البكسلات المعروضة. فيعلن قارئ الشاشة الدور والاسم معاً («Place order، زر»)، ويعرض قوائم بالعناوين والمعالم والروابط ليقفز المستخدم بدلاً من القراءة بالترتيب، ويستخدم الدور ليحدد المفاتيح التي تشغّل العنصر. ويفعّل التحكم الصوتي ما يسمّيه المستخدم («انقر Place order»)، لذا يجب أن يوجد الاسم المنطوق في الشجرة. ولا يصل مستخدمو لوحة المفاتيح إلا إلى ما هو قابل للتركيز (Focusable)، وعناصر التحكم الأصلية كذلك افتراضياً. ولا يستطيع التنسيق أن يضيف دوراً: فقد يُخفي CSS محتوى من الشجرة، لكن عنصر <div> المنسّق ليبدو زراً يظل عقدة عامة فيها.

• الدور: أي نوع من الأشياء هو. يأتي من العنصر (<button> و<h2> و<a href>)، أو في الملاذ الأخير من سمة دور ARIA، وهو ما يتناوله درس لاحق.
• الاسم: ماذا يُسمّى. يحسبه المتصفح من المحتوى أو من <label> أو alt أو <caption> أو سمات ARIA، بترتيب ثابت تحدده مواصفة حساب الاسم القابل للوصول.
• الحالة والقيمة: ماذا يفعل الآن. تُبقيها العناصر الأصلية محدّثة دون أي جهد: <input type="checkbox"> محدد، و<button> معطّل، والنص المكتوب في <textarea>.

العناوين والمعالم والقوائم: البنية التي يتنقل بها المستخدمون

نادراً ما يقرأ مستخدمو قارئات الشاشة الصفحة من أعلاها إلى أسفلها. فهم يفتحون قائمة العناوين ليعرفوا ما تحتويه الصفحة، ويقفزون إلى معلم main لتخطي قائمة التنقل، ويسمعون «قائمة، أربعة عناصر» قبل أي قائمة ليعرفوا حجم ما هو قادم. وكل حركة من هذه تعتمد على استخدام عنصر واحد بعينه، ولكل منها فحص دقيق.

• العناوين من <h1> إلى <h6>: عنوان <h1> واحد لموضوع الصفحة، و<h2> لأقسامها، و<h3> داخلها. والعنوان المرئي المصنوع من نص عريض داخل <div> غائب عن قائمة العناوين ويخفق في 1.3.1؛ ونص العنوان الذي لا يصف قسمه يخفق في 2.4.6 العناوين والتسميات (Headings and Labels) من المستوى AA. أما تخطي المستويات فيربك المستخدمين لكنه ليس إخفاقاً في WCAG بحد ذاته، فأبلغ عنه بخطورة أقل.
• المعالم (Landmarks): في المستوى الأعلى من الصفحة يقابل <header> دور banner، و<nav> دور navigation، و<main> دور main، و<aside> دور complementary، و<footer> دور contentinfo. ولا يصبح <section> منطقة (Region) إلا إذا كان له اسم، يأتي عادةً من السمة aria-labelledby التي تشير إلى عنوانه أو من السمة aria-label. وتتيح المعالم للمستخدمين تخطي الكتل المتكررة في كل صفحة، وهو ما يطلبه المعيار 2.4.1 تخطي الكتل (Bypass Blocks). تحقق من أن المحتوى داخل <main>، وأن عنصري <nav> يحملان اسمين مختلفين مثل «القائمة الرئيسية» و«روابط التذييل».
• القوائم <ul> و<ol>: يعلن قارئ الشاشة بداية القائمة وعدد عناصرها. وقائمة التنقل المبنية من صفوف <div> تُقرأ أسطراً غير مترابطة، وقائمة <ol> لخطوات الدفع تفقد ترتيبها حين تتحول إلى div. والنقاط المنسّقة وحدها لا تصنع قائمة.

الأزرار والروابط والتسميات والجداول: الاسم والدور والعلاقات

المجموعة الثانية هي مجال المعيار 4.1.2 الاسم والدور والقيمة: يجب أن يكشف كل مكوّن في واجهة المستخدم اسمه ودوره وحالاته وقيمته للتقنيات المساعدة. وتفعل العناصر الأصلية ذلك افتراضياً؛ أما البدائل المبنية من <div> أو <span> فلا، والعنصر الأصلي الخاطئ عيب أيضاً.

• زر أم رابط: <button> ينفّذ إجراءً في هذه الصفحة (إرسال، فتح، حذف) ويُفعَّل بمفتاحي Enter وSpace؛ و<a href> ينقلك إلى مكان آخر ويُفعَّل بمفتاح Enter وحده. يعلن قارئ الشاشة كلاً منهما بطريقة مختلفة ويضع الروابط في قائمة مستقلة، لذا فإن <div onclick> الذي يعمل زراً، أو الرابط المنسّق كزر الذي لا يشغّل إلا نصاً برمجياً، له نتيجة متوقعة واضحة: العنصر الأصلي المناسب لما يفعله. و<a> بلا href ليس رابطاً أصلاً: فهو غير قابل للتركيز، ويُقرأ نصه نصاً عادياً لا رابطاً.
• التسميات: يأتي اسم الحقل من <label> تساوي سمته for معرّف الحقل id، أو من <label> يحيط بالحقل. ونص العنصر النائب (Placeholder) مجرد بديل احتياطي في حساب الاسم ويختفي بمجرد أن يبدأ المستخدم الكتابة، لذا فالحقل الذي تسميته الوحيدة نص نائب عيب يجب الإبلاغ عنه. وتأخذ مجموعة أزرار الاختيار أو مربعات التحديد سؤالها المشترك من <fieldset> و<legend>؛ ومن دونهما يسمع المستخدم «نعم، زر اختيار» دون أن يعرف ما السؤال.
• الجداول: <table> للبيانات ذات الصفوف والأعمدة، مع <th scope="col"> أو <th scope="row"> للرؤوس و<caption> للعنوان. عندها تربط الشجرة كل خلية بيانات برؤوسها، فحين ينتقل المستخدم من خلية إلى أخرى يعلن قارئ الشاشة الرأس الذي تغيّر، كاسم العمود قبل كل قيمة، ويستطيع المستخدم التنقل على طول صف أو عمود. أما شبكة من عناصر <div>، أو جدول رؤوسه خلايا <td> بخط عريض، فتفقد هذه العلاقات وتخفق في 1.3.1. والخطأ المعاكس موجود أيضاً: <table> مستخدم للتخطيط، فقد يعلن صفوفاً وأعمدة بلا معنى.

مثال تطبيقي: صفحة الدفع نفسها بترميزين

تعرض مكتبة مكوّنات الواجهة الأمامية صفحة الدفع بالترميز A أدناه: كل عنصر فيه، ما عدا حقل الإدخال نفسه، <div> بفئة (class) منسّق ليبدو عنواناً أو قائمة تنقل أو تسمية حقل أو جدول ملخص أو زراً. وتنجح مراجعة التصميم، لأن الصفحة على الشاشة لا تختلف عن الترميز B الذي يستخدم عنصراً دلالياً واحداً لكل بنية.

افتح الترميزين في أدوات المطور في المتصفح (انقر بزر الفأرة الأيمن على عنصر واختر «Inspect»؛ وفي Chrome وEdge يعرض تبويب «Accessibility»، الموجود في صف التبويبات نفسه مع «Styles»، دور العنصر المحدد واسمه المحسوب) وسترى الفرق فوراً. في A، «Checkout» عقدة عامة فيها نص، فقائمة العناوين فارغة؛ وقائمة التنقل عنصران عامان لا يصل إليهما Tab أبداً؛ وحقل الإدخال بلا اسم؛ و«Total» و«600 SAR» نصّان غير مترابطين؛ و«Place order» عقدة عامة لا يفعّلها إلا الفأرة. وفي B تُظهر الشجرة عنواناً من المستوى 1 «Checkout»، ومعلم تنقل يحوي قائمة من رابطين، ومعلم main، ومربع نص مطلوباً اسمه «Postal code»، وجدولاً تُربط فيه «600 SAR» برأس صفها «Total»، وزراً اسمه «Place order» يصل إليه Tab ويفعّله Enter أو Space. لم يتغير شيء بصرياً، وتغير كل شيء للتقنيات المساعدة.

<!-- A: div soup -->
<div class="title">Checkout</div>
<div class="menu">
  <div class="item" onclick="go('/orders')">Orders</div>
  <div class="item" onclick="go('/addresses')">Addresses</div>
</div>
<div class="hint">Postal code</div>
<input class="zip">
<div class="row"><div class="cell">Total</div><div class="cell">600 SAR</div></div>
<div class="btn" onclick="pay()">Place order</div>

<!-- B: semantic HTML, identical on screen -->
<nav>
  <ul>
    <li><a href="/orders">Orders</a></li>
    <li><a href="/addresses">Addresses</a></li>
  </ul>
</nav>
<main>
  <h1>Checkout</h1>
  <form action="/orders" method="post">
    <label for="zip">Postal code</label>
    <input id="zip" name="zip" required>
    <table>
      <caption>Order summary</caption>
      <tr><th scope="row">Total</th><td>600 SAR</td></tr>
    </table>
    <button type="submit">Place order</button>
  </form>
</main>

جرّبها: منسّق HTML

أسئلة شائعة

المراجع

• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024توصية W3C التي تحدد معايير النجاح القابلة للاختبار لإتاحة محتوى الويب، مرتّبةً تحت أربعة مبادئ وثلاثة مستويات مطابقة (A وAA وAAA).
• HTML Living StandardWHATWGلغة HTML، بما فيها مراجع المحارف المسماة (الكيانات) وقواعد التحليل التي تتبعها المتصفحات.
• Accessible Name and Description Computation 1.2W3C · 2026كيف تحسب المتصفحات الاسم والوصف الميسَّرين لعنصرٍ من التسميات وسمات ARIA والمحتوى (مسودة عمل من W3C).
• Understanding WCAG 2.2W3C Web Accessibility Initiative (WAI)الشرح التوضيحي لكل إرشاد ومعيار نجاح في WCAG 2.2: الغرض، ومن يستفيد، والأمثلة والتقنيات (غير إلزامي).