سبع قواعد بسيطة لجعل الإنترنت في متناول الجميع

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



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

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

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

لماذا تسعى للوصول؟

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

يصل عدد الأشخاص ذوي الإعاقة إلى 56 مليون شخص في الولايات المتحدة (أي أقل بقليل من خمس السكان) وحوالي مليار شخص حول العالم. في عام 2017 ، تم تقديم 814 دعوى قضائية للوصول إلى موقع الويب. إن هاتين الواقعتين تثبتان لنا بشكل مقنع أهمية هذه القضية.

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

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

1. جعل الألوان متباينة بما فيه الكفاية

يعد تباين الألوان أحد مشكلات إمكانية الوصول إلى الموقع التي غالبًا ما يتم نسيانها. من المحتمل أن يواجه الأشخاص الذين يعانون من إعاقة بصرية صعوبة في قراءة النص إذا لم يتعارض بشكل جيد مع الخلفية. وفقًا لتقديرات منظمة الصحة العالمية (WHO) في وثيقتها حول ضعف البصر والعمى ، يجب أن تكون نسبة سطوع النص إلى الخلفية 4.5: 1 على الأقل (لتتناسب مع مستوى AA). للخطوط الأكبر والجريئة ، يُسمح بالبدلات - يسهل تمييزها حتى مع التباين المنخفض. إذا كان حجم النص الخاص بك 14-18 نقطة أو أكثر ، يتم تخفيض العتبة إلى 3: 1.

هناك أدوات تساعدك على التحقق من التباين بسرعة. بالنسبة لأولئك الذين يعملون على جهاز Mac ، أنصحك بالحصول على تطبيق التباين - فهو يسمح لك بحساب النسبة على الفور باستخدام ماصة. إذا كنت ترغب في الحصول على تقييم أكثر تفصيلاً ، فأوصيك بإدخال القيم الضرورية في الأداة للتحقق من التباين من WebAIM. سيحسب النسبة لأحجام الخطوط المختلفة ويحدد المراسلات مع المستويات المختلفة (A ، AA ، AAA). من خلال تغيير القيم ، يمكنك الحصول على النتيجة في الوقت الحقيقي.

المصدر: WCAG Visual Contrast

2. لا تعتمد فقط على اللون لنقل المعلومات الهامة

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

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

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

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

المصدر: WCAG Visual Contrast Without Color

3. تسليط الضوء على العناصر النشطة

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

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

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

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

المصدر: W3C Focus Visible

4. إضافة تسميات توضيحية وإرشادات لحقول الإدخال

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

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

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

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

المصدر: WebAIM إنشاء نماذج يمكن الوصول إليها

5. كتابة أوصاف بديلة بالمعلومات للصور والعناصر غير النصية الأخرى

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

يمكن تمثيل وصف بديل بطريقتين:

• في سمة alt لعنصر الصورة
• في السياق المباشر أو في النص المصاحب للصورة

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

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

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

المصدر: W3C باستخدام سمات Alt

6. استخدم الترميز بشكل صحيح

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

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

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

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

المصدر: WebAIM Semantic Structure

7. دعم التحكم الرئيسي

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

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

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

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

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

المصدر: W3C Keyboard

ما الذي يمكن فعله

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

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

الخلاصة

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

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

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

المراجع

WebAIM - مقالات وموارد ودراسات حالة حول إمكانية الوصول في تصميم الويب
" 7 أشياء يحتاج المصمم إلى معرفتها عن إمكانية الوصول " هي مقالة رائعة من Salesforce بملاحظات دقيقة
برنامج UCLA لذوي الإعاقة والحوسبة - الموقع ، بالطبع ، ليس الأكثر جمالا وحداثة ، ولكنه غني جدا بالموارد
أساطير UX - قائمة واسعة من المفاهيم الخاطئة في تصميم UX مع عمليات الرفض ؛ بعضهم يتطرق إلى قضايا إمكانية الوصول
سير عمل إمكانية الوصول إلى الألوان - هنا يوضح Geri Coady كيفية الوصول إلى النقطة من خلال اختيار الألوان
W3C - كتاب إمكانية الوصول في تصميم الويب ، يمكنك حتى الخلط بين وفرة المواد. ولكن عندما تفهم الهيكل ، ستجد أمثلة ونصائح وموارد رائعة.

أدوات مفيدة

WebAIM Color Contrast Checker - أداة ذكية للتحقق من التباين ، تنتج نتيجة مباشرة بعد الإدخال ولأحجام نصية مختلفة
مكونات شاملة - مكتبة نسيج مصممة كمدونة. يتم إيلاء اهتمام خاص لقضايا التصميم الميسور التكلفة. تحلل كل مشاركة بعض مكونات الواجهة المشتركة وتقدم نسخة أكثر موثوقية وبأسعار معقولة من تصميمها.
Color Oracle هو محاكي أعمى مجاني للألوان تم تكييفه مع أنظمة التشغيل Windows و Mac و Linux. في الوقت الحقيقي ، يظهر كيف يرى الأشخاص الذين يعانون من اضطرابات إدراك اللون واسعة الانتشار.
إرشادات الوصول إلى منتج Vox - قائمة كاملة لمتطلبات المصممين والمطورين ومديري المشاريع
AX Google Chrome Extension - تحقق من أي موقع بحثًا عن انتهاكات إمكانية الوصول مع المفتش لمتصفح Chrome
Contrast هو تطبيق Mac يوفر وصولاً فوريًا إلى نسب سطوع WGAG.