{"id":"l-a11y-2-4","courseId":"web-accessibility","lang":"ar","kind":"lesson","summary":"حدّد النص البديل الذي تحتاجه كل صورة بحسب غرضها في سياقها، واكتب جداول البيانات بحيث تُعلن قارئات الشاشة العناوين الصحيحة لكل خلية.","html":"

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

\n

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

\n

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

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
الصورة في Ticketlyالغرضالـ alt
صورة فرقة Nour Quartet على بطاقة الفنانمعلوماتيةalt="Nour Quartet performing on a lit harbour stage"
الشعار داخل رابط إلى الصفحة الرئيسيةوظيفيةalt="Ticketly home"
أيقونة العدسة المكبّرة كمحتوى وحيد لزر البحثوظيفيةalt="Search"
خطّ متموّج يفصل بين الأقسامزخرفيةalt=""
صورة الجمهور خلف عنوان يقول كل شيء أصلًازخرفية في سياقهاalt=""
شارة “Sold out” مرسومة كصورةنص داخل صورةalt="Sold out"
خريطة المقاعدمعقّدةنص alt قصير مع بديل كامل قريب منها

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

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

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

\n\n\n

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

\n

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

\n

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

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

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

\n

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

\n\n

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

\n

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

\n
ticketly/pricing.html
<table>\n  <caption>Harbour Lights ticket prices</caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">Pass</th>\n      <th scope=\"col\">Early bird</th>\n      <th scope=\"col\">Standard</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr><th scope=\"row\">Friday</th><td>SAR 150</td><td>SAR 180</td></tr>\n    <tr><th scope=\"row\">Weekend</th><td>SAR 280</td><td>SAR 320</td></tr>\n  </tbody>\n</table>
\n
\n جدول أسعار من ثلاثة صفوف وثلاثة أعمدة. الخلية المميّزة SAR 320 مرتبطة بعنوان صفّها Weekend وعنوان عمودها Standard؛ فيُعلن قارئ الشاشة: Weekend, Standard, SAR 320.\n \n Pass\n \n Early bird\n \n Standard\n \n Friday\n \n SAR 150\n \n SAR 180\n \n Weekend\n \n SAR 280\n \n SAR 320\n \n \"Weekend,\n Standard, SAR 320\"\n \n \n th scope=\"row\" وth scope=\"col\" توفّران السياق\n
كيف يُعلن قارئ الشاشة خلية في جدول
\n

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

\n

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

\n

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

\n","toc":[{"id":"sec-1","text":"النص البديل يصف الغرض لا البكسلات","level":2},{"id":"sec-2","text":"الصور الزخرفية والأيقونات","level":2},{"id":"sec-3","text":"الصور المعقّدة","level":2},{"id":"sec-4","text":"جداول البيانات","level":2}],"takeaways":["النص البديل يصف غرض الصورة في سياقها، لذا قد تحتاج الصورة نفسها إلى نص بديل مختلف في صفحات مختلفة.","الصور الزخرفية تأخذ alt=“” فتتخطّاها قارئات الشاشة؛ أما غياب خاصية alt فكثيرًا ما يجعلها تقرأ اسم الملف.","الصورة التي هي المحتوى الوحيد لرابط أو زر تحتاج إلى نص بديل يسمّي الوجهة أو الفعل.","جداول البيانات تحتاج إلى caption وخلايا th مع scope، فتُعلَن كل خلية مع عنواني صفّها وعمودها."],"further":[{"title":"W3C WAI: An alt Decision Tree","url":"https://www.w3.org/WAI/tutorials/images/decision-tree/"},{"title":"W3C WAI: Tables Tutorial","url":"https://www.w3.org/WAI/tutorials/tables/"},{"title":"WebAIM: Alternative Text","url":"https://webaim.org/techniques/alttext/"}],"quiz":[{"q":"

شعار Ticketly في الترويسة صورة داخل <a href="/">. ما النص البديل الذي يجب أن يحمله؟

","options":[{"text":"alt=""، لأن الشعارات زخرفية","why":"داخل الرابط تكون الصورة هي المحتوى الوحيد للرابط. والـ alt الفارغ يترك الرابط بلا اسم، فتُعلن قارئات الشاشة “link” فقط."},{"text":"alt="Ticketly home"","why":"صحيح. الصورة الوظيفية تصف ما يفعله تفعيلها. و"Ticketly" وحدها مقبولة أيضًا؛ لكن إضافة “home” تجعل الوجهة صريحة."},{"text":"alt="Ticketly logo, purple ticket icon"","why":"الوصف البصري لا يساعد أحدًا على أن يقرّر اتّباع الرابط. صِف الوظيفة، لا الرسم."}],"answer":1},{"q":"

ماذا يحدث حين لا يكون لعنصر img خاصية alt إطلاقًا؟

","options":[{"text":"تتخطّاه قارئات الشاشة، تمامًا مثل alt=“”","why":"وحدها الـ alt الفارغة صراحةً تعلّم الصورة بأنها زخرفية. ومن دون الخاصية، تحاول قارئات الشاشة أن تقول شيئًا عنها."},{"text":"يولّد المتصفّح نصًا بديلًا تلقائيًا من الصورة","why":"بعض قارئات الشاشة والمتصفّحات تستطيع توليد أوصاف بالذكاء الاصطناعي إن فعّلها المستخدم، لكن لا شيء يملأ الـ alt افتراضيًا، ولا يمكنك الافتراض أن كل المستخدمين لديهم هذه الميزة، ولا أنها ستصف الغرض بشكل صحيح."},{"text":"كثير من قارئات الشاشة تُعلن اسم الملف أو عنوانه، مثل “IMG underscore 4521 dot jpg”","why":"صحيح. هذا ضجيج في أحسن الأحوال ومربك في أسوئها، ولهذا يأتي غياب الـ alt ثانيًا بين أكثر الإخفاقات شيوعًا على الويب."}],"answer":2},{"q":"

في جدول الأسعار هذا، ماذا يُعلن قارئ الشاشة حين ينتقل المستخدم إلى خلية “SAR 320”؟

\n
HTML
<table>\n  <caption>Harbour Lights ticket prices</caption>\n  <tr><th scope=\"col\">Pass</th><th scope=\"col\">Early bird</th><th scope=\"col\">Standard</th></tr>\n  <tr><th scope=\"row\">Weekend</th><td>SAR 280</td><td>SAR 320</td></tr>\n</table>
\n","options":[{"text":"“Weekend, Standard, SAR 320”","why":"صحيح. مع th وscope، يُعلن قارئ الشاشة عنوان الصف وعنوان العمود اللذين لم يسمعهما المستخدم بعد، ثم القيمة."},{"text":"“SAR 320” فقط","why":"هذا ما يحدث حين تكون العناوين خلايا td عادية. أما هنا فعناصر th تمنح كل خلية سياقها."},{"text":"“Harbour Lights ticket prices, SAR 320”","why":"الـ caption يسمّي الجدول كله حين يدخله المستخدم؛ ولا يتكرّر مع كل خلية."}],"answer":0},{"q":"

رسم بياني خطّي في Ticketly يعرض مبيعات التذاكر في كل يوم. ما البديل النصي الأكثر فائدة؟

","options":[{"text":"alt="Chart"","why":"هذا يقول ما هي الصورة لكن لا يقول ما تعنيه. ويبقى مستخدم قارئ الشاشة لا يعرف شيئًا عن المبيعات."},{"text":"alt=""، لأن الرسوم البيانية أعقد من أن توصف","why":"الرسم البياني يحمل معلومات، وإخفاؤه يحذف تلك المعلومات عن مستخدمي قارئ الشاشة بالكامل."},{"text":"نص alt قصير بالخلاصة الأساسية، إضافةً إلى البيانات كاملة في جدول أو نص قريب","why":"صحيح. مثلًا “Daily ticket sales, peaking at 1,200 on launch day”، مع الأرقام في جدول لمن يريد التفاصيل."}],"answer":2}],"exercise":{"kind":"choice","multiple":true,"options":["logo-link","seat-map","artist-file","hero-ambient","search-empty","sold-badge"],"correct":["logo-link","hero-ambient","sold-badge"],"title":"راجع النصوص البديلة في Ticketly","prompt":"

أضاف زميل نصًا بديلًا لكل صورة في Ticketly وطلب منك مراجعته. اختر كل قرار صحيح كما هو مكتوب. فكّر في غرض كل صورة في سياقها، لا في ما تعرضه فقط.

\n","hints":["اسأل عن كل صورة: معلوماتية، أم وظيفية، أم زخرفية، أم نص، أم معقّدة؟","الصورة التي هي المحتوى الوحيد لرابط أو زر يجب أن تسمّي الوجهة أو الفعل.","ثلاثة من القرارات الستة صحيحة."],"explanation":"

رابط الشعار يسمّي وجهته، وصورة الجمهور الخلفية زخرفية لأن العنوان والفقرة يقولان كل شيء أصلًا، وصورة الشارة التي تحمل كلمتي “Sold out” تكرّر تلك الكلمتين. أما الثلاثة الأخرى فتفشل: “Seat map” تقول ما هي الصورة لكنها لا تذكر شيئًا من المقاعد المتاحة التي تعرضها، فتحتاج إلى ملخّص قصير وقائمة بالكتل قريبة منها؛ و"Image of nour_quartet_final.jpg" اسم ملف ببادئة زائدة؛ وأيقونة البحث ذات alt=“” تترك زرّها بلا أي اسم متاح.

\n","checkLabels":{},"optionText":{"logo-link":{"text":"صورة الشعار داخل <a href="/">: alt="Ticketly home"","why":"صحيح. الصورة هي المحتوى الوحيد للرابط، فالـ alt فيها يسمّي وجهة الرابط."},"seat-map":{"text":"خريطة المقاعد التي تُظهر الكتل التي لا تزال فيها مقاعد: alt="Seat map"","why":"غير كافٍ. يسمّي نوع الصورة دون أي من معلوماتها. قدّم ملخّصًا قصيرًا وقائمة نصية بالكتل والمقاعد المتاحة."},"artist-file":{"text":"صورة الفنان على بطاقة Nour Quartet: alt="Image of nour_quartet_final.jpg"","why":"خطأ. قارئات الشاشة تقول “image” أصلًا، واسم الملف لا يخبر المستخدمين بشيء. صِف ما تُظهره الصورة مما يهمّ، مثل الفرقة على المسرح."},"hero-ambient":{"text":"صورة جمهور ضبابية خلف العنوان “Harbour Lights 2026”، والفقرة تحته تصف الفعالية أصلًا: alt=""","why":"صحيح. في هذا السياق الصورة أجواء فقط؛ والنص يحمل المعنى، فالـ alt الفارغ يتيح لقارئات الشاشة تخطّيها."},"search-empty":{"text":"صورة عدسة مكبّرة كمحتوى وحيد لزر البحث: alt=""","why":"خطأ. صار الزر بلا اسم ويُعلَن على أنه “button” فقط. استخدم alt=“Search”."},"sold-badge":{"text":"صورة لكلمتي “Sold out” على بطاقة الجمعة: alt="Sold out"","why":"صحيح. في صور النصوص، يكرّر الـ alt النص. والأفضل من ذلك نص حقيقي منسّق بـ CSS."}}},"words":656,"readMinutes":4}