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

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

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

1. مصائد لوحة المفاتيح

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

نصائح:

• المحتوى الرئيسي: ضع في اعتبارك توفير طريقة للمستخدمين لتخطي التنقل عالي المستوى بسهولة للوصول إلى المحتوى الرئيسي.
• أنماط واجهة المستخدم: اتبع دلالات الأنماط الشائعة مثل سمات Toggle و Tabs و Tables و Modal Windows و ARIA.
• استخدام التمرير: لا تخفي النص أو الإجراءات خلف حالة التمرير. إذا لم يتمكن مستخدم لوحة المفاتيح فقط من رؤية وجود محتوى / أزرار ، فلن يتمكن من التنقل عبر الصفحة.

مثال جيد على روابط التخطي # 1

مثال جيد على روابط التخطي # 2

2. تباين اللون غير كاف

يؤثر تباين الألوان غير الكافي على قدرة الأشخاص على تلقي المعلومات بصريًا. تأكد من وجود تباين كافٍ بين النص وخلفيته لضمان سهولة قراءة النص. يجب أن تكون نسبة التباين بين النص وخلفية النص بحد أدنى 4.5 إلى 1. ومع ذلك ، إذا كان نصك 24 بكسل على الأقل أو 19 بكسل غامق ، فإن الحد الأدنى ينخفض ​​إلى 3 إلى 1.

نصائح:

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

مثال على التباين غير الكافي

3. نص في الصور

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

نصائح:

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

مثال على النص الجيد في الصورة

4. حالات التركيز المخفية

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

نصائح:

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

حالات التركيز المخفية

الدول ذات التركيز الجيد

5. الخلط بين الهيكل الهرمي

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

نصائح:

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

التسلسل الهرمي السيئ

التسلسل الهرمي الجيد

6. الحمل المعرفي المفرط

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

نصائح:

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

7. الارتباطات التشعبية غير المتمايزة

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

نصائح:

• كن محددًا: استخدم كلمات وصفية للأزرار بدلاً من المصطلحات الغامضة حتى تكون النتيجة متوقعة.
• الروابط غير المسطرة: يجب أن يحتوي نص الرابط على نسبة تباين 3: 1 من النص المحيط غير المرتبط بالارتباط.
• لا تعتمد على اللون وحده: يجب أن يقدم الارتباط "محددًا غير لوني" على كل من تمرير الماوس وتركيز لوحة المفاتيح. على سبيل المثال: الظلال المسقطة أو المقياس أو الانتقالات / التحويلات أو تغييرات اللون أو التسطير.

ارتباطات تشعبية سيئة

ارتباطات تشعبية جيدة

8. أسلوب الطباعة غير المقروء

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

نصائح

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

تكبير بنسبة 100٪

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

خطوات للتحقق من أسلوب الطباعة الخاص بك:

1. افتح متصفحك وقم بتغيير حجم النص إلى 200 بالمائة. انقر فوق عرض ، وحدد تكبير ، ثم انقر فوق إما تكبير (Ctrl / Cmd ++) لتكبير حجم النص.
2. ألق نظرة على كيفية استجابة المحتوى على الشاشة. يجب أن يظل كل محتوى الصفحة قابلاً للقراءة ويجب ألا تفقد أية وظائف.
3. تحقق لمعرفة ما إذا كانت التفاعلات لا تزال تعمل ، أو إذا كان النص متداخلًا ، أو إذا تم اقتطاع النص المهم ، أو ما إذا كان النص مقطوعًا.

تكبير 200٪

نصائح:

1. افتح متصفحك وقم بتغيير حجم النص إلى 200 بالمائة. انقر فوق عرض ، وحدد تكبير ، ثم انقر فوق إما تكبير (Ctrl / Cmd ++) لتكبير حجم النص.
2. ألق نظرة على كيفية استجابة المحتوى على الشاشة. يجب أن يظل كل محتوى الصفحة قابلاً للقراءة ويجب ألا تفقد أية وظائف.
3. تحقق لمعرفة ما إذا كانت التفاعلات لا تزال تعمل ، أو إذا كان النص متداخلًا ، أو إذا تم اقتطاع نص مهم ، أو إذا تم قطع النص.

موارد

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

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

• اكتشف لماذا من المهم للشركات النظر في إمكانية الوصول إلى الويب (وتجنب دعوى قضائية للشركات).
• استمع إلى الحل لـ B ° Podcast حول أهمية الوصول إلى الويب.

تباين الألوان

• مدقق تباين هدف الويب
• مدقق التباين الملون

بنية

• عناوين خريطة كروم تمديد
• مكتبة أنماط مشروع A11Y

الاعتمادات

• مشروع A11Y
• w3.org- WCAG 2.0
• w3.org- المعايير والنظرة العامة
• Usability.org
• أبحاث إمكانية الوصول في آي بي إم
• متاحف كارنيجي في بيتسبرغ ، Disney.com تسلسل هرمي جيد