دليل المصمم إلى أساسيات تصميم إمكانية الوصول إلى الويب

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

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

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

مقدمة للوصول

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

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

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

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

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

بصري - ضعف البصر أو ضعف / لا يوجد مشهد
سمعي - ضعاف السمع أو الصم
الإدراكي - مشكلة في فهم أو استهلاك المعلومات
محرك - مشكلات الوصول الفعلي التي قد تتطلب أجهزة إدخال خاصة مثل لوحات المفاتيح أو برامج الأوامر الصوتية

كل هذه الفئات لديها تقنيات واسعة والتي هي تغيير بسرعة مثل معايير الويب. ولكن هناك شعور بالاستقرار مع هذه المعايير التي تم التصديق عليها في WCAG (إرشادات إمكانية الوصول إلى محتوى الويب).

بعض المواقع ، مثل يطلب من المؤسسات الحكومية بموجب القانون اتباع هذه الإرشادات. أنها تنطبق دوليا من خلال W3C.

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

و W3C وتصميم يمكن الوصول إليها

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

W3C (اتحاد شبكة ويب العالمية) - مجموعة دولية تحدد معايير الويب للبروتوكولات واللغات واللوائح. جميع إرشادات الوصول الرسمية تندرج تحت هذه المنظمة.
وي (مبادرة الوصول إلى الويب) - برنامج رسمي يغطي كل شيء عن إمكانية الوصول. يحتوي هذا المصطلح المظلي على جميع القواعد والإرشادات والتقنيات الخاصة بإمكانية الوصول الحديثة.
WCAG (إرشادات إمكانية الوصول إلى محتوى الويب) - مجموعة من المعايير والقواعد لمساعدة المصممين على تصنيف مواقع الويب الخاصة بهم بناءً على مستوى إمكانية الوصول.
ARIA (تطبيقات الإنترنت الغنية القابلة للوصول) - معيار محدد يحدد كيفية إنشاء تطبيقات غنية يمكن الوصول إليها تعتمد على JavaScript / Ajax والتقنيات المشابهة. اقرأ المزيد حول هذا الموضوع في هذا المنشور بواسطة آنا مونوس.

توجد مبادئ توجيهية أخرى تحت مظلة WAI ، بما في ذلك UAAG لوكلاء المستخدم و ATAG لأدوات التأليف على شبكة الإنترنت. في الوقت الحالي ، يجب أن تكون مهتمًا للغاية بالاقتراحات المقدمة من WAI والمبادئ التوجيهية التي وضعتها مجموعة قواعد WAI تحت اسم WCAG.

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

موضوع آخر مهم يجب أن تفهمه هو توافق WCAG. هذا يتعلق مستوى الوصول إلى موقع الويب تغطي مجموعة واسعة من العوامل. وتستند المستويات على التوافق مع نظام تصنيف A ، AA ، و AAA. يمكنك التحقق من ذلك باستخدام أداة مدقق إمكانية الوصول إلى الويب. أفضل نتيجة هي AAA.

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

WCAG 2.0 المبسطة
القسم 508 أداء WCAG

خطوات للوصول إلى التصميم

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

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

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

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

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

إذا كنت تريد الغوص ، ففكر في اختيار مظهر جاهز لإمكانية الوصول. يمكنك دراسة الهندسة المعمارية وتخصيص التصميم ليناسب مشروعك.

أدوات اختبار إمكانية الوصول

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

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

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

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

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

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

هناك تطبيق مجاني آخر على موقع Cynthia Says والذي يمكنه تحقق من مواقع الويب للحصول على تقييمات نجاح WCAG من A و AA و AAA, و القسم 508 للامتثال الحكومي.

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

HTML CodeSniffer
أداة اختبار إمكانية الوصول الآلي
مصادقة WCAG

إضافات المتصفح

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

يعتبر AInspector for Firefox ضرورة أساسية للوصول. هذا يتحقق من كل شيء ، وهو أكثر شمولية من اختبار WAVE.

قد يعجب مستخدمو Mozilla أيضًا بـ WCAG Contrast Checker الذي يعد أيضًا وظيفة إضافية مجانية.

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

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

لسوء الحظ لم أتمكن من العثور على الكثير لمستخدمي Safari ، لكنني وجدت امتدادًا واحدًا لـ Opera يتحقق من توافق WCAG 2.0. إذا كنت على استعداد للبحث في Google بقوة كافية ، فقد تجد المزيد من الأدوات هناك.

قراءة متعمقة

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

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

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

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