تعزيز تجربة مستخدم الويب لضعاف البصر

Question

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

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

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

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

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

Answer 1

الدفع الأنياب

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

Answer 2

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

1. استخدم الجداول فقط للبيانات الجدولية
2. تأكد من استخدام الأدوات الدلالية المتاحة لك عبر HTML.وهذا يعني استخدام TH مع سمة النطاق.استخدم <em> بدلاً من <i> و<strong> بدلاً من <b>.استخدم ال اختصار و مختصر العلامات.استخدام قوائم التعريف.يمكنني التوسع في هذه الأشياء إذا رغب أي شخص.

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

   <label for="username">اسم المستخدم:</label><input name="username" />

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

5. لا تستخدم الألوان للتأكيد.

6. تأكد من أن كل النص الخاص بك يمكن تغيير حجمه.هذا يعني إلى حد كبير عدم استخدام "px" في ملف CSS الخاص بك.

7. وسأعيد التأكيد على هذا: إنشاء صفحات الدلالية. يستخدم ح علامات للعناوين الخاصة بك.يستخدم ماي/لى للملاحة.

8. استخدم ال بديل السمة على الجميع الصور.إذا كان لديك صورة متحركة فاصلة...حسنًا..لا.بخلاف ذلك، اشرح ماهية الصورة وما أهميتها بالنسبة للمحتوى المرتبط بها.لا تستخدم "مخطط" كعلامة بديلة.استخدم "مخطط الشؤون المالية منذ بداية العام:5000 دولار للربع الأول، 4000 دولار للربع الثاني، 8000 دولار للربع الثالث" أو شيء مشابه.

9. توفير التسميات التوضيحية المغلقة أو النصوص لجميع مكونات الصوت والفيديو

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

يجب عليك عرض موقعك بشكل متكرر بدون أوراق الأنماط (ctrl-shift-s إذا كان لديك Firefox و شريط أدوات مطور الويب) لمعرفة ما إذا كانت الصفحة منطقية.إذا لم يكن الأمر منطقيًا بالنسبة لك كفرد مبصر، فلن يكون منطقيًا بالنسبة لشخص يستخدم قارئ الشاشة.

Answer 3

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

1. استخدم الجداول للبيانات فقط.لا تستخدم الجداول للتخطيط إذا كان بإمكانك تجنب ذلك.
2. عند استخدام جداول البيانات، يجب أن تكون رؤوس الأعمدة متداخلة في علامات TH ويجب عليك استخدام سمات العنوان والنطاق.يجب أن تستخدم علامات الجدول الخاص بك سمة الملخص.
3. يجب أن تحتوي جميع الصور على قيمة للسمة alt التي تصف ما يحدث في الصورة وإذا كانت الصورة لا تخدم أي غرض (إنها صورة شفافة أو شيء مشابه)، فيجب تعيين السمة alt على سلسلة فارغة.
4. حاول استخدام قارئ تحويل النص إلى كلام و/أو التنقل عبر لوحة المفاتيح فقط و/أو قم بإيقاف تشغيل أوراق الأنماط.أعتقد أنك بحاجة إلى شراء JAWS، ولكنني متأكد من وجود برامج قراءة شاشة مجانية.أنت بحاجة إلى تجربة موقع من خلال قارئ الشاشة لفهم مدى صعوبة التنقل في معظم صفحات الويب دون الإشارات التي يفسرها قارئ الشاشة.

Answer 4

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

Answer 5

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

Answer 6

يتم تنظيم التعليمات البرمجية للعديد من صفحات الويب على النحو التالي:

1. رأس
2. التنقل العلوي
3. الملاحة اليسرى
4. محتوى
5. تذييل

عند التنظيم بهذه الطريقة، يكون الرابط المخفي لـ "التخطي إلى المحتوى الرئيسي" مفيدًا.ومع ذلك، باستخدام تخطيط CSS، قد تتمكن من إعادة ترتيب ذلك بحيث يكون لديك:

1. محتوى
2. رأس
3. التنقل العلوي
4. الملاحة اليسرى
5. تذييل

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

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

Answer 7

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

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

http://redish.net/content/papers/interactions.html

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

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