الصور والنص البديل وجداول البيانات

كل صورة في Ticketly تقطع وعدًا: «هذه تخبرك بشيء» أو «هذه زخرفة». والنص البديل (alt text) هو طريقتك للوفاء بهذا الوعد لمن لا يستطيعون رؤية الصورة. الجزء الصعب ليس الصياغة، فكتابة alt="…" سهلة. بل هو قرار ما ستقوله، إن كان هناك ما يُقال أصلًا.

النص البديل يصف الغرض لا البكسلات

ابدأ من سؤال واحد: ماذا ستخسر لو حُذفت هذه الصورة؟ هذا ما يجب أن يعيده النص البديل.

السياق يغيّر الإجابة. صورة الجمهور نفسها زخرفية خلف عنوان، لكنها معلوماتية في صفحة اسمها «كيف يبدو المكان»، وهناك تحتاج إلى وصف.

<article class="artist">
  <img src="nour-quartet.jpg" alt="Nour Quartet performing on a lit harbour stage">
  <h3>Nour Quartet</h3>
  <p>Jazz and Arabic maqam from Alexandria.</p>
</article>

بضع عادات تجعل النص البديل أفضل:

• لا تبدأ بـ “image of” أو “photo of”. قارئات الشاشة تُعلن “image” (أو “graphic”) أصلًا. لا تذكر “photo” إلا حين تكون الوسيلة مهمة، مثل “Hand-drawn poster of…”.
• لا تكرّر النص المجاور. إن كان التعليق يقول “Nour Quartet”، فلا ينبغي أن يكرّره الـ alt حرفيًا؛ صِف ما تضيفه الصورة.
• اجعله قصيرًا. جملة واحدة تكفي معظم الصور. والأوصاف الطويلة مكانها نص الصفحة.

الصور الزخرفية والأيقونات

للصور الزخرفية، استخدم alt فارغًا: alt=""، بلا أي شيء بين علامتي الاقتباس. أما غياب الخاصية فشيء مختلف: كثير من قارئات الشاشة تُعلن حينها اسم الملف، مثل “hero underscore final underscore v3 dot jpg”. والصور المضافة عبر background-image في CSS غير مرئية للتقنيات المساعدة، وهذا مقبول للزخرفة لكنه خاطئ لأي صورة تحمل معنى.

أيقونات SVG المضمّنة تتبع المنطق نفسه بخصائص مختلفة. الأيقونات الزخرفية تأخذ aria-hidden="true"، كما فعلت في درس كيف تقرأ التقنيات المساعدة صفحتك. أما الـ SVG الذي يحمل معنى بمفرده فيأخذ role="img" واسمًا:

<svg role="img" aria-label="Wheelchair accessible venue" viewBox="0 0 24 24">…</svg>

الصور المعقّدة

الرسوم البيانية والخرائط والمخطّطات تحمل معلومات أكثر مما تحتمله جملة. أعطِها alt قصيرًا يذكر الخلاصة، وضع المعلومات كاملة في الصفحة: جدول بيانات تحت الرسم البياني، أو قائمة بالأقسام والمقاعد المتاحة بجوار خريطة المقاعد، أو عنصر <details> يحمل وصفًا أطول. خريطة المقاعد في Ticketly تحصل على قائمة بالكتل (“Block A, front left, 12 seats left”) مفيدة لكل من يقارن بين الخيارات، لا لمستخدمي قارئ الشاشة وحدهم.

جداول البيانات

بُنيت شبكة الأسعار في Ticketly من عناصر div منسّقة بـ CSS grid. يقرؤها المستخدم المبصر بنظرة واحدة؛ أما قارئ الشاشة فيقرأ “Pass, Early bird, Standard, Weekend, SAR 280, SAR 320” كقائمة مسطّحة بلا أي طريقة لمعرفة أيّ سعر يخصّ أيّ تذكرة. والجدول الحقيقي يُصلح ذلك:

<table>
  <caption>Harbour Lights ticket prices</caption>
  <thead>
    <tr>
      <th scope="col">Pass</th>
      <th scope="col">Early bird</th>
      <th scope="col">Standard</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Friday</th><td>SAR 150</td><td>SAR 180</td></tr>
    <tr><th scope="row">Weekend</th><td>SAR 280</td><td>SAR 320</td></tr>
  </tbody>
</table>

الـ <caption> يسمّي الجدول حين يدخله المستخدم. وscope="col" وscope="row" تخبران المتصفّح بالخلايا التي يغطّيها كل عنوان. عندها تتيح قارئات الشاشة التنقّل داخل الجدول (Ctrl+Alt+arrow keys في NVDA، وVO+arrow keys في VoiceOver) وتُعلن العناوين المناسبة كلما تحرّك المستخدم. أبقِ الجداول بسيطة: إن احتجت إلى عناوين مدمجة بعدة مستويات، فتقسيم الجدول إلى جدولين أوضح للجميع في الغالب.

استخدم الجداول للبيانات، لا للتخطيط أبدًا. واحذر من حيل التصميم المتجاوب: ضبط display: block أو display: grid على عناصر الجدول قد يجرّدها من دلالاتها كجدول في بعض المتصفّحات، فاختبر بقارئ شاشة إن أعدت تنسيقها.

بهذا يكتمل الأساس الدلالي لـ Ticketly. ينتقل القسم 3 من «ما هي الصفحة» إلى «كيف يتحرّك الناس فيها»، بدءًا بلوحة المفاتيح.