كيفية إجراء تدقيق إمكانية الوصول للامتثال WCAG

تم إنشاء WCAG (إرشادات الوصول إلى محتوى الويب) من قبل اتحاد الويب العالمي (W3C) وهو المعيار الأكثر شهرة عالميًا لإمكانية الوصول.

في هذه المقالة نحدد المهام المطلوبة لإجراء تدقيق للتحقق من الامتثال لمعيار WCAG 2.1.

تتعلق إمكانية الوصول بضمان إمكانية الوصول إلى محتوى موقع الويب الخاص بك ووظائفه من قبل جمهور أوسع.

فمثلا:

• حاجز الوصول المؤقت - فقد شخص ما نظارته!
• مشكلات الجهاز - توجد على جهاز مقيد مثل الهاتف المحمول
• الظرفية - ضوء الشمس الساطع ، الغرفة المظلمة ، إلخ
• الإعاقة الدائمة - لا بصر ، لا سمع ، مشاكل معرفية ، إلخ.
• مشكلات النطاق الترددي - اتصال بطيء جدًا

كما ترى ، هناك العديد من أشكال الإعاقة التي تحتاج إلى أخذها في الاعتبار.

يتم تقسيم إرشادات WCAG إلى ما يلي:

قبل استعراض كل قسم ، إليك قائمة بما ستحتاج إليه لإجراء الاختبار:

1. يمكن تصوره

• مجموعة مختارة من المستعرضات بما في ذلك النص فقط (مثل Lynx)
• أداة للتحقق من العلامات البديلة والعناوين وما إلى ذلك (مثل ScreamingFrog)
• قارئ الشاشة مثل NVDA
• أداة اختبار الوصول إلى موقع الويب
• أدوات تطوير Chrome
• الوصول إلى مجموعة مختارة من الأجهزة

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

تعد أداة الوصول WAVE واحدة من العديد من الأدوات التي يمكن استخدامها للعثور على المشكلات في هذا المجال:

في المثال أعلاه الصفحة تعمل بشكل جيد. يحتوي فقط على خطأ واحد و 5 أخطاء مع مشاكل تباين الألوان.

الخطأ الوحيد هو أن هذه الصفحة لا تشير إلى اللغة.

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

لنستعرض الإرشادات ومعايير النجاح.

التوجيه 1.1 - توفير بدائل نصية للمحتوى غير النصي

هل توجد بدائل نصية للمحتوى غير النصي؟

عندما يكون لديك محتوى غير نصي على الشاشة ، فأنت بحاجة إلى التحقق من وجود أوصاف لكل عنصر من هذه العناصر.

قبل أن نقدم أمثلة ، أود مناقشة ARIA وهي طريقة لتقديم أوصاف إضافية للعناصر ويجب استخدامها فقط عندما لا يكون HTML القياسي ممكنًا.

عند استخدام HTML ، تحصل تلقائيًا على التحكم في لوحة المفاتيح والتركيز وما إلى ذلك ، وهذا هو التفضيل ولكن يمكن استخدام ARIA كنسخة احتياطية.

ما هي ARIA؟

ARIA (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) هي طريقة لوصف المحتوى الذي لا يمكن وصفه بشكل كافٍ باستخدام HTML القياسي. الغرض الرئيسي منه هو برامج قراءة الشاشة. إذا كان بإمكانك استخدام HTML قياسي ، فهذا هو أفضل نهج لأنه سيوفر التركيز تلقائيًا على عنصر التحكم ولوحة المفاتيح. عندما لا يكون ذلك ممكنًا ، يكون ARIA هو البديل.

صور وصفية

الصورة الوصفية هي شيء يصور شيئًا ذا معنى. على سبيل المثال ، صورة لسيارة تويوتا بريوس.

إذا لم تتمكن من رؤية الصورة ، فيجب أن تكون هناك طريقة لوصف ما تمثله هذه الصورة حيث تأتي علامة Alt.

في الأنظمة الأساسية مثل WordPress ، يمكنك إضافة علامة alt عند تحميل الصورة:

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

سيجري الضفدع الصراخ تحليلًا لجميع الصور الموجودة على موقع الويب الخاص بك ويعرض الصور التي لا تحتوي على علامات بديل أو علامات بديلة مكررة أو علامات بديلة طويلة جدًا أو علامات بديلة قصيرة جدًا!

يمكنك مشاهدة الصور بجانب تفاصيل الصورة أيضًا:

صورة زخرفية

الصورة الزخرفية هي صورة موجودة لتحسين التصميم ولكن لا يوجد شيء في الصورة يستحق الوصف!

يجب أن تستخدم الصور المزخرفة خاصية الخلفية CSS ما لم يكن هناك سبب وجيه لاستخدام علامة "img". إذا رأى قارئ الشاشة خاصية CSS الخلفية ، فإنه يعرف أنه يتجاهل الصورة.

فيما يلي مثال لصورة موصوفة كصورة خلفية في موقع My Emergency Doctor على الويب في أستراليا:

هذا هو الكود وراء هذا:

نظرًا لأن هذه الصورة غير مدرجة كـ <img> ، فإنها تستخدم الدور = img للسماح لقراء الشاشة بمعرفة أن هذه صورة. يستخدم "تسمية Aria" لإعطاء وصف دقيق جيد للصورة. كما أنه يعرّف الصورة على أنها "صورة خلفية".

ملاحظة: إذا كنت تستخدم علامة "img" لصورة خلفية ، فأنت بحاجة إلى تحديد علامة alt فارغة مثل alt = ""

متى يجب استخدام <img> بدلاً من لون الخلفية؟

عندما تكون الصورة جزءًا مهمًا من المحتوى ، فاستخدم <img>. على سبيل المثال ، إذا كانت لديك صورة منتج ، فهذه هي <img>. يمكنك أيضًا الحصول على صور هي مجرد صور خلفية مستخدمة لأغراض الزخرفة وليس من المنطقي وصفها بأنها صور (ستفهرسها Google).

في المثال أعلاه ، يمكنك أن تتساءل عما إذا كان يجب تعريف الصورة المعروضة على أنها img لكنها صورة مخزون وقرروا تعريفها كصورة خلفية بدلاً من ذلك ، وهو أمر جيد.

ملاحظة: <img> هي علامة HTML لكن صورة الخلفية هي نمط CSS تستخدمه.

ضوابط واجهة المستخدم

هناك العديد من عناصر التحكم في واجهة المستخدم التي تتطلب بعض النصوص لوصف ماهيتها.

على سبيل المثال ، زر أو عنصر تحكم نموذج.

يستخدم الزر للمساعدة في إكمال الوظيفة. يمكن أن يكون زرًا يحتوي على رمز فقط وآخر يحتوي على نص في الزر. كلاهما يمكن التعامل معه بشكل مختلف.

باستخدام ARIA ، يمكنك تحديد "role = button" ولكن باستخدام علامة HTML القياسية ، يمكنك استخدام علامة <button>. التي ينبغي لأحد أن تستخدمها؟

إليك مثال على زر به علامة X فقط فيه يتطلب منا إنشاء "تسمية أريا" لوصف ما يفعله الزر.

<button aria-label = ”إغلاق” onclick = ”myDialog.close ()”> X </button>

فيما يلي قائمة بعناصر تحكم واجهة المستخدم النموذجية التي ستحتاج إلى اختبارها:

إذا كنت تستخدم النماذج ، فأنت بحاجة إلى التأكد من تسمية كل حقل بشكل صحيح. فيما يلي مثال على التصنيف الجيد:

<label for = ”fname”> الاسم الأول: </ label> <br>

<input type = ”text” id = ”fname” name = ”fname”> <br>

<label for = ”lname”> اسم العائلة: </ label> <br>

<نوع الإدخال = ”text” id = ”lname” name = ”lname”>

</form>

ملاحظة: بالنسبة للنماذج ، يجب عليك أيضًا التأكد من:

• حدد الحقول الإلزامية بوضوح. إذا كان الحقل إلزاميًا ، فسيحتاج أيضًا إلى تسميته بشكل صحيح في html.
• هناك تعليمات للمستخدم (عادة في الجزء العلوي من النموذج)
• يحصل المستخدمون على المساعدة عندما يرتكبون خطأ في إكمال حقل النموذج (على سبيل المثال ، تنسيق التاريخ غير الصحيح ، هذا هو ما تحتاج إلى إدخاله).

كلمة التحقق

قد يكون هذا إشكاليًا للغاية اعتمادًا على كيفية تنفيذه. على سبيل المثال ، عندما يتم عرض الصور ويطلب منك تحديد الصورة التي تحتوي على إشارات المرور!

سنراجع التنفيذ ونقدم الاقتراحات ذات الصلة.

محتوى الوسائط المتعددة

يحتاج الفيديو / الصوت إلى وصف على الأقل لتحديد موضوع الفيديو / الصوت.

الروابط

تريد التأكد من أن الروابط تبرز بوضوح على الصفحة (على سبيل المثال لون مختلف) وأنها تستخدم نص الرابط ووصف الارتباط ذي الصلة.

التوجيه 1.2 - وسائل الإعلام المعتمدة على الوقت

يدور هذا المجال حول تلبية احتياجات محتوى الفيديو والصوت الذي يجب جعله أكثر سهولة.

هل هناك نسخ متاح للصوت المسجل مسبقًا فقط أم الفيديو فقط ؟

نسخ الفيديو هو ترجمة صوت الفيديو إلى نص. لا يتضمن النسخ المعلومات الصوتية التي تصف أشياء مثل العناصر المرئية المعروضة في الفيديو. يتم التعامل مع هذا بشكل منفصل.

نصيحة النسخ!

Rev.com هي خدمة رائعة لإنشاء تسميات توضيحية / نسخ للصوت / الفيديو الخاص بك. حتى أنها توفر خدمة شرح مباشر لفيديو Zoom.

هل هناك تسميات توضيحية متاحة للصوت المسجل مسبقًا؟

التسمية التوضيحية هي نص يظهر داخل الفيديو لإعلام المستخدم بما يقوله الشخص.

هل يوجد وصف صوتي أو وسائط بديلة (مسجلة مسبقًا) ؟

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

على سبيل المثال ، يمكن أن يصف الوصف الصوتي ما يحدث في الخلفية عندما يتحدث شخص ما بحيث يمنح المستخدمين بعض السياق.

فيما يلي مثال على النسخ الصوتي الذي يتضمن وصفًا صوتيًا.

يعد هذا أمرًا رائعًا لزائر موقع الويب الخاص بك ولكنه مفيد أيضًا لتحسين محركات البحث!

نصيحة حول اختيار لاعب يمكن الوصول إليه:

تريد التأكد من أن مشغل الفيديو الذي تستخدمه يدعم ما هو مطلوب لإمكانية الوصول:

1. يدعم التسميات التوضيحية المغلقة
2. يمكن تبديل وصف الصوت بين تشغيل / إيقاف
3. يمكن استخدام التحكم في الكلمات الرئيسية في مشغل الوسائط
4. مشغل الوسائط يعمل على أجهزة ومتصفحات مختلفة
5. يمكن الوصول إلى جميع الضوابط.

هل هناك تسميات توضيحية للصوت الحي ؟

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

هناك أدوات متاحة لتعليق الفيديو المباشر والصوت تلقائيًا.

هل يوجد وصف صوتي للوسائط المتزامنة المسجلة مسبقًا؟

هذا للوسائط التي تحتوي على الفيديو والصوت. نريد معلومات صوتية ترافق وسائل الإعلام.

التوجيه 1.3 - قابل للتكيف - تقديم المعلومات بتنسيق يمكن أن يفهمه البرنامج.

تحتاج إلى التأكد من أن ما يمكنك تفسيره بصريًا من خلال النظر إلى شيء ما موصوف برمجيًا بحيث يمكن تفسيره بشكل صحيح بواسطة برامج مثل برامج قراءة الشاشة.

هل هناك بنية منطقية للمحتوى وهل من السهل فهم العلاقة مع كل جزء من المحتوى داخل هذا الهيكل؟

عند عرض صفحة ويب ، عادة ما ترى العناوين والفقرات والمحتوى الغامق والجداول وما إلى ذلك. وعندما تعرض تفاصيل جدول ، ترى العناوين وترى بوضوح الصف المناسب لأي عنوان.

إليك ما ستحتاج إلى مراجعته:

• هل المحتوى مقسم إلى عناوين فرعية؟
• هل القوائم والجداول وما إلى ذلك تستخدم عند الاقتضاء؟
• هل هناك HTML صحيح مستخدم للعناصر الهيكلية الأخرى في جميع أنحاء المحتوى؟
• هل هناك تسميات ونص بديل مستخدم على النحو المطلوب (على سبيل المثال في النماذج؟)

نصيحة

نقطة البداية الجيدة هي اختبار موقع الويب الخاص بك باستخدام أداة مدقق تتحقق من صحة html (مثل مدقق W3.org html).

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

للتغلب على هذه المشكلة ، تتم إضافة كلمة "مطلوب" أيضًا إلى تسمية الاسم الأخير وهو حقل مطلوب.

 <label for = "lastname" class = "required"> اسم العائلة (مطلوب): </ label>
<نوع الإدخال = "text" size = "25" value = "" />
<style type = "text / css">
  .مطلوب {
    لون احمر؛
  }
</style>

هل هناك ترتيب محتوى له معنى؟

• عند عرض صفحة ويب ، سترى شريط تنقل ، ثم بعض المحتويات والعناوين والعناوين الفرعية وفقرات النص. تريد التأكد من تقديم هذا بترتيب منطقي.
• استخدم أنماط العناوين للإشارة إلى أهمية الأقسام. عادةً ما يكون لديك نمط <h1> واحد فقط لتحديد صفحة المحتوى ، وبعد ذلك قد يكون لديك عدة H2 و H3 وما إلى ذلك.
• اجعل التنقل منفصلًا عن المحتوى (على سبيل المثال ، حدد التنقل باستخدام <nav>)
• استخدم لغة تأشير النص الفائق

إليك بنية نموذجية للعناوين ذات معنى:

هل يمكن للمستخدمين فهم المحتوى عندما لا يستطيعون إدراك الشكل أو الحجم أو استخدام المعلومات المتعلقة بالشكل أو الحجم المكاني؟

أسهل طريقة لشرح ذلك هي بمثال:

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

هل يعمل الموقع بشكل جيد في الوضع الرأسي والأفقي؟

يجب أن يكون موقع الويب قادرًا على التكيف مع الوضع الرأسي أو الأفقي دون فقدان المعنى.

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

هل مدخلات النماذج موصوفة بشكل صحيح؟

والغرض من ذلك هو ضمان وجود معلومات كافية برمجيًا حول أي حقل يجب إكماله في نموذج.

وإذا كان من الممكن تمكين الملء التلقائي حتى لا يضطر المستخدم لإكمال كل شيء!

هل يمكن تحديد الغرض من العناصر على الصفحة برمجيًا؟

مثال على ذلك هو استخدام عنصر "الدور" ARIA لأقسام موقع الويب.

على سبيل المثال ، يمكن وصف لافتة تحتوي على شعار / اسم شركة وما إلى ذلك على أنها "دور = لافتة".

أو استخدام تسميات الإدخال في نماذج البريد الإلكتروني والاسم والعنوان وما إلى ذلك.

هذه هي الطريقة التي ترى بها هذا في HTML:

<نوع الإدخال = ”البريد الإلكتروني>

هل هناك نسخة نصية من أي رسم بياني؟

إذا كان هناك أي محتوى من نوع الرسم البياني ، فستريد أن يكون لديك جدول يلخص موضوع هذا المحتوى.

التوجيه 1.4 - انظر واستمع إلى المحتوى

يتعلق الأمر بتسهيل رؤية الأشخاص وسماعهم للمحتوى.

هل توجد بدائل نصية عند استخدام اللون لنقل المعلومات؟

تخيل أن لديك نموذجًا وتم عرض حقل مطلوب باللون الأحمر.

هذا لا يعني الكثير لقارئ الشاشة!

لكن يمكنك إضافة كلمة "مطلوب" على الجدول كما في المثال أدناه:

<label for = ”lastname” class = ”required”> اسم العائلة (مطلوب): </label> <input id = ”lastname” type = ”text” size = ”25 ″ value =” ”/> <style type = ”text / css”>. مطلوب {color: red؛ } </style>

هل هناك آلية لإيقاف الصوت مؤقتًا أو إيقافه إذا تم تشغيله لأكثر من 3 ثوانٍ؟

إذا كنت تستخدم قارئ شاشة ويتم تشغيل مقطع فيديو تلقائيًا في نفس الوقت ، فستسمع صوتين!

من الناحية المثالية ، لن يكون هناك تشغيل تلقائي للفيديو الذي يحل هذه المشكلة.

إذا كان هناك تشغيل تلقائي ، فتأكد من أنه أقل من 3 ثوانٍ وإذا لم يكن كذلك ، فتأكد من وجود طريقة للتحكم في صوت تشغيل الفيديو.

هل يوجد تباين جيد بين النص والصور / اللون في الخلفية؟

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

على سبيل المثال ، لن يرى الأشخاص المكفوفون بالألوان فرقًا بين الأحمر والبرتقالي والأصفر والأخضر وتحتاج إلى تلبية احتياجاتهم أيضًا.

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

هل هناك تباين كاف بين لون النص وخلفيته؟ يمكن أن تساعدك أداة مثل مدقق تباين الألوان في اكتشاف ذلك!

لون الخلفية على اليسار ثم لون النص على اليمين. النتيجة في المنتصف.

التوصية هي أن يكون التباين على الأقل 4.5: 1 أو 3.1 عندما يكون النص كبيرًا (على سبيل المثال 18 نقطة أو 14 نقطة غامق).

تأكد أيضًا من استخدام أدوات أخرى غير الألوان لتوصيل المحتوى والمعلومات المهمة على موقعك.

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

هل يمكن تكبير النص ويظل موقع الويب الخاص بك يعمل كالمعتاد؟

أحد الخيارات الواضحة هو مجرد تكبير النص على الشاشة لمساعدة شخص يعاني من إعاقة بصرية.

لكنك تريد أن يعمل موقع الويب كالمعتاد إذا قام المستخدم بزيادة حجم النص.

على سبيل المثال ، عندما يقوم المستخدم بتكبير النص بنسبة تصل إلى 400٪ ، فإنك تحتاج إلى التأكد من عدم فقد أي معلومات.

هذه صورة من W3.org. أنا متأكد من أنك لا تريد أن يبدو موقع الويب الخاص بك مثل الموقع الموجود على اليمين عند تكبير النص.

مطلب WCAG 2.1 هو أنه يجب أن تكون قادرًا على التكبير بنسبة 200٪ دون أي مشاكل.

هل يتم تجنب صور النص ما لم يكن ذلك ضروريًا؟

قد يكون لديك شعار يحتوي على نص (مثل اسم شركتك) وهو مقبول.

لكن ماذا عن صور النص؟

إذا كانت لديك صورة للنص ، فعليك ، على الأقل ، تقديم تسمية تصفها.

لكن من الأفضل لك تجنب هذا النوع من الصور ما لم:

• ومن الضروري
• إنه قابل للتخصيص

هل الموقع مستجيب؟

من الطبيعي أن تقوم بالتمرير لأسفل لرؤية صفحة الويب كاملة ولكن ليس للتمرير إلى اليمين أو اليسار.

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

هل هناك تباين كاف للمحتوى غير النصي؟

يجب أن تحتوي الألوان المجاورة على نسبة تباين لا تقل عن 3: 1

هذا المطلب مخصص للأشخاص الذين يعانون من ضعف البصر نسبيًا.

هل يمكن تعديل التباعد / ارتفاع الخط دون أي خسارة في الأداء؟

• يجب أن يكون ارتفاع السطر (تباعد الأسطر) 1.5 مرة على الأقل من حجم الخط ؛
• يجب أن يكون التباعد بين الفقرات التالية ضعف حجم الخط على الأقل ؛
• يجب أن يكون تباعد الأحرف (التتبع) على الأقل 0.12 ضعف حجم الخط ؛
• يجب أن يكون تباعد الكلمات 0.16 ضعف حجم الخط على الأقل.

هل يتم عرض المحتوى بشكل صحيح عند التمرير أو التركيز؟

عندما تركز على عنصر (على سبيل المثال ، اضغط عليه) أو تحوم فوقه ، ترى محتوى إضافيًا.

على سبيل المثال ، تحوم فوق زر وتظهر نافذة منبثقة.

… أو يتم عرض قائمة فرعية.

يجب أن يكون هذا المحتوى:

قابل للرفض - على سبيل المثال ، إذا قمت بالنقر فوق Escape ، فلن يتم عرض المحتوى بعد الآن.

قابل للتمرير - عند التمرير فوق المحتوى ، يتم عرض المحتوى طالما كان الماوس فوق المشغل.

مستمر - هذا مزيج من الاثنين. يظل المحتوى مرئيًا حتى يتجاهله المستخدم ، أو يحرك المستخدم الماوس بعيدًا أو لم يعد المحتوى يحتوي على معلومات مهمة.

ملاحظة: لا ينطبق هذا على عندما يتم عرض عنصر HTML مثل العنوان عندما تحوم فوق شيء ما (مثل صورة).

هل الخط مقروء؟

بعض الخطوط / المحارف أكثر قابلية للقراءة من الآخرين. هناك تفضيل تجاه serif أو sans serif ولكن هذا ليس إلزاميًا. الجزء الرئيسي هو أنه يمكن قراءته.

2. قابلة للتشغيل

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

التوجيه 2.1 - الوصول إلى لوحة المفاتيح

يستخدم العديد من المستخدمين لوحة مفاتيح بدلاً من الماوس أو لوحة التتبع ، بما في ذلك المستخدمين الذين يعانون من حواجز إمكانية الوصول أو أولئك الذين يستخدمون قارئ الشاشة.

هذا هو السبب في أنه يجب الوصول إلى جميع الوظائف على موقع الويب الخاص بك عبر لوحة المفاتيح - الروابط والأزرار والنماذج وعناصر التحكم الأخرى.

هل يمكن الوصول إلى كل شيء عبر لوحة المفاتيح؟

حان الوقت الآن للتوقف عن استخدام الماوس واستخدام لوحة المفاتيح فقط.

أنت تتحقق من:

هل كل شيء يتبع ترتيبًا منطقيًا للمضي قدمًا أو للخلف (باستخدام مفتاح Tab للتقدم للأمام وتحويل علامة التبويب للعودة).

عندما تكون على زر معين ، قسم وما إلى ذلك ، هل ترى أن هذا العنصر مميز؟ في المثال التالي ، من الواضح أننا قمنا بتبويب "المقالات".

هل يمكن الوصول إلى كل شيء باستخدام مفتاح Tab وعندما تضغط على مفتاح الإدخال عندما يكون لديك تركيز ، هل يقوم بتنشيط الإجراء؟

ملاحظة: إذا ظهرت نافذة منبثقة ، فأنت بحاجة إلى أن تكون قادرًا على التنقل في هذا أيضًا.

هل يمكنك تخطي العنوان؟

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

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

إذا ضغطت على علامة تبويب ثانية ، فستنتقل إلى رابط "التخطي إلى التنقل". إذا ضغطت على زر الإدخال ، يتم نقلك إلى الملاحة.

إذا ضغطت على علامة التبويب مرة أخرى ، فانتقل إلى "تخطي إلى التنقل". إذا حددت هذا ، فستنتقل مباشرة إلى التنقل.

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

2.1.2 هل هناك أي مواقف تصل فيها إلى طريق مسدود مع لوحة المفاتيح (فخ لوحة المفاتيح) ؟

يمكنك الانتقال إلى مكان ما على موقع الويب ولا يمكنك الانتقال إلى الأمام أو الخلف.

يُعرف هذا باسم فخ لوحة المفاتيح. مع استمرار الأغنية ... عالقة في الفخ ، لا يمكن النظر إلى الوراء….

هل هناك بديل لاختصار لوحة المفاتيح يتم تنفيذه باستخدام حرف؟

إن وجود اختصار لمفتاح الحرف مع شخص يعتمد على لوحة مفاتيح للتنقل ليس جيدًا لأنه قد ينتهي به الأمر بالضغط عليه عن طريق الخطأ.

لذلك نحن بحاجة إلى توفير بديل.

أ) القدرة على إعادة تعيين هذا الحرف إلى اختصار آخر

ب). أطفئه

ج). إنها نشطة فقط عندما تركز على هذا. وهذا يعني أنك إذا استخدمت الاختصار فلن يحدث شيء إلا إذا كنت تستخدمه بالفعل!

المبدأ التوجيهي 2.2 - ما يكفي من الوقت

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

هل التوقيت قابل للتعديل؟

يعد إيقاف تشغيل التوقيت أمرًا مثاليًا ، لكن القدرة على تمديده (أي عندما يقترب الحد الزمني تقريبًا) أو تعديله على الوقت الجديد أمر جيد.

هل يستطيع مستخدم الموقع إيقاف أو إيقاف أو إخفاء نقل المحتوى أو الوميض أو التحديث التلقائي؟

إذا كان يتحرك / يومض أو يتجول وهو:

أ). يبدأ تلقائيًا

ب). يدوم أكثر من 5 ثوان

ج). يتم تقديمه بالتوازي مع محتوى آخر

ثم هناك آلية للإيقاف المؤقت أو الإيقاف أو الحذف.

نفس المشكلة مع محتوى التحديث التلقائي.

المبدأ التوجيهي 2.3 - النوبات وردود الفعل الجسدية

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

هل "الومضات" على الشاشة تفي بالإرشادات؟

القاعدة الأولى هي تجنب أي كائنات وميض ولكن إذا لم يكن ذلك ممكنًا ، فتأكد من عدم وميضها أكثر من 3 مرات في أي ثانية واحدة أو وميض أقل من عتبات الوميض العامة أو الحمراء.

المبدأ التوجيهي 2.4 - صالح للملاحة

يتعلق الأمر بتسهيل التنقل عبر موقع الويب.

هل يمكنك تخطي الكتل المتكررة؟

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

هل كل الصفحات معنونة بشكل صحيح؟

أنت بحاجة إلى عناوين وصفية جيدة في جميع الصفحات. هذا جيد لإمكانية الوصول ولكنه جيد أيضًا لتحسين محركات البحث.

يمكنك استخدام Screaming Frog لإلقاء نظرة على عناوين الصفحات كلها في مكان واحد:

هل يحتفظ ترتيب التركيز بالمعنى؟

إذا كنت تقوم بالتبويب عبر المحتوى ولكنك تقوم بالتبويب بترتيب لا معنى له ، فستحتاج إلى إصلاح ذلك.

هل يمكنك تحديد الغرض من الارتباط من نص الرابط؟

"انقر هنا" ليس نصًا أساسيًا مفيدًا جدًا. يجب أن يكون لديك كلمات تصف المحتوى الذي سينتقل إليه الرابط.

ما هو نص الرابط؟

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

هل هناك أكثر من طريقة لتحديد موقع صفحة الويب؟

وهنا بعض الأمثلة:

• خريطة الموقع - احصل على قائمة بجميع الصفحات الموجودة على خريطة الموقع
• روابط سريعة - لديك روابط سريعة للوصول إلى الصفحات المهمة
• بحث - ابحث للعثور على صفحة ذات صلة

هل تركيز لوحة المفاتيح مرئي؟

السؤال يقول كل شيء! تمت تغطية هذا أيضًا في أحد المبادئ التوجيهية السابقة. عندما تنتقل إلى مكان ما ، يجب أن تكون قادرًا على رؤية التركيز بشكل مرئي في تلك المنطقة.

هل تم تحديد الرأس والنص والتذييل بوضوح؟

يجب أن تكون التقنيات المساعدة قادرة على تحديد الرأس والتذييل والجسم بوضوح. هناك علامات html تحدد هذه المناطق.

التوجيه 2.5 طرائق المدخلات

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

هل يمكن تشغيل الوظائف التي تستخدم إيماءات متعددة النقاط أو قائمة على المسار بمؤشر واحد دون استخدام الإيماءات (ما لم يكن ضروريًا)؟

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

هل هناك طريقة سهلة للخروج من إجراء بدأ بمؤشر واحد؟

ما هو المؤشر الفردي؟

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

يجب أن يكون أحد العناصر التالية على الأقل صحيحًا:

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

هل التسمية المرئية للمكون تتطابق مع الاسم البرمجي لهذا المكون؟

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

هل يمكن أيضًا تشغيل الوظائف التي يتم تشغيلها بالحركة أو الإيماءات بواسطة عناصر تحكم أخرى في واجهة المستخدم؟

إذا قمت بهز شيء ما أو إمالته للتحكم فيه ، فهل يمكنك استخدام عنصر تحكم آخر في واجهة المستخدم للوصول إلى هذه الوظيفة؟

مفهوم

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

3.1 مقروءة

نحن نغطي ما يلي:

هل يمكن تحديد لغة الصفحة أو أقسام الصفحة برمجيًا؟

من المفترض أن ترى شيئًا كهذا في بداية أي صفحة. يشير "لانغ" إلى لغة الصفحة.

<html class = ”ie7 ″ lang =” en-US ”>

إذا تغيرت اللغة على الصفحة ، فستحتاج إلى أن تكون قادرًا على تحديد ذلك أيضًا.

3.2 يمكن التنبؤ بها

تريد أن تعمل واجهة المستخدم الخاصة بك بطريقة يمكن التنبؤ بها ، ولا توجد مفاجآت!

هل التصفح بنفس الترتيب على الصفحات؟

يجب أن يكون موضع التنقل في صفحة واحدة هو نفسه في جميع الصفحات الأخرى ما لم يقم المستخدم بإجراء تغيير على التنقل.

هل يتم تسمية المكونات والصور وما إلى ذلك بشكل متسق عبر الصفحات؟

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

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

3.3 مساعدة الإدخال

يتعلق هذا بمساعدة المستخدمين على تجنب الأخطاء أو التعافي منها:

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

التسميات - عندما يضطر المستخدمون إلى إدخال نص ، توجد تسمية مرتبطة تصف الحقل.

خطأ في الإدخال - إذا ارتكب المستخدم خطأ ، فهناك اقتراح حول كيفية إصلاحه.

منع الأخطاء - يجب أن تكون قادرًا على التراجع أو الحصول على بعض الملاحظات حول الخطأ أو أن يكون لديك القدرة على التأكيد قبل الإرسال.

4. قوي

بالإضافة إلى إمكانية الوصول إليها ، يحتاج المحتوى الخاص بك إلى دعم مجموعة متنوعة من المتصفحات والتقنيات وما إلى ذلك.

التوافق مع التوجيه 4.1

يتضمن ذلك الاختبار مع مجموعة متنوعة من وكلاء المستخدم والتقنيات المساعدة. الاختبار الأولي الجيد لهذا هو استخدام أداة التحقق من العلامات W3C لمعرفة ما إذا كانت هناك أية أخطاء (أي أنها تتحقق من صحة بنية / بناء جملة html و xhml وما إلى ذلك).

فيما يلي مثال على الإخراج:

تحتاج أيضًا إلى اختبار مقارنة بمتصفحات متعددة للتأكد من تحميل المحتوى بشكل صحيح.

ومن المفيد أيضًا تحميل الصفحة في متصفح نصي فقط (مثل Lynx).

هل يمكن تحليل جميع البيانات بشكل صحيح؟

هل توجد علامات بداية ونهاية مناسبة داخل أقسام المحتوى بحيث يسهل تحديد مكان بداية القسم ونهايته؟

هل العناصر متداخلة بشكل صحيح؟

هل هناك سمات أو معرفات مكررة تجعل من الصعب تمييز العناصر؟

هل يمكن فهم جميع عناصر التحكم في واجهة المستخدم من خلال التقنيات المساعدة؟

فيما يلي بعض الأمثلة على عناصر التحكم وما تحتاج إلى معرفته:

• خانة الاختيار - هل تم فحصها أم لا؟
• التركيز - ما العنصر الذي تم التركيز عليه وهل يمكن فهمه برمجيًا (وليس فقط بصريًا)؟

هل يتم إعلام المستخدمين برسائل الحالة التي لا يتم التركيز عليها بطريقة لا تؤدي بالضرورة إلى مقاطعة العمل؟

تخيل لو كنت تتصفح صفحة وأثناء وجودك على تلك الصفحة ظهر لافتة أعلى موقع الويب تعلن عن عملية بيع.

هل النماذج مصممة بالطريقة الصحيحة؟

لإتاحة الوصول إلى النماذج ، ستحتاج إلى التأكد من تمكين ما يلي:

• القدرة على استخدام علامة التبويب للتنقل عبر النموذج
• القدرة على استخدام علامة التبويب للتنقل عبر النموذج

<form>

<label for = ”fname”> الاسم الأول: </ label> <br>

<input type = ”text” id = ”fname” name = ”fname”> <br>

<label for = ”lname”> اسم العائلة: </ label> <br>

<نوع الإدخال = ”text” id = ”lname” name = ”lname”>

</form>

• الحقول الإلزامية واضحة المعالم. إذا كان الحقل إلزاميًا ، فسيحتاج أيضًا إلى تسميته بشكل صحيح في html.
• هناك تعليمات للمستخدم (عادة في الجزء العلوي من النموذج)
• يحصل المستخدمون على المساعدة عندما يرتكبون خطأ في إكمال حقل النموذج (على سبيل المثال ، تنسيق التاريخ غير الصحيح ، هذا هو ما تحتاج إلى إدخاله).

ملخص

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