كيفية وصف تصاميم معقدة للمستخدمين ذوي الإعاقة

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

هناك WCAG 2.0 ، الذي يحظى باحترام واسع باعتباره "الحقيقة" من حيث صلته بالمعايير الدولية للوصول. هناك أيضًا مواصفات WAI-ARIA التي تعد جزءًا مهمًا من مجموعة أدوات المطور التي تركز على إمكانية الوصول. بالعودة إلى الزمن ، هناك معيار الحكومة الفيدرالية الأمريكية ، القسم 508 من قانون إعادة التأهيل.

بينما لا يُعرف عن مدى أهميته الدائمة ، فإن معايير إمكانية الوصول التقنية في القسم 508 تحتوي على اقتراح حكيم للغاية. إنها تنص على أن،

"... يجب أن تكون المعلومات الكافية حول عنصر واجهة المستخدم بما في ذلك هوية وتشغيل وحالة العنصر متاحة للتكنولوجيا المساعدة."

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

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

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

  1. الهوية: ما الذي أتفاعل معه؟
  2. العملية: كيف يمكنني استخدام هذا الشيء؟
  3. الحالة: ما هو الوضع الحالي لهذا الشيء؟

نظرة فاحصة على مربعات الاختيار

يتم إعطاء المستخدم المرئي العديد من الإشارات البصرية المتعلقة بالهوية والتشغيل والدولة. دعونا نلقي نظرة على مربع اختيار بسيط كمثال.

خانة اختيار مع التصنيف ،

عندما أرى مربعًا بجوار الكلمات ، "أوافق على هذه الشروط والأحكام" ، حددت مربعًا.

مربع الاختيار نفسه مع الماوس جاهزة للنقر.

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

خانة اختيار محددة مع التصنيف ،

إذا رأيت علامة اختيار داخل تلك الساحة ، فأنا أعلم أن حالتها "تم فحصها".

كيف يمكن للمستخدم الأعمى الحصول على هذه المعلومات؟

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

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

  1. هوية الكائن: خانة اختيار لإعلان ما إذا كنت موافقًا أم لا
  2. الدولة: لم يتم التحقق منه
  3. العملية: سيؤدي الضغط على مفتاح المسافة إلى تبديل الحالة

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

الضوابط الأصلية

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

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

السحب والإفلات لتغيير حجم عرض العمود

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

شريط التمرير

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

وي-ARIA

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

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

لنأخذ على سبيل المثال ، عنصر تحديد قياسي:

اختيار عنصر أساسي.

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

بنيت القائمة مع ARIA

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

المناطق الحية والنص المخفي

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

  • مخفي بصريًا باستخدام CSS ، ولكن لا يزال يمكن قراءته بواسطة مستخدمي قارئ الشاشة
  • منطقة "الأغنية الحية"
  • طريقة JavaScript لتحديث محتويات النص في هذه المنطقة

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

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

سحب وإسقاط لإعادة ترتيب قائمة.

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

"أمسك {Item name} ، استخدم مفاتيح الأسهم لإعادة الترتيب ، ومساحة المسافة لإسقاطها. الهروب إلى الإلغاء. الموقف الحالي في القائمة ، 1 من 7 ".

يمكنك أيضًا تقديم الحالة النهائية بعد إسقاط عنصر:

"تم إسقاط {اسم العنصر}. المركز النهائي في القائمة ، 4 من 7 ".

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

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

جيسي هو أخصائي إمكانية الوصول الرئيسي في Salesforce. أرسل له سقسقة @ jessehausler ، هاتفه وحيدا.

تابعنا علىSalesforceUX.
تريد أن تعمل معنا؟ الاتصال uxcareers@salesforce.com
تحقق من نظام تصميم Salesforce Lightning