قائمة فحص لموقع يسهل الوصول إليه

يمكنك مراجعة النقاط على الصفحات التي يستخدمها الناس أكثر: الصفحة الرئيسية، والتسجيل، والتواصل. بين القوسين رقم معيار النجاح في WCAG 2.2. النقطة 14 ليست شرطا للمستوى AA، لكنها مهمة في مجال المساعدة والدعم. النقطة 20 عن المستندات، مثل النشرات بصيغة PDF.

من الأفضل أن يتم الفحص بشخصين: واحد يختبر، والآخر يكتب ما لا يعمل وعلى أي صفحة. عند كل نقطة يمكنك كتابة «نعم» أو «لا» أو «لا أعرف». ما كان جوابه «لا أعرف» يمكنك عرضه على مصمم موقعك.

قابل للإدراك

1. لكل صورة نص بديل مناسب. النص البديل يقول ماذا تعني الصورة لمن لا يراها. إذا كانت الصورة للزينة فقط، يبقى النص البديل فارغا. في زر عليه صورة، يقول النص البديل ماذا يفعل الزر: «بحث»، لا «عدسة مكبرة». إذا كان في الصورة نص، كما في الشعار، فهذا النص موجود في النص البديل أيضا. (1.1.1)

2. للفيديوهات ترجمة مكتوبة على الشاشة. وهذا للبث المباشر أيضا، مثل ندوة عبر الإنترنت. هل يظهر في فيديو مسجل شيء مهم لا يقوله أحد، مثل رقم هاتف أو اسم على الشاشة؟ عندها هناك أيضا وصف صوتي: صوت يحكي ما يظهر في الصورة. (1.2.2 و1.2.4 و1.2.5)

3. للنص والأزرار تباين كاف. النص العادي له تباين 4.5:1 على الأقل مع الخلفية، والنص الكبير 3:1 على الأقل. وما يلزم للتعرف على زر أو حقل إدخال، مثل الإطار، له 3:1 على الأقل، وكذلك الأيقونات المهمة. في خطوة «التباين» في نظارة الألوان يمكنك اختيار لون النص ولون الخلفية، ورؤية هل يكفيان. من المهم الانتباه خاصة إلى النص الرمادي الفاتح والنص فوق صورة. (1.4.3 و1.4.11)

4. اللون ليس الإشارة الوحيدة. جملة «الحقول الإلزامية باللون الأحمر» لا تفيد من عنده عمى الألوان، لذلك من الأفضل إضافة كلمة أو علامة، مثل «(إلزامي)». ومن الأفضل أيضا وضع خط تحت الروابط داخل النص، فتظهر دون الاعتماد على اللون. (1.4.1)

5. التكبير ممكن دون أن يختفي شيء. عند التكبير حتى 200%: كل شيء ما زال يعمل. وعند التكبير أكثر حتى 400%: لا حاجة للتمرير إلى الجانب. التكبير يكون بالمفتاحين Ctrl و+ (على Mac: Cmd و+)، وغالبا يصل التكبير إلى 200% بعد أربع إلى ست مرات. من المهم الانتباه إلى نص يختفي أو يظهر فوق نص آخر أو فوق صورة. (1.4.4 و1.4.10)

6. العناوين عناوين حقيقية. العنوان معمول في الكود أيضا كعنوان، لا كنص كبير أو عريض فقط، حتى يتمكن مستخدمو قارئ الشاشة من الانتقال من عنوان إلى عنوان. العناوين في ترتيب منطقي، وتقول عن ماذا يتحدث الجزء الذي تحتها. عند لصق كود صفحة في فحص البنية، يظهر ما ينقص في بناء الصفحة، مثل العناوين. (1.3.1 و2.4.6)

قابل للتشغيل

7. كل شيء يعمل بلوحة المفاتيح وحدها. يمكنك النقر في شريط العنوان، ووضع الفأرة جانبا، والتنقل في الصفحة بالمفتاح Tab. وبالمفتاحين Shift+Tab يكون الرجوع. الوصول ممكن إلى كل رابط وزر وحقل، ولا يعلق التنقل في أي مكان. مشكلة معروفة: مشغل فيديو لا يمكن الخروج منه بالمفتاح Tab. (2.1.1 و2.1.2)

8. لا شيء يتحرك أو ينتهي دون أن يلاحظه أحد. هل يجب على شخص ما فعل شيء خلال وقت محدد، مثل بوابة للمراجعين تسجل الخروج تلقائيا بعد فترة؟ عندها يمكن إيقاف حد الوقت أو تمديده كثيرا، أو يصل تنبيه في الوقت المناسب. بعد هذا التنبيه هناك 20 ثانية على الأقل لطلب وقت أكثر بحركة واحدة. شريط صور يبدأ وحده ويتحرك أكثر من خمس ثوان، له زر للإيقاف المؤقت أو للإيقاف. (2.2.1 و2.2.2)

9. تخطي القائمة ممكن. القائمة موجودة في كل صفحة، ومع لوحة المفاتيح أو قارئ الشاشة يجب المرور فيها كل مرة إذا لم يكن التخطي ممكنا. طريقة معروفة هي رابط «الانتقال إلى المحتوى» في أعلى الصفحة، وأحيانا لا يظهر إلا عند أول ضغطة على Tab. إذا لم يظهر هذا الرابط، يمكنك سؤال مصمم موقعك كيف يمكن تخطي القائمة، فهناك طرق أخرى أيضا. (2.4.1)

10. العناوين ونصوص الروابط تقول عن ماذا تتحدث. علامة التبويب تذكر اسم الصفحة، مثل «التسجيل عند فريق الحي». الأهم في البداية، يعني ليس «مرحبا بكم في موقع … | التسجيل». الرابط يقول إلى أين يذهب، يعني ليس «انقر هنا» فقط. (2.4.2 و2.4.4)

11. مكانك في الصفحة واضح دائما. الرابط أو الزر الذي وصلت إليه بالمفتاح Tab يحصل على إطار واضح أو علامة أخرى. وهذا الإطار لا يختفي كله خلف شريط ثابت أو زر محادثة. والتنقل بالمفتاح Tab يمر في الصفحة بترتيب منطقي، مثل ترتيب القراءة: من الأعلى إلى الأسفل، ومن اليسار إلى اليمين. (2.4.3 و2.4.7 و2.4.11)

12. الضغط على الأزرار سهل، ودون سحب أيضا. الأزرار والروابط حجمها 24 في 24 بكسل CSS على الأقل (المقياس الذي يستخدمه مصممو المواقع)، أو حولها مساحة كافية. الرابط في وسط جملة لا يدخل في هذا. هكذا يقل احتمال أن يضغط شخص يده ترتجف على الزر الخطأ. وما يتم بالسحب، مثل نقل موعد في التقويم، ممكن أيضا بنقرة أو لمسة. (2.5.7 و2.5.8)

قابل للفهم

13. الموقع يعرف بأي لغة هو مكتوب. هكذا ينطق قارئ الشاشة الكلمات بشكل صحيح. هل هناك جزء من النص بلغة أخرى؟ عندها هذا محدد أيضا. هذا لا يظهر على الشاشة، لذلك يمكنك السؤال عنه عند مصمم موقعك. (3.1.1 و3.1.2)

14. نصوصك بلغة واضحة. المطلوب الكتابة على مستوى اللغة B1. أداة فحص اللغة البسيطة تشير إلى الجمل الطويلة والكلمات الصعبة في نص هولندي، وقائمة فحص B1 تساعدك أكثر. هذا ليس شرطا للمستوى AA: مستوى القراءة (3.1.5) من المستوى AAA.

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

16. النماذج تشرح ما المطلوب. لكل حقل تسمية ظاهرة. النقر على التسمية يدخل إلى الحقل أو يضع علامة في المربع، وهذا يساعد أيضا مع أزرار الاختيار الدائرية الصغيرة. رسالة الخطأ تقول بالكلمات أي حقل فيه خطأ وكيف يمكن إصلاحه، مثلا «يمكنك كتابة تاريخ الميلاد بصيغة يوم-شهر-سنة، مثل ⁦03-11-1985⁩». (3.3.1 و3.3.2 و3.3.3)

17. لا حاجة لملء أي شيء مرتين. هل يتكون النموذج من عدة خطوات؟ عندها ما كتبته من قبل موجود أصلا، أو يمكن نقله، مثلا بمربع علامة «عنواني البريدي هو نفس عنوان سكني». وبعد رسالة خطأ أيضا يبقى ما كتبته موجودا. أما كتابة كلمة مرور جديدة مرة ثانية للتأكد فهذا مسموح. (3.3.7)

18. تسجيل الدخول ممكن دون حفظ شيء في الذاكرة أو كتابته من جديد. يمكنك اختبار ذلك: نسخ كلمة مرور ولصقها في حقل تسجيل الدخول، والنظر هل يسمح لمدير كلمات المرور بملئها. مدير كلمات المرور برنامج يحفظ كلمات المرور. ويجب أن يكون لصق رمز الدخول من رسالة SMS ممكنا أيضا. إذا لم ينجح ذلك، ولم تكن هناك طريقة أخرى لتسجيل الدخول دون حفظ شيء في الذاكرة، فتسجيل الدخول لا يفي بالشرط. (3.3.8)

متين

19. الكود يخبر التقنيات المساعدة بما هو موجود. التقنيات المساعدة برامج تساعد الناس على استخدام موقع، مثل قارئ الشاشة. الأزرار والقوائم المصنوعة خصيصا لها اسم ودور (4.1.2). ورسالة مثل «تم إرسال رسالتك» محددة في الكود كرسالة، حتى يقرأها قارئ الشاشة دون الحاجة إلى الذهاب إليها (4.1.3). رؤية ذلك بنفسك صعبة: يمكنك السؤال عنه عند مصمم موقعك.

المستندات

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

تنبيه

• من المهم إجراء فحص كامل أيضا. قد ينجح الموقع في كل النقاط ومع ذلك تبقى فيه عوائق. للحصول على صورة كاملة يفحص مختص موقعك بكل شروط WCAG.
• ما لا يراه برنامج الاختبار، يحتاج إلى حكمك أنت. برامج الاختبار الآلية ترى مثلا هل النص البديل ناقص، لا هل هو صحيح. هذا يحكم عليه إنسان.
• الإضافة البرمجية (plug-in) ليست حلا. هناك إضافات تعد بجعل موقعك سهل الوصول دفعة واحدة. هذا لا ينجح، وقد تسبب مشاكل جديدة أيضا.
• من المهم الاختبار مع الناس الذين صنع الموقع من أجلهم. يمكنك أن تطلب من مراجع أو من شخص لديه خبرة من تجربته الشخصية طلب موعد على موقعك. ومتابعة أين لا تنجح الأمور. شخص واحد لا يتكلم باسم كل من عنده إعاقة، لذلك من الأفضل دعوة أشخاص لديهم إعاقات مختلفة.
• من المهم تسجيل ما وجدته. في بيان إمكانية الوصول يمكنك كتابة ما يعمل جيدا وما ستحسنه مؤسستك بعد. بأداة إعداد بيان إمكانية الوصول يمكنك إعداد بيان في خطوات قليلة.

لمعرفة المزيد

• جعل موقعك سهل الوصول: الخطوات لمؤسستك.
• ما هو WCAG؟
• شرح لكل مبدأ: قابل للإدراك، وقابل للتشغيل، وقابل للفهم، ومتين.
• Easy Checks من W3C ↗ (بالإنجليزية): فحوص بسيطة أكثر، خطوة بخطوة.