تحسينات UX لإمكانية الوصول إلى لوحة المفاتيح

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

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

نأمل أن تستمتع بالندوة التعليمية على الويب بقدر استمتاعنا!

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

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

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

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

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

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

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

آرون بيرلمان: فقط اعلم أنك ستتعلم بمرور الوقت. بالتأكيد ما زلت أخطئ في إمكانية الوصول ، وكل ما أعمل عليه يتعلق بالتحسين. لذا ، [غير مسموع] لأنني دائمًا ما أصمم بطريقة يسهل الوصول إليها. لذا فإن أحد المكونات الصغيرة على الرغم من ارتباطه بما سنعمل عليه اليوم يسمى Trane. إنها مكتبة الأنماط التي يمكن الوصول إليها بالكامل في Deque ، ونحن نستخدمها لبناء منتجاتنا الخاصة. إنه إطار أمامي لـ HTML و CSS و JavaScript ، يشبه إلى حد بعيد Bootstrap ، إذا سبق لك استخدام أي شيء من هذا القبيل. لدينا أيضًا مكتبة تفاعل وهي مكتبة شقيقة أيضًا. فريقنا يتطور في رد الفعل. لكننا سننظر في بعض الأشياء هنا اليوم كأمثلة. لكن هذا مفتوح المصدر ، إنه متاح ، سيكون هناك رابط له في نهاية هذه المجموعة ، والذي سأوفره للجميع.

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

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

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

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

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

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

آرون بيرلمان: وبعد ذلك سأمضي قدمًا وأدخل واحدة من هذه فقط حتى تتمكن من رؤيتها. وما يحدث في هذه المرحلة عندما أقوم بتحديده ، يرسلني إلى منطقة مساحة العمل وهو يركز بالفعل على مساحة العمل هذه. ما ستراه في الكثير من تطبيقات الويب هو أنها لا تُظهر التركيز بحد ذاته ، أردنا أن نظهر أنه في تطبيقاتنا ، هذا ليس تركيزًا على العناصر إذا جاز التعبير ، ولكنه شيء يمكن أن يستغرق التركيز. وبعد ذلك من هنا ، سنقوم بالتركيز وبعد ذلك يمكننا الانتقال إلى العناصر المختلفة الموجودة بداخلها والتي تمثل محور جميع العناصر الموجودة بداخلها ، عناصر [غير مسموع 00:12:28]. إذن ، هذه أمثلة على بعض الطرق المختلفة التي يمكنك من خلالها تخطي الروابط.

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

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

آرون بيرلمان: حسنًا ، كيف تصل إلى التذييل؟ وقد واجهت هذه المشكلة بالفعل من قبل ، حيث ذهبت إلى محركات البحث ولم أتمكن أبدًا من الوصول إلى التذييل. والشيء الجميل هو رابط التخطي الذي يسمح لي في الواقع بالتخطي إلى التذييل ، لأنني كنت أبحث عن معلومات في أسفل التذييل. لذلك هناك طرق يمكن أن يكون من خلالها تخطي الروابط مفيدًا لذلك. إنها ليست الطريقة الوحيدة لحل هذه المشكلة. بالتأكيد ، يمكنك استخدام المفاتيح الصلبة أو القوائم المختصرة أيضًا. هناك العديد من الأساليب المختلفة لتحقيق هذه الأهداف ، ولكن هذا هو الأسلوب الذي يميل تخطي الروابط إلى أن يكون جيدًا فيه [غير مسموع 00:14:13]. بعض الأشياء التي يجب وضعها في الاعتبار عند تصميم رابط التخطي هي أنه عادةً ما يكون أول علامة تبويب في تطبيق الويب لموقع الويب الخاص بك.

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

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

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

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

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

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

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

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

VoiceOver: VoiceOver على Chrome.] Bonobos ، [غير مسموع 00:20:10] -

آرون بيرلمان: ولن تتمكن من سماعه-

فويس أوفر : جوجل كروم ، [email protected]

آرون بيرلمان: لكنك ستتمكن من رؤيته.

VoiceOver: أغلق البطاقة ، بطاقتك فارغة ، المجموعة تركز على لوحة المفاتيح. أنت حاليًا في المجموعة في فتح بطاقتك ، أغلق البطاقة ، بطاقتك فارغة المجموعة. أنت حاليًا في المجموعة داخل محتوى الويب ، VoiceOver غير مفعّل.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سكوت: ممتاز.

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

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

آرون بيرلمان: هل تركز على إشعار؟ يمكنني أن أريك واحدًا إذا كنت ترغب في رؤيته.

سكوت: بالتأكيد.

آرون بيرلمان: يمكننا الاختيار عشوائيًا لأن لدينا الخبز المحمص ، وهي إشعارات. لذا سأقوم بفتح الخبز المحمص هنا. هذا في الواقع يتم التركيز عليه الآن. تم استحضار هذا الخبز المحمص ويتم التركيز عليه الآن ويمكنك في الواقع ، كما ترى ، الانتقال إلى الجملة هنا. لذلك ، هذا يعتمد. So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. تخطي إلى المحتوى الرئيسي.

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. It's totally free. It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. That's really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That's one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

آرون بيرلمان: هذا هو الشيء الوحيد الذي نقوم به هو أن أقوم بتعليق تصميماتي بشكل كبير. كل شيء بدءًا من حجم الكيفية التي يُفترض أن تكون بها أشياء معينة إلى أكواد Hex أو قيم RGBA لما يفترض أن يبدو شكله ويشعر به. ولكن بعد ذلك أيضًا ، هناك تعليقات توضيحية حول إمكانية الوصول يمكنك إضافتها إليها أيضًا.

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

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

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

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

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

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

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

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

سكوت: سؤال آخر ، لكن أعتقد أنه كان علينا التطرق إليه. في أي مرحلة من عمليتك تبدأ التفكير في إمكانية الوصول؟ سأفترض طوال العملية برمتها.

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

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

سكوت: أجل. عادلة بما فيه الكفاية. حسنًا ، في هذه الملاحظة ، نفد الوقت يا آرون. شكرا جزيلا على وقتك و-

آرون بيرلمان: كان ذلك رائعًا. لقد حظيت بوقت رائع.

سكوت: أعتقد أنك ستحضر المؤتمرين القادمين من Smashing.

آرون بيرلمان: سأكون هنا في نيويورك. سأكون في واحد في نيويورك.

سكوت: حسنًا. وهل أنتم تقومون بورشة عمل هناك؟

آرون بيرلمان: نعم ، نحن.

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

هذا هو التفاف!

نشكر Smashing members من أعماق قلوبنا لدعمهم المستمر واللطيف - ولا يمكننا الانتظار لاستضافة المزيد من الندوات عبر الإنترنت في المستقبل.

لا يمكننا أن نكون أكثر سعادة للترحيب بـ Aaron في SmashingConf New York القادم (15-16 أكتوبر) - نود أن نراك هناك أيضًا!

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