إتاحة الموقع تسهّل فهم المحتوى والتنقل وإكمال المهمة. قد يقرأ شخص بتكبير كبير، ويستخدم آخر لوحة المفاتيح، ويعتمد ثالث على قارئ شاشة، وقد يواجه أي مستخدم ضوءًا ضعيفًا أو جهازًا صغيرًا أو إصابة مؤقتة. في المواقع العربية، يضاف اتجاه النص والمحتوى المختلط إلى أسئلة القراءة والتركيز والنماذج. يقدم هذا الدليل خطة فحص للصفحات العامة ومسار التواصل. لا يمثل تدقيق امتثال رسميًا ولا يغني عن اختبار مختص مع المستخدمين عند الحاجة. الهدف تحويل المظهر الجيد إلى تجربة يمكن استخدامها، وربط كل ملاحظة بإجراء واختبار.
ابدأ بالمهام الأساسية وبمستخدمين مختلفين
اختر قراءة خدمة وفتح القائمة وتعبئة نموذج ومعرفة نتيجة الإرسال. جرّب المهمة بطرق إدخال وعرض مختلفة، ولا تختزل الإتاحة في تغيير الألوان. إذا كانت قائمة الموقع لا تعمل بلوحة المفاتيح، فقد يتعذر الوصول إلى صفحة متقنة أصلًا. اكتب ما يريد المستخدم فعله، والخطوة التي يتوقف فيها، والسبب المرصود. اختبر عينة من القوالب والوظائف، لا الصفحة الرئيسية فقط. تقدم دروس W3C WAI للإتاحة مراجع عملية للمكونات. استخدمها لتوجيه المراجعة، ثم اختبر تنفيذك الفعلي؛ وجود إطار واجهات أو مكتبة لا يثبت أن الصفحة المؤلفة منه تحافظ على إتاحة جميع المسارات.
اجعل البنية والعناوين مفهومة
العناوين تساعد على مسح الصفحة وفهم أقسامها والتنقل إليها باستخدام أدوات مناسبة. اجعل عنوان الصفحة يصف محتواها، والأقسام تتدرج بمنطق، ولا تستخدم عنوانًا لمجرد حجم خطه. القوائم والجداول تحتاج بنية تناسب وظيفتها، وليس ترتيبًا بصريًا فقط. راجع ما يظهر في شجرة الإتاحة عندما تكون هناك عناصر مخفية أو مكررة للزخرفة. لا تضف أوصافًا طويلة غير لازمة إلى كل مكون، فقد تجعل القراءة مرهقة. الهدف أن يستطيع القارئ معرفة أين هو وما الذي يليه، وأن تعكس البنية معنى المحتوى. يمكن لخريطة بسيطة للأقسام قبل التصميم أن تكشف تكرارًا أو قسمًا بلا وظيفة واضحة.
راجع اتجاه العربية والمحتوى المختلط
اضبط اتجاه الصفحة بما يناسب العربية، ثم افحص الأرقام والبريد والروابط وأسماء المنتجات داخل الفقرات والحقول. ترتيب يبدو صحيحًا في عنوان قصير قد ينكسر في جملة تجمع نصًا عربيًا ورمزًا أو رقم هاتف. لا تعالج كل محتوى مختلط بقلب ترتيب الأحرف يدويًا؛ استخدم بنية واتجاهًا مناسبين حسب العنصر. اختبر النسخ واللصق والقراءة على أجهزة مختلفة، مع التحقق من ترتيب التركيز في واجهة RTL. صورة الهاتف يسار النص أو يمينه لا تحدد وحدها الترتيب المنطقي. افحص ما يحدث عندما تختفي الأعمدة على الجوال، حتى لا ينتقل المحتوى إلى تسلسل يصعب فهمه رغم صحة منظر الكمبيوتر.
اختبر لوحة المفاتيح من البداية إلى النهاية
تنقل باستخدام Tab وما يناسب المكونات من مفاتيح، وراجع ترتيب الوصول وظهور التركيز وإمكانية تشغيل الروابط والأزرار. يجب ألا ينحصر المستخدم في عنصر أو يفقد موقعه بعد فتح قائمة أو نافذة. لا تجعل الضغط بالماوس الوسيلة الوحيدة لتفعيل مهمة أساسية. إذا استخدمت مكونًا مخصصًا، اختبر سلوكه ومعناه بدل افتراض أن إضافة دور تقني تعالج كل شيء. ابدأ بعناصر HTML الأصلية حيث تناسب الوظيفة، ثم حافظ على توقعات المستخدم. سجّل موضع التوقف بلقطة أو وصف، مع ربطه بالعنصر والحالة. فحص تفاعل واحد بعد التحميل لا يكشف جميع الحالات عند ظهور رسائل أو فتح طبقات جديدة.
اجعل التركيز مرئيًا ولا تحجبه الطبقات
قد يزيل التصميم حدود التركيز لأنها لا تناسب الشكل، فيصبح التنقل غير واضح لمن لا يستخدم مؤشر الفأرة. اختر معالجة مرئية تتناسب مع الهوية وتظهر على خلفيات المكونات المختلفة. راجع الأشرطة الثابتة والقوائم والأزرار العائمة التي قد تغطي العنصر عند الوصول إليه. إذا انتقل المستخدم إلى قسم داخل الصفحة، افحص ظهور العنوان وموقعه بعد التمرير. لا تضف حركة تجذب النظر لكنها تخفي موضع التركيز. التجربة المفيدة تسمح بمعرفة العنصر الحالي والتالي، مع احتفاظ الواجهة بسلوك واضح عند إغلاق نافذة أو رسالة. هذه تفاصيل تؤثر في إكمال المهمة حتى لو كانت النصوص والألوان سليمة.
راجع التباين والتكبير دون الاعتماد على العين وحدها
افحص تباين النص والأيقونات والعناصر المهمة بأداة مناسبة وبحسب معايير المراجعة التي يتبناها المشروع. لون يبدو مقروءًا على شاشة قد يضعف في أخرى أو فوق خلفية متدرجة. لا تستخدم اللون وحده لتمييز خطأ أو حالة؛ أضف نصًا أو رمزًا ذا معنى. كبّر المحتوى واختبر التفاف الفقرات والأزرار وعدم فقدان معلومات أو ظهور تمرير أفقي غير لازم. لا تمنع التكبير لمجرد ضبط تصميم الهاتف. إذا ضاقت مساحة، راجع التخطيط والمقاسات بدل تقليل الخط حتى يصعب قراءته. الهدف أن تبقى المعلومات والمهام متاحة، مع الحفاظ على توازن الهوية والوضوح عبر حالات العرض.
اكتب نصوصًا بديلة تعكس وظيفة الصورة
الصورة التي توضح منتجًا أو معلومة تحتاج وصفًا مناسبًا للسياق، بينما الزخرفة لا ينبغي أن تضيف ضوضاء إلى القراءة. إذا كانت الصورة رابطًا أو جزءًا من زر، يجب أن تكون الوجهة أو الوظيفة مفهومة. لا تملأ النص البديل بكلمات بحث أو تصف تفاصيل لا تخدم الموضوع. وصف «رسم يوضح مراحل الطلب» قد يناسب مفهومًا، لكن صورة مواصفات تحتاج معلومات يمكن عرضها نصيًا أيضًا. عند وجود رسم بياني، لا تعتمد على الصورة وحدها لنقل الخلاصة. راجع النص البديل عندما يتغير استعمال الأصل نفسه؛ صورة في بطاقة قد تختلف وظيفتها عن صورة داخل شرح مفصل.
اجعل النماذج قابلة للفهم والتصحيح
كل حقل يحتاج تسمية مفهومة، وتعليمات عند وجود صيغة أو قيد مهم، ورسالة خطأ تساعد على التصحيح. النص المؤقت داخل الحقل لا يغني دائمًا عن التسمية التي تبقى ظاهرة أثناء الكتابة. حدد الحقول المطلوبة بطريقة تتجاوز اللون، واحتفظ بالبيانات الصالحة عندما يفشل جزء من الإرسال حيث يناسب التنفيذ. تقدم دروس WAI للنماذج أساسًا لمراجعة هذه العلاقة. جرّب إرسالًا ناقصًا ثم تصحيحًا ثم نجاحًا، مع قارئ شاشة أو أدوات مناسبة عند الحاجة. لا تعتبر ظهور رسالة حمراء دليلًا أن المستخدم عرف الحقل أو استطاع الوصول إليه.
راجع رسائل النجاح والفشل والتحميل
بعد الضغط، يحتاج المستخدم معرفة ما يحدث: هل الطلب جارٍ أم حُفظ أم فشل؟ اجعل الرسالة متاحة ولا تعتمد فقط على تغيير شكل زر. إذا تعطلت الشبكة، وضح ما إذا كانت إعادة المحاولة آمنة وما البيانات التي بقيت. لا تعلن نجاحًا قبل تأكيد الحفظ، ولا تجعل صفحة فارغة نتيجة مسار غير متوقع. اختبر كيف تصل الرسائل لأدوات القراءة وكيف يؤثر ظهورها في التركيز. عندما يتغير جزء من الصفحة دون انتقال، قد يحتاج التنفيذ إشعارًا مناسبًا من دون إزعاج متكرر. الهدف وضوح النتيجة والقرار التالي، وليس إعلان كل حركة صغيرة بطريقة تجعل المهمة مرهقة.
عامل الحركة كإضافة اختيارية
بعض المستخدمين يفضلون تقليل الحركة، وقد تصعّب المؤثرات المستمرة القراءة أو تسبب عدم ارتياح. راجع الانتقالات والزخارف والشرائط المتحركة والتمرير المبرمج، وقدم سلوكًا مناسبًا لتفضيل تقليل الحركة. لا تُخفِ المحتوى عند إلغاء المؤثر، ولا تجعل حركة الزر تغير موضع الضغط. إذا توجد مادة متحركة مستمرة، ناقش وسيلة إيقاف مناسبة بحسب المكون والمعايير المتبعة. اختبر تغيير التفضيل قبل فتح الصفحة وأثناء استخدامها عندما يدعم التنفيذ ذلك. الحركة يمكن أن تعزز الهوية، لكن يجب أن تحافظ على المهمة والمعلومة. لا تخلط بين تعطيل كل التفاصيل البصرية وبين تقديم بديل أقل حركة ويحافظ على المعنى.
راجع القوائم والنوافذ والمكونات المخصصة
عند فتح القائمة أو نافذة، افحص الاسم والحالة والتركيز والإغلاق والعودة إلى العنصر المناسب. عنصر ظاهر فوق الصفحة قد يحتاج تعاملًا مختلفًا عن قائمة تنقل بسيطة. لا تستخدم سلوك نافذة للحوار في كل لوحة جانبية دون حاجة، ولا تعيد إنشاء عنصر قياسي لأن المكتبة تعرض شكلًا أجمل. اختبر Escape حيث يناسب المكون، والتفاعل خارج الطبقة، وتغير حجم الشاشة. قد تبقى قائمة مفتوحة أو عنصر مخفي يحتفظ بالتركيز بعد الانتقال إلى عرض أكبر. اكتب حالات المكون ضمن اختبار القبول، وليس فقط لقطة له وهو مفتوح. بهذا تصبح الإتاحة جزءًا من تصميم السلوك لا معالجة لاحقة للواجهة.
استخدم الأدوات الآلية وحدد حدودها
الأدوات الآلية قد تكشف تسميات مفقودة أو مشكلات تباين وبنية، لكنها لا تحكم وحدها على وضوح النص أو مناسبة ترتيب المهام أو صحة وصف صورة. اجمع الفحص الآلي مع اختبار يدوي ومسارات فعلية، وشارك مستخدمين أو مختصين عند الحاجة. لا تعلن امتثالًا كاملًا لأن تقريرًا لم يعرض أخطاء؛ قد تكون هناك حالات لم يُختبر فتحها أو محتوى يتغير. احتفظ بنتائج قابلة لإعادة الفحص، وميّز بين تنبيه يحتاج مراجعة وعطل ثابت. التقرير الذي يوضح النطاق والحدود أوثق من عبارة عامة بأن الموقع «متاح للجميع» دون وصف ما جرى اختباره وطريقة التحقق من السلوك.
رتب الإصلاحات حسب تعطل المهمة
| الملاحظة | الأثر | اختبار الإغلاق |
|---|---|---|
| زر لا يعمل بالمفاتيح | تعذر تنفيذ خطوة | تشغيل واضح وتنقل صحيح |
| خطأ نموذج غير مرتبط | صعوبة التصحيح | فهم الحقل والوصول إليه |
| نص ضعيف التباين | صعوبة القراءة | فحص الأداة والعرض الفعلي |
| حركة تخفي المحتوى | توقف القراءة | بديل ثابت يحافظ على المعلومة |
ابدأ بالموانع التي توقف مهمة أساسية ثم وسع المراجعة. سجّل القالب والصفحات المتأثرة، فقد يصلح تغيير مكون مشترك عدة مسارات. وفي المقابل، اختبر أثر التعديل على الحالات الأخرى حتى لا يصلح عرضًا ويكسر آخر.
أدخل الإتاحة في الكتابة والتصميم والتسليم
لا تجعلها مسؤولية المطور وحده. الكاتب يحدد وضوح الرسائل، والمصمم يراجع التباين والتركيز والمساحة، والمطور يبني المعنى والسلوك، والمراجع يختبر المهمة. أضف شروطًا مناسبة إلى نطاق المشروع ومواد التسليم، واحتفظ بمكونات وقواعد يستطيع الفريق استخدامها بعد النشر. راجع تصميم الواجهات وتجربة المستخدم ونموذج طلب تطوير الموقع لتوضيح المتطلبات. يمكن مشاركة مسار يحتاج مراجعة عبر التواصل. إدخال الإتاحة مبكرًا يقلل إعادة العمل، لكنه يحتاج متابعة عند إضافة محتوى أو مكون جديد حتى لا تتراجع جودة المسارات التي اختبرت سابقًا.
أسئلة شائعة عن إتاحة الموقع
هل إضافة شريط أدوات تحل الإتاحة؟
لا تُغني عن بنية وسلوك ومحتوى صحيحين. اختبر المهام الأساسية وما يقدمه أي مكون فعليًا بدل اعتبار وجوده دليلًا على حل جميع المشكلات.
هل الإتاحة تفرض تصميمًا بلا هوية؟
يمكن الحفاظ على الهوية مع تباين وقراءة وتركيز وحركة مناسبة. يحتاج ذلك قرارات تصميم واختبارات، وليس حذف جميع التفاصيل تلقائيًا.
ما أول مهمة أختبرها؟
ابدأ بالتنقل وقراءة الخدمة وإرسال نموذج، ثم وسع العينة للقوالب والحالات المختلفة. احتفظ بدليل للموانع والمسؤول عن إصلاحها.