كيف تقرأ التقنيات المساعدة صفحتك

افتح Ticketly وشاشتك مطفأة. قد يبدو هذا استعراضًا، لكنه ما يفعله سمير كل يوم عمل، وهو أسرع طريقة لتفهم ما يرسله كودك فعلًا إلى من يستخدمونه. قبل أن تُصلح أي شيء، تحتاج إلى صورة واضحة عن كيف تستخرج التقنيات المساعدة (assistive technology، وتُختصر AT) المعلومات من صفحة الويب.

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

لا تنظر التقنيات المساعدة إلى البكسلات. يأخذ المتصفّح الـ DOM، ويدمجه مع CSS، ويبني شجرة ثانية أبسط: شجرة إمكانية الوصول (accessibility tree). لكل عقدة فيها بضع خصائص:

• دور (role): زر، رابط، عنوان (المستوى 2)، حقل نصي، مربع اختيار، قائمة، عام (generic)؛
• اسم (name): النص الذي يعرّف العنصر، مثل “Book now”؛
• حالات وقيم: محدَّد، موسَّع، معطَّل، النص الحالي داخل حقل الإدخال.

يسلّم المتصفّح هذه الشجرة إلى واجهة إمكانية الوصول البرمجية في نظام التشغيل، ومن هناك يقرؤها قارئ الشاشة أو برنامج التكبير أو برنامج التحكّم الصوتي.

هذا جزء من بطاقة الفعالية في Ticketly، وما تحتويه الشجرة له:

<h3>Harbour Lights: Friday</h3>
<div class="btn" onclick="book('fri')">Book now</div>
<button type="button" onclick="book('sat')">Book now</button>

heading "Harbour Lights: Friday" (level 3)
generic
  text "Book now"
button "Book now"

يعرض الـ div النص نفسه، لكن دوره عامّ (generic). يقرأ قارئ الشاشة “Book now” كجملة عادية، بلا أي إشارة إلى أنه يفعل شيئًا، ولا يمكن الوصول إليه بمفتاح Tab. يمكنك فحص هذا بنفسك: في أدوات المطوّر في Chrome أو Edge، حدّد عنصرًا وافتح لوحة Accessibility؛ وفي Firefox تبويب مخصّص اسمه Accessibility Inspector.

أربع طرق يشغّل بها الناس Ticketly

قارئات الشاشة (NVDA وJAWS على Windows، وVoiceOver على أجهزة Apple، وTalkBack على Android) تحوّل الشجرة إلى كلام منطوق أو إلى طريقة برايل. نادرًا ما يستمع المستخدمون إلى الصفحة من أعلاها إلى أسفلها. في استطلاع WebAIM لعام 2026، قال 67.8% من مستخدمي قارئ الشاشة إن أول ما يفعلونه في صفحة طويلة هو القفز بين العناوين. ويستدعون أيضًا قوائم بالروابط والـ landmarks وحقول النماذج. البنية التي تكتبها هي فهرس المحتويات بالنسبة لهم.

برامج تكبير الشاشة (Windows Magnifier وZoom في macOS وZoomText) تكبّر منطقة صغيرة تتبع التركيز أو المؤشّر. مها، مصمّمة في فريقي، تعمل بتكبير 400%: ترى نحو جزء من ستة عشر جزءًا من الشاشة في المرة الواحدة. أي شيء يحدث بعيدًا عن تركيزها، مثل إشعار منبثق في الزاوية المقابلة، لم يحدث أصلًا بالنسبة لها.

أجهزة التبديل (switch access): يضغط مستخدموها مفتاحًا ماديًا واحدًا أو اثنين. ينتقل البرنامج بين العناصر القابلة للتركيز واحدًا تلو الآخر، وضغطة المفتاح تفعّل العنصر الحالي. إن لم يكن العنصر قابلًا للتركيز، فلا سبيل إلى الوصول إليه إطلاقًا. يعتمد مستخدمو أجهزة التبديل على قابلية التشغيل نفسها بلوحة المفاتيح التي ستبنيها في القسم 3.

التحكّم الصوتي (Voice Control في macOS وiOS، وDragon على Windows) يتيح للناس أن يقولوا “click Book now” أو “show numbers”. يطابق البرنامج الكلمات المنطوقة مع الأسماء المتاحة (accessible names). حين يظهر على الزر “Book seats” لكن عليه aria-label="cta-primary"، لا تطابق الكلمات التي تقولها دينا الاسم، فلا يحدث شيء. تسمّي WCAG هذا المعيار Label in Name: يجب أن يحتوي الاسم المتاح النص المرئي.

أن تُظهره للشجرة لا للعين

نمطان يغطّيان معظم الحالات في Ticketly.

حين تحمل إشارة بصرية معنى ليس له نص، أضف نصًا لا تراه إلا الشجرة. يُعلِّم Ticketly الموعد الذي نفدت تذاكره بخطّ يشطب السعر ولون رمادي. فيُعلن قارئ الشاشة “SAR 180” ويحاول سمير بكل سرور أن يشتريه. أضف ملاحظة مخفية بصريًا:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

<p class="price sold">SAR 180 <span class="visually-hidden">(sold out)</span></p>

وحين يكون العنصر زخرفيًا، أخفِه عن الشجرة. يضع Ticketly أيقونة تقويم صغيرة قبل كل تاريخ. قد تُعلَن عناصر SVG المضمّنة على أنها “image” أو “graphic”، وهذا ضجيج. وتزيلها aria-hidden="true":

<p class="date"><svg class="icon" aria-hidden="true" viewBox="0 0 16 16">…</svg> 12 June, 8 pm</p>

الشجرة هي العقد بين كودك وبين كل تقنية مساعدة. في الدرس التالي سترى المعيار الذي يحدّد ما يجب أن يتضمّنه هذا العقد: WCAG 2.2.