ما إتاحة الوصول إلى الويب

ماذا تعني إتاحة الوصول، ولمن؟

إتاحة الوصول إلى الويب تعني أن تبقى الصفحة التي بنيتها قابلة للاستعمال لمن لا يعمل بالفأرة، أو يرى الألوان على نحو مختلف، أو لا يرى الصفحة أصلا. لا أبسط ولا أبهت؛ قابلة للاستعمال فقط.

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

ومعيار هذا العمل هو WCAG، مجموعة معايير قابلة للاختبار ينشرها اتحاد الويب في ثلاثة مستويات: A وAA وAAA. والهدف العملي هو AA دائما تقريبا؛ أما AAA فبعض معاييره غير قابل للتحقيق على موقع عادي ولا أحد يطلبه منك.

ونقول كلمة صريحة أيضا: في السوق الإيرانية لا يطلب العميل هذا عادة ولا يفعله المنافس، وأكثر المواقع الفارسية لم تُجرَّب بلوحة المفاتيح ولو مرة. ومعنى ذلك أن فعله ما زال ميزة فارقة لا حدا أدنى. وأكثر ما يأتي بعد ذلك يستغرق أصيلا واحدا لا مشروعا.

تباين الألوان: أي رقم يكفي؟

التباين نسبة بين إضاءة النص وإضاءة خلفيته، ويُعبَّر عنه برقم واحد: من ١ إلى ١ أي غير مرئي، إلى ٢١ إلى ١ أي أسود على أبيض. ويطلب WCAG ٤.٥ إلى ١ على الأقل للنص العادي، و٣ إلى ١ للنص الكبير، و٣ إلى ١ لأجزاء الواجهة كحد حقل الإدخال أو أيقونة تحمل معنى.

وأهم ما في هذا القسم جملة واحدة: اللون وحده لا تباين له، بل للزوج اللوني تباين. فالأزرق نفسه الذي يُقرأ نظيفا على خلفية داكنة قد يسقط حين يصير هو خلفية زر عليه نص أبيض.

وأرقام هذا الموقع الذي تقرؤه مثال جيد. حسبناها في ٥ سبتمبر ٢٠٢٦ من قيم اللوحة الحقيقية: نص المتن على الخلفية ١٧.٦ إلى ١، والنص الثانوي ٩.٢٥ إلى ١، والأزرق حين يكون لون نص ٧.٣٢ إلى ١، والنص الأخفت ٦.٢١ إلى ١. والآن الأزرق نفسه بوصفه خلفية: الأبيض عليه ٢.٧٢ إلى ١ فقط، أي ساقط. ولهذا تحمل لوحتنا أزرقين لا أزرق واحدا؛ الثاني أدكن والأبيض عليه يبلغ ٥.١٧ إلى ١، والأول باق كما هو للنص والأيقونات.

وفحصه عشر ثوان. في أدوات المطور بالمتصفح، انقر النص وافتح قيمة اللون، فنسبة التباين مكتوبة هناك بجوار منتقي الألوان.

وموضعان ينتجان أكثر إخفاقات التباين، وليس أي منهما نص المتن: النص فوق صورة، وهو بلا رقم واحد لأن إضاءة الصورة تختلف في كل نقطة، وعلاجه طبقة داكنة تحت النص؛ ونص الإرشاد داخل حقل النموذج، وهو أشحب نص في الصفحة غالبا ويسقط في أكثر التصاميم.

خمس دقائق بلوحة المفاتيح: أسرع اختبار تستطيعه

اترك الفأرة واضغط Tab. هذا الاختبار لا يحتاج أداة ويجد أكثر المشكلات الحقيقية، لأن ما لا يعمل بلوحة المفاتيح لا يعمل بقارئ الشاشة أيضا.

راقب أربعة أشياء:

• هل تصل بـTab إلى كل ما تنقره بالفأرة؟ القائمة المنسدلة، وإغلاق النافذة المنبثقة، والألسنة، والمرشحات.
• هل تعرف في كل لحظة أين أنت؟ إن كنت لا ترى حلقة التركيز فقد سقط الاختبار هنا.
• هل ترتيب الحركة يطابق ترتيب الصفحة؟ إن قفز Tab من العنوان إلى التذييل ثم عاد إلى الوسط، فالعناصر في HTML بترتيب غير ترتيب ظهورها.
• هل تعلق في مكان؟ والحالة الكلاسيكية نافذة منبثقة تُفتح ولا تُغلق بـEscape ولا يخرج Tab منها.

وأكثر ما يجده هذا الاختبار سطر CSS واحد: outline: none يُكتب في ملفات إعادة الضبط لأن حلقة المتصفح الافتراضية قبيحة. وحذفه يعني أن من يعمل بلوحة المفاتيح لم يعد يعرف أين هو. والصواب استبداله لا حذفه. وعلى هذا الموقع قاعدة واحدة عامة: :focus-visible بحلقة زرقاء من بكسلين وثلاثة بكسلات إزاحة عن العنصر. وكلمة focus-visible مهمة، لأن مستخدم الفأرة لا ينال حلقة بالنقر ومستخدم لوحة المفاتيح ينالها.

وهناك عنصر آخر لا يكاد يوجد في موقع فارسي وبناؤه ثلاثة أسطر: رابط التخطي إلى المحتوى. هو أول ما يبلغه Tab، ولا يُرى حتى ينال التركيز، وينقذ القادم بلوحة المفاتيح من المرور على القائمة كلها. وفي هذا القالب هو أول عنصر داخل body.

كيف نكتب النص البديل للصورة؟

النص البديل لا يصف شكل الصورة، بل يصف ما تفعله الصورة في تلك الصفحة. والصورة نفسها تأخذ نصين بديلين مختلفين في صفحتين مختلفتين.

صورة كرسي في صفحة منتج: «كرسي مكتب أسود بظهر شبكي، من زاوية ثلاثة أرباع». والصورة نفسها في مقال عن ألم الظهر: «الجلسة الصحيحة على كرسي المكتب». والصورة الزخرفية المحضة التي لا تضيف معنى تأخذ نصا بديلا فارغا، أي alt=""، ليتجاوزها قارئ الشاشة. وفراغ خاصية alt ليس كغيابها: فحين تغيب يقرأ بعض قارئات الشاشة اسم الملف، وIMG-20260415-WA0007.jpg شيء لا يحتاج أحد سماعه.

وثلاثة أشياء لا تكتبها: كلمة «صورة» في أوله، فقارئ الشاشة يقول أصلا إنها صورة؛ وكلمة مفتاحية محشورة، تفسد تجربة إنسان حقيقي لأجل ترتيب لن تناله؛ وفقرة من ثلاثة أسطر، فالنص البديل جملة واحدة، وإن لزم شرح أكثر فمكانه متن الصفحة.

وحالتان ينساهما الجميع: زر ليس فيه إلا أيقونة، كعدسة البحث أو علامة الإغلاق، لا نص فيه ليُقرأ فيلزمه اسم عبر aria-label؛ ومخطط أو إنفوغرافيك، لا يتسع ملخصه في alt وأرقامه يجب أن تكون في متن الصفحة أيضا.

وعلى هذا الموقع أخذت المسألة شكلا آخر. فالأشكال في أعلى هذه الصفحة وبين أقسامها ليست صورا: هي HTML وCSS. أي أن نصها نص حقيقي يقرؤه قارئ الشاشة، ويمكن تحديده وترجمته، وقطعه الزخرفية كالخطوط ورؤوس الأسهم مخفية عن قارئ الشاشة بـaria-hidden. وقد اتُّخذ هذا القرار للسرعة أولا وكانت الإتاحة فائدة جانبية. ودرس السيو الداخلي ينظر إلى المسألة نفسها من جهة البحث.

لماذا لا يكون div زرا أبدا؟

لأن <button> يمنحك مجانا أربعة أشياء لا يملك <div onclick> منها شيئا: يبلغه Tab، ويفعّله Enter وSpace، ويقول قارئ الشاشة «زر»، ويعرف المتصفح أصلا حالتي التعطيل والتركيز فيه. وإيصال div إلى الموضع نفسه يعني كتابة tabindex وrole ومستمع للوحة المفاتيح، ثم تنتهي إلى شيء يشبه الزر فحسب.

والمنطق نفسه يسري على بقية HTML، وهذه هي فكرة HTML الدلالي كلها. اربط عنوان الحقل بحقله بـ<label for> كي ينقل النقر على النص التركيز إلى داخل الحقل ويعرف قارئ الشاشة ما يطلبه الحقل؛ ونص الإرشاد داخل الحقل لا يحل محل العنوان لأنه يختفي بمجرد الكتابة. ورتّب العناوين، h1 ثم h2 ثم h3، لأن مستعمل قارئ الشاشة كثيرا ما يسمع قائمة العناوين أولا ثم يقرر منها إلى أين يذهب. وضع القائمة داخل <nav> والمتن داخل <main> ليقفز ذلك الشخص إلى المحتوى مباشرة. واكتب القائمة بـ<ul>، فيقول قارئ الشاشة «قائمة، ستة عناصر»، وهذه معلومة حقيقية تضيع مع كومة من عناصر div.

ونحن نلتزم بهذا في محرك الأشكال بهذا الموقع أيضا: أعمدة شكل المقارنة قائمة حقيقية لا سلسلة فقرات، وذلك بالضبط ليسمع القارئ كم بندا فيها. ودرس HTML يستعرض هذه العناصر واحدا واحدا.

ونذكر هنا فخ ARIA لكثرة ظهوره في مخرجات الأدوات: القاعدة الأولى في مواصفة ARIA نفسها ألا تكتب ARIA حين يكون في HTML عنصر لتلك المهمة. وrole="button" على div أسوأ من <button> لا أفضل.

الروابط داخل النص: لماذا لا يكفي اللون وحده

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

والجواب البديهي أن تضع خطا تحت كل رابط، وهذا الجواب يصنع مشكلة أخرى: فالقائمة والأزرار والبطاقات والشعار وأرقام الصفحات روابط أيضا، وكلها ستحمل خطا. فتزدحم الصفحة، ثم يعود من رأى ذلك ويلغي الخط كله.

والطريق الذي سلكناه في هذا الموقع، ويمكنك قراءته في المصدر، أربعة قرارات. أولا، a عليه text-decoration: none عاما، والروابط داخل النص وحدها تأخذ صنفا خاصا. ثانيا، خط ذلك الصنف خلفية متدرجة سمكها ١.٥ بكسل تصير ٢ بكسل عند hover وعند :focus-visible، فينال مستخدم لوحة المفاتيح التغذية الراجعة نفسها التي ينالها مستخدم الفأرة. ثالثا، يحمل ذلك الصنف box-decoration-break: clone، إذ بدونه يأخذ الرابط الذي ينكسر إلى سطر ثان الخط تحت قطعة واحدة فقط وتبقى الأخرى عارية. رابعا، هناك كتلة @media (forced-colors: active) تعيد الخط الحقيقي في وضع الألوان الإجبارية بويندوز، لأن ذلك الوضع يطرح الخلفيات الصورية، وإن لم تفكر فيه اختفى خطك المتدرج عمن يحتاجه أكثر من غيره بالضبط.

ولنقل الحد أيضا: هذه الأسطر الأربعة لا تصلح إلا الروابط داخل الفقرات. أما الرابط الذي هو صورة، والرابط الذي ليس فيه إلا أيقونة، والبطاقة التي تُنقر كلها، فلا تنال من هذا شيئا ويحتاج كل منها اسما مقروءا خاصا به.

كيف تعرف أنه أُصلح فعلا؟

لديك ثلاث أدوات وترتيبها مهم. أولا لوحة المفاتيح، ولا تحتاج شيئا وتلتقط الأكثر. ثانيا أدوات المطور في المتصفح: تريك نسبة التباين وشجرة الإتاحة، وهي ما يراه قارئ الشاشة؛ فإن ظهر زرك في تلك الشجرة بلا اسم فقد نلت جوابك. ثالثا قارئ شاشة حقيقي: فـNVDA مجاني على ويندوز، وVoiceOver مدمج في ماك وآيفون، وTalkBack في أندرويد. وعشر دقائق مع أحدها تعلّم أكثر من أي مقال.

والأدوات الآلية كقسم الإتاحة في Lighthouse مفيدة أيضا، ما دمت تعرف موضعها: هي تفحص القواعد الميكانيكية. فالنص البديل الذي يقول «صورة» يمر عندها. وترتيب التركيز لا يُقاس. وزر مكتوب عليه «المزيد» ولا يُعرف مزيد ماذا يمر من بينها. ونيل مئة يعني أن لا إخفاقات ميكانيكية عندك، لا أن الصفحة قابلة للاستعمال.

وكلمة عن إضافات شريط الإتاحة، تلك الصناديق العائمة التي تعد بجعل الموقع متاحا بسطر شفرة واحد: ما هو خطأ في HTML عندك لا تصلحه طبقة فوقه. فالـdiv الذي ليس زرا يبقى ليس زرا بعد تثبيت تلك الإضافة. ونحن لم نختبر أي منتج بعينه ولا نسمي أحدا؛ إنما نقول إن الطريق الناجع هو تغيير الترميز نفسه.