تحسين إمكانية الوصول إلى صفحات الويب
مجموعة المستندات هذه هي نسخة مستندة إلى نص لجزء من المحتوى الذي تتناوله الدورة التدريبية Udacity حول إمكانية الوصول. بدلاً من تحويل الصوت في الدورة التدريبية إلى نص مباشر، من المفترض أن يتم تناولها بطريقة أكثر إيجازًا لمبادئ وممارسات إمكانية الوصول، وذلك من خلال استخدام المحتوى الأصلي للدورة التدريبية كقاعدة.
ملخّص
- تعرَّف على معنى تسهيل الاستخدام وكيفية تطبيقه على تطوير الويب.
- تعرف على كيفية جعل مواقع الويب سهلة الوصول واستخدامها للجميع.
- تعرّف على كيفية تضمين تسهيل الاستخدام الأساسي بأقل تأثير في النمو.
- تعرَّف على ميزات HTML المتاحة وكيفية استخدامها لتحسين إمكانية الوصول.
- تعرف على تقنيات إمكانية الوصول المتقدمة لإنشاء تجارب إمكانية وصول منمّقة.
إن فهم إمكانية الوصول ونطاقها وتأثيرها يمكن أن يجعلك مطورًا أفضل للمواقع الإلكترونية. يهدف هذا الدليل إلى مساعدتك في فهم كيفية إتاحة مواقعك الإلكترونية وتسهيل استخدامها للجميع.
قد يكون من الصعب تهجئة كلمة "إمكانية الوصول"، لكن ليس من الصعب تحقيقها. في هذا الدليل، ستتعرّف على كيفية تحقيق بعض النجاحات السهلة لمساعدتك في تحسين إمكانية الوصول بأقل جهد ممكن، وكيفية استخدام العناصر المضمّنة في HTML لإنشاء واجهات أكثر قوة وسهولة الوصول إليها، وكيفية الاستفادة من بعض الأساليب المتقدمة لإنشاء تجارب محسّنة لتسهيل الاستخدام.
ستجد أيضًا أنّ العديد من هذه التقنيات ستساعدك في إنشاء واجهات أكثر متعة وسهولة في الاستخدام لجميع المستخدمين، وليس فقط لأولئك من ذوي الاحتياجات الخاصة.
بالطبع، ليس لدى العديد من المطورين سوى فهم ضبابي لمعنى سهولة الوصول - وهو شيء متعلق بالعقود الحكومية وقوائم التحقق وقارئات الشاشة، أليس كذلك؟ وهناك الكثير من المفاهيم الخاطئة الشائعة على سبيل المثال، يرى العديد من المطوّرين أنّ معالجة إمكانية الوصول ستجبرهم على الاختيار بين إنشاء تجربة مبهجة وجذابة وتجربة سيئة وقبيحة ولكن يمكن الوصول إليها.
هذا بالطبع، ليس هو الحال على الإطلاق، لذا دعنا نوضح ذلك قبل أن ندخل في أي شيء آخر. ماذا نعني بإمكانية الوصول، وماذا نحن هنا للتعرف على؟
ما المقصود بإمكانية الوصول؟
بشكل عام، عندما نقول إنّ موقع إلكتروني يمكن الوصول إليه، نعني أنّ محتواه متاح ويمكن تشغيل وظائفه، أي أي مستخدم حرفيًا. من السهل افتراض أنّ جميع المستخدمين يمكنهم رؤية واستخدام لوحة مفاتيح أو ماوس أو شاشة تعمل باللمس، ويمكنهم أيضًا التفاعل مع محتوى صفحتك بالطريقة نفسها التي تتّبعها.
تشير إمكانية الوصول بعد ذلك إلى تجربة المستخدمين الذين قد يكونون خارج نطاق المستخدم الضيق، الذين قد يصلون إلى الأشياء أو يتفاعلون معها بشكل مختلف عما تتوقعه. على وجه التحديد، يتعلق ذلك بالمستخدمين الذين يعانون من نوع من العجز أو الإعاقة - ويُرجى العلم بأنّ هذه التجربة قد تكون غير جسدية أو مؤقتة.
على سبيل المثال، على الرغم من أننا نميل إلى تركيز مناقشتنا حول سهولة الوصول على المستخدمين ذوي الإعاقات الجسدية، إلا أنه يمكننا جميعًا الارتباط بتجربة استخدام واجهة لا يمكننا الوصول إليها لأسباب أخرى. هل سبق لك أن واجهت مشكلة في استخدام موقع إلكتروني لأجهزة الكمبيوتر المكتبي على هاتف جوّال، أو ظهرت لك الرسالة "هذا المحتوى غير متاح في منطقتك"، أو لم تتمكّن من العثور على قائمة مألوفة على جهاز لوحي؟ هذه كلها مشكلات في إمكانية الوصول.
كلما تعلمت المزيد، ستجد أن معالجة مشكلات إمكانية الوصول بهذا المنطقية الأوسع نطاقًا دائمًا ما يحسن تجربة المستخدم للجميع. لنلقِ نظرة على المثال التالي:
يحتوي هذا النموذج على عدة مشاكل متعلقة بإمكانية الوصول.
- النص منخفض التباين، مما يصعب على المستخدمين ضعاف النظر قراءته.
- وجود تسميات على اليسار والحقول على اليمين يجعل من الصعب على العديد من الأشخاص ربطها، وتقريبًا من المستحيل على شخص ما يحتاج إلى التكبير لاستخدام الصفحة؛ تخيل أن ينظر إلى ذلك على هاتف ويضطر إلى التنقل حوله لاكتشاف ما يتوافق مع ماذا.
- تسمية "هل تتذكر التفاصيل؟" غير مرتبط بمربع الاختيار، لذلك يتعين عليك النقر على المربع الصغير فقط بدلاً من النقر فوق التسمية؛ أيضًا، قد يواجه شخص يستخدم قارئ الشاشة مشكلة في معرفة الارتباط.
لننتقل الآن إلى استخدام عصا إمكانية الوصول ونرى النموذج الذي تم حلّ هذه المشاكل فيه. سنقوم بجعل النص أغمق، وتعديل التصميم بحيث تكون التسميات قريبة من الأشياء التي تقوم بتمييزها، وإصلاح التسمية ليتم ربطها بمربع الاختيار حتى تتمكن من تبديلها عن طريق النقر فوق التسمية أيضًا.
أيهما تفضّل استخدامه؟ إذا قلت "الإصدار الذي يسهل الوصول إليه"، فأنت في طريقك لفهم الفرضية الرئيسية لهذا الدليل. في كثير من الأحيان، الشيء الذي يُعتبَر عوائق كاملة لبعض المستخدمين هو أيضًا مشكلة بالنسبة للعديد من المستخدمين الآخرين، لذا من خلال إصلاح مشكلة إمكانية الوصول، فإنك تحسّن تجربة الجميع.
إرشادات إتاحة محتوى الويب
في هذا الدليل، سنشير إلى إرشادات إتاحة محتوى الويب (WCAG) 2.0، وهي مجموعة من الإرشادات وأفضل الممارسات التي جمعها خبراء في إمكانية الوصول لمعالجة معنى "إمكانية الوصول" بطريقة منهجية.
يتم تنظيم WCAG استنادًا إلى أربعة مبادئ غالبًا ما يُطلق عليها اختصار POUR:
مرئية: هل يمكن للمستخدمين رؤية المحتوى؟ يساعدنا هذا في أن نضع في اعتبارنا أنه مجرد وجود شيء ما يمكن إدراكه بحلة واحدة، مثل الرؤية، فلا يعني ذلك أن جميع المستخدمين يمكنهم إدراكه.
التشغيل: هل يمكن للمستخدمين استخدام مكوّنات واجهة المستخدم والتنقّل في المحتوى؟ فعلى سبيل المثال، لا يمكن تشغيل الشيء الذي يتطلب تفاعل التمرير من قبل شخص لا يستطيع استخدام الماوس أو الشاشة التي تعمل باللمس.
مفهوم: هل يمكن للمستخدمين فهم المحتوى؟ هل يمكن للمستخدمين فهم الواجهة وهلها متسقة بما يكفي لتجنب الالتباس؟
المحتوى الفعّال: هل يمكن لمجموعة متنوعة من برامج وكيل المستخدم (المتصفّحات) استخدام المحتوى؟ هل تعمل مع التكنولوجيا المساعدة؟
بينما يوفر WCAG نظرة عامة شاملة حول ما يعنيه إمكانية الوصول إلى المحتوى، إلا أنه قد يكون أيضًا مربكًا بعض الشيء. للمساعدة في الحد من هذه المشكلة، جمعت مجموعة WebAIM(Web AIM في عقلية إمكانية الوصول إلى الويب) إرشادات WCAG في قائمة تحقُّق سهلة المتابعة، مُستهدفة خصيصًا لمحتوى الويب.
يمكن أن تمنحك قائمة تحقق WebAIM ملخصًا قصيرًا وعالي المستوى لما تحتاج إلى تنفيذه، مع الربط أيضًا بمواصفات WCAG الأساسية إذا كنت بحاجة إلى تعريف موسّع.
مع وجود هذه الأداة في متناول اليد، يمكنك تحديد اتجاه لعمل إمكانية الوصول الخاصة بك وكن واثقًا من أنه طالما أن مشروعك يلبي المعايير المحددة، يجب أن يتمتع المستخدمون بتجربة إيجابية في الوصول إلى المحتوى الخاص بك.
فهم تنوع المستخدمين
عند التعرف على إمكانية الوصول، من المفيد فهم المجموعة المتنوعة من المستخدمين في العالم وأنواع موضوعات سهولة الوصول التي تؤثر عليهم. لمزيد من التوضيح، إليك جلسة أسئلة/إجابات غنية بالمعلومات مع "فيكتور تساران"، مدير البرامج الفني في Google، خبير تمامًا.
ما هي وظيفتك في Google؟
مهمتي هنا في Google هي المساعدة في التأكد من أن منتجاتنا تناسب جميع المستخدمين المختلفين، بغض النظر عن أي ضعف أو قدرة.
ما أنواع الإعاقات التي يعاني منها المستخدمون؟
عندما نفكر في أنواع الضعف التي تجعل من الصعب على شخص ما الوصول إلى المحتوى الخاص بنا، سيتخيل الكثير من الناس على الفور مستخدمًا كفيفًا مثلي. وهذا العجز قد يجعل استخدام الكثير من مواقع الويب محبطًا أو حتى مستحيلاً.
هناك الكثير من تقنيات الويب الحديثة لها الآثار الجانبية المؤسفة لإنشاء مواقع لا تعمل بشكل جيد باستخدام الأدوات التي يستخدمها المستخدمون المكفوفين للوصول إلى الويب. ومع ذلك، هناك في الواقع المزيد من سهولة الوصول من ذلك. نجد أنه من المفيد التفكير في الإعاقات التي تندرج في أربع مجموعات واسعة: البصرية، والحركية، والسمعية، والمعرفية.
لنراجع هذا النوع من المهام كلّ منها على حدة. هل يمكنك تقديم بعض الأمثلة على العجز البصري؟
يمكن تقسيم الإعاقات البصرية إلى عدة فئات: قد يستخدم المستخدمون الذين يعانون من ضعف في النظر، مثلي، قارئ شاشة أو لغة برايل أو مزيج منهما.
الآن، من غير المعتاد أن يكون لديك أي رؤية حرفيًا، ولكن مع ذلك، هناك فرصة جيدة أنك تعرف أو قد قابلت شخصًا واحدًا على الأقل لا يمكنه الرؤية على الإطلاق. ومع ذلك، هناك أيضًا عدد أكبر بكثير مما نسميه المستخدمين ضعاف البصر.
هذه مجموعة واسعة، من شخص مثل زوجتي، لا يعاني من أي قرنية - فبينما يمكنها في الأساس رؤية الأشياء التي تواجه صعوبة في قراءة المطبوعات وتُعتبر عينية من الناحية القانونية - إلى شخص يعاني من ضعف البصر ويحتاج إلى ارتداء نظارات طبية قوية جدًا.
هناك نطاق واسع، ومن الطبيعي أن هناك مجموعة كبيرة من وسائل الراحة التي يستخدمها الأشخاص في هذه الفئة: يستخدم البعض برنامج قارئ الشاشة أو جهاز عرض بلغة برايل (لقد سمعت حتى عن امرأة تقرأ لغة برايل المعروضة على الشاشة لأنّ رؤيتها أسهل من النص المطبوع)، أو قد يستخدمون تكنولوجيا تحويل النص إلى كلام بدون استخدام وظيفة قارئ الشاشة بملء الشاشة، أو قد يستخدمون تكبير الشاشة أو تكبير الشاشة فقط في تكبير الشاشة أو تكبير الشاشة أو تكبير الشاشة أو تكبير الشاشة قد يستخدمون أيضًا خيارات عالية التباين مثل وضع التباين العالي في نظام التشغيل، أو إضافة متصفّح عالية التباين، أو مظهر عالي التباين لموقع إلكتروني.
حتى أن الكثير من المستخدمين يستخدمون مزيجًا من هذه الأدوات، مثل صديقتي لورا التي تستخدم مزيجًا من وضع التباين العالي وتكبير/تصغير المتصفح وتحويل النص إلى كلام.
ضعف البصر هو شيء يمكن أن يرتبط به الكثير من الأشخاص. كبداية، نحن جميعًا نعاني من تدهور الرؤية مع تقدمنا في السن، لذلك حتى لو لم تكن تعاني منه، فهناك فرصة جيدة أن تسمع والديك يشتكي من ذلك. لكن الكثير من الأشخاص يشعرون بالاستياء بسبب إخراج الكمبيوتر المحمول من نافذة مشمسة فقط ليكتشفوا أنهم فجأة لا يستطيعون قراءة أي شيء! أو أي شخص خضع لجراحة بالليزر أو ربما يضطر إلى قراءة أي شيء من جميع أنحاء الغرفة قد يكون قد استخدم أحد وسائل الراحة التي ذكرتها. لذلك أعتقد أنه من السهل جدًا على المطورين أن يتمتعوا ببعض التعاطف مع المستخدمين ضعاف البصر.
أوه، ولا يجب أن أنسى أن أذكر الأشخاص الذين يعانون من ضعف رؤية الألوان - حوالي 9٪ من الذكور يعانون من نوع من قصور رؤية الألوان! بالإضافة إلى حوالي 1٪ من الإناث. قد يواجهون صعوبة في التمييز بين الأحمر والأخضر أو الأصفر والأزرق. فكر في ذلك في المرة القادمة التي تصمم فيها التحقق من صحة النموذج.
ماذا عن الإعاقات الحركية؟
نعم، حالات إعاقات حركية أو عجز في المهارات اليدوية. وتتراوح هذه المجموعة من أولئك الذين يفضّلون عدم استخدام الماوس، لأنّهم ربما حصلوا على بعض مؤشر RSI أو شيء من هذا القبيل ووجدوا أنه مؤلم، وبين الأشخاص المصابين بالشلل الجسدي ونطاق حركتهم محدود لأجزاء معينة من أجسامهم.
يمكن للمستخدمين الذين يعانون من عجز في الحركة استخدام لوحة مفاتيح أو جهاز تبديل أو تحكُّم صوتي أو حتى جهاز لتتبُّع العين للتفاعل مع جهاز الكمبيوتر.
على غرار إعاقات الرؤية، يمكن أن تكون الحركة أيضًا مشكلة مؤقتة أو ظرفية: ربما يكون لديك معصم مكسور في يدك بالماوس. ربما تكون لوحة التعقب معطلة على الكمبيوتر المحمول أو أنك تركب قطارًا مهتزًا. يمكن أن تكون هناك الكثير من المواقف التي تُعاق فيها حركة المستخدم، ومن خلال التأكد من أننا نراعي هؤلاء المستخدمين، نحسن التجربة بشكل عام، سواء لمن يعاني من إعاقة دائمة أو أي شخص يجد مؤقتًا أنه غير قادر على استخدام واجهة مستخدم قائمة على المؤشر.
حسنًا، لنتحدّث عن العجز السمعي.
وتتراوح هذه المجموعة من الصمّ بشدة إلى ضعاف السمع. وعلى غرار البصر، تميل سمعنا إلى التدهور مع تقدم العمر. يستخدم العديد منا ميزات شائعة مثل السماعات الطبية لمساعدتنا.
بالنسبة إلى المستخدمين الذين يعانون من عجز سمعي، نحتاج إلى التأكّد من أنّنا لا نعتمد على الصوت، لذا يجب الحرص على استخدام إجراءات مثل ترجمات الفيديو والنصوص، وتقديم نوع بديل، إذا كان الصوت جزءًا من الواجهة.
وكما رأينا حالات إعاقات في الرؤية والحركة، فمن السهل حقًا تخيل موقف يكون فيه شخص تعمل أذنيه جيدًا للاستفادة من هذه التجهيزات أيضًا. يقول الكثير من أصدقائي إنهم يحبون ذلك عندما تحتوي مقاطع الفيديو على تسميات توضيحية ونصوص لأن ذلك يعني أنهم إذا كانوا في مكتب مفتوح ولم يحملوا سماعات الرأس، فلا يزال بإمكانهم مشاهدة الفيديو!
حسنًا، هل يمكنك إطلاعنا على بعض المعلومات حول العجز الإدراكي؟
هناك مجموعة من الحالات المعرفية مثل اضطراب نقص الانتباه (ADD) وعسر القراءة (عسر القراءة) والتوحد، مما قد يعني أن الناس يريدون أو يحتاجون إلى الوصول إلى الأشياء بشكل مختلف. إنّ أماكن الإقامة لهذه المجموعات متنوعة للغاية بطبيعة الحال، لكننا بالتأكيد نجد بعض التداخل مع جوانب أخرى، مثل استخدام وظيفة التكبير/التصغير لتسهيل القراءة أو التركيز. أيضًا، قد يجد هؤلاء المستخدمون أن التصميم البسيط حقًا يعمل بشكل أفضل لأنه يقلل من التشتيت والعبء المعرفي.
أعتقد أن الجميع يمكن أن يتعلق بإجهاد العبء الإدراكي الزائد، لذلك من الواضح أنه إذا ابتكرنا شيئًا يعمل بشكل جيد لشخص يعاني من إعاقة إدراكية، فسننشئ شيئًا سيكون تجربة سارة للجميع.
إذن، كيف يمكنك تلخيص رأيك بشأن سهولة الوصول؟
عندما تنظر إلى النطاق الواسع من القدرات والإعاقات التي قد تكون لدى الأشخاص، يمكنك أن ترى أن تصميم المنتجات وإنشائها فقط للأشخاص الذين لديهم الرؤية والسمع والمهارة والإدراك المثالية يبدو ضيقًا للغاية. الأمر نفسه شبه هزيم للذات، لأننا ننشئ تجربة أكثر إجهادًا وأقل قابلية للاستخدام للجميع، ولبعض المستخدمين يخلقون تجربة تستبعدهم تمامًا.
في هذه المقابلة، حدد "فيكتور" مجموعة من حالات العجز وأدرجها في أربع فئات واسعة: البصرية والحركة والسمع والإدراك. وأشار أيضًا إلى أنّ كل نوع من حالات العجز قد يكون ظرفيًا أو مؤقتًا أو دائمًا.
لنلقِ نظرة على بعض الأمثلة الواقعية لحالات عجز الوصول ونتعرف على مكانها ضمن تلك الفئات والأنواع. لاحظ أن بعض الإعاقات قد تندرج في أكثر من فئة أو نوع واحد.
| ظرفية | مؤقتة | نهائية | |
|---|---|---|---|
| محتوى مرئي | ارتباك | عمى | |
| الحركة | حمل طفل | ذراع مكسورة، RSI* | مؤشر RSI* |
| أدوات سمعية | مكتب صاخب | ||
| الإدراك | ارتباك |
إصابة الإجهاد المتكرر: على سبيل المثال، متلازمة النفق الرسغي، مرفق التنس، إصبع الزناد
الخطوات التالية
لقد قطعنا شوطًا طويلاً بالفعل! لقد قرأت عن
- المقصود بإمكانية الوصول وأهميتها للجميع
- إرشادات إتاحة محتوى الويب (WCAG) وقائمة التحقق من إمكانية الوصول في WebAIM
- أنواع مختلفة من الإعاقات التي ينبغي أن تضعها في اعتبارك
في بقية الدليل، سنتعمق في الجوانب العملية لإنشاء مواقع ويب يمكن الوصول إليها. سننظم هذا الجهد حول ثلاثة مواضيع رئيسية:
التركيز: سنلقي نظرة على كيفية إنشاء عناصر يمكن تشغيلها باستخدام لوحة مفاتيح بدلاً من الماوس. وهذا مهم بالنسبة إلى المستخدمين الذين يعانون من إعاقات حركية، بالطبع، ولكنه يضمن أيضًا أن تكون واجهة المستخدم في حالة جيدة لجميع المستخدمين.
الدلالات: سنحرص على التعبير عن واجهة المستخدم بطريقة فعّالة تتوافق مع مجموعة متنوعة من التكنولوجيات المساعدة.
التصميم: سنأخذ في الاعتبار التصميم المرئي ونلقي نظرة على بعض الأساليب التي تجعل العناصر المرئية للواجهة مرنة وسهلة الاستخدام قدر الإمكان.
يمكن أن يملأ كل موضوع من هذه الموضوعات دورة كاملة، لذلك لن نتناول كل جانب من جوانب إنشاء مواقع ويب يمكن الوصول إليها. ومع ذلك، سنقدم لك معلومات كافية للبدء، ونرشدك إلى بعض الأماكن الجيدة التي يمكنك من خلالها معرفة المزيد من المعلومات حول كل موضوع.