نظرة عامة على تركيز الشاشة في تسهيل الاستخدام
سنتحدث في هذا الدرس عن ميزة التركيز وكيفية إدارتها في التطبيق. يشير التركيز إلى عنصر التحكم الذي يظهر على الشاشة (عنصر إدخال مثل حقل أو مربّع اختيار أو زر أو رابط) يتلقّى إدخالاً من لوحة المفاتيح. ومن الحافظة عند لصق المحتوى.
هذا مكان رائع لبدء التعرف على إمكانية الوصول لأننا جميعًا نعرف استخدام لوحة المفاتيح، يسهل الارتباط بها واختبارها، وتستفيد جميع المستخدمين تقريبًا.
المستخدمون الذين يعانون من إعاقات حركية، والتي قد تكون أي شيء من الشلل الدائم التواء في معصمك، قد تعتمد على لوحة مفاتيح أو جهاز تبديل لذا فإن استراتيجية التركيز الجيدة تعد أمرًا بالغ الأهمية لتوفير تجربة جيدة معهم.
وبالنسبة للمستخدمين المتمرسين الذين يعرفون كل اختصارات لوحة المفاتيح على أجهزتهم، فإن والقدرة على التنقل بسرعة في موقعك باستخدام لوحة المفاتيح وحدها أكثر إنتاجية.
وبالتالي، تضمن استراتيجية التركيز المنفَّذة جيدًا أن ذات تجربة أفضل. سنرى في الدروس القادمة أنّ والجهد الذي تبذله في التركيز هو أساس مهم لدعم ومستخدمي التكنولوجيا، وفي الواقع، جميع المستخدمين.
ما هو التركيز؟
يحدِّد التركيز مكان انتقال أحداث لوحة المفاتيح في الصفحة في أي لحظة معيّنة. بالنسبة سبيل المثال، إذا ركزت على حقل إدخال نص وبدأت في الكتابة، فإن حقل الإدخال يتلقى أحداث لوحة المفاتيح ويعرض الأحرف التي تكتبها. في حين أنه يحتوي على التركيز، سيتلقّى أيضًا مدخلات تم لصقها من الحافظة.
غالبًا ما يُشار إلى العنصر الذي يتم التركيز عليه حاليًا بواسطة حلقة التركيز، وهي نمط يعتمد على المتصفّح وعلى أيّ نمط لدى مؤلف الصفحة المنهجية. فعلى سبيل المثال، يسلط Chrome على سبيل المثال الضوء على العناصر محل التركيز باستخدام علامة الحد، بينما يستخدم فايرفوكس حدًا متقطعًا.
يعمل بعض المستخدمين على تشغيل أجهزة الكمبيوتر بشكل كامل تقريبًا باستخدام لوحة المفاتيح أو جهاز إدخال. بالنسبة لهؤلاء المستخدمين، فإن التركيز أمر بالغ الأهمية؛ إنها وسيلتهم الأساسية الوصول إلى كل شيء على الشاشة. لهذا السبب، تنص قائمة تحقق AIM على الويب في القسم 2.1.1 بأن جميع وظائف الصفحة يجب أن تكون متاحة باستخدام لوحة المفاتيح، إلا إذا كان ذلك أمرًا لا يمكنك تنفيذه باستخدام لوحة المفاتيح، مثل الرسم الحر.
بصفتك مستخدمًا، يمكنك تحديد العنصر الذي يتم التركيز عليه حاليًا باستخدام Tab،
Shift+Tab، أو مفاتيح الأسهم. في نظام التشغيل Mac OSX، تعمل هذه الطريقة بشكل مختلف قليلاً:
بينما يتيح لك Chrome دائمًا التنقّل باستخدام Tab، يجب الضغط على Option+Tab
لتغيير التركيز في المتصفحات الأخرى مثل Safari (يمكنك تغيير هذا الإعداد في
قسم لوحة المفاتيح ضمن تفضيلات النظام).
الترتيب الذي ينتقل به التركيز للأمام وللخلف من خلال التفاعل
العناصر من خلال Tab، وليس من المستغرب اسم ترتيب علامات التبويب. من المهم جدًا ضمان
تصميم صفحتك بترتيب التنقل بـ Tab منطقي خطوة مهمة
تناولها لاحقًا.
ما الذي يمكن التركيز عليه؟
عناصر HTML التفاعلية المضمنة، مثل الحقول النصية والأزرار والقوائم المحددة. يمكن التركيز عليها بشكل ضمني، ما يعني أنّه يتم إدراجها تلقائيًا في علامة التبويب الترتيب والتعامل مع أحداث لوحة المفاتيح المضمَّنة بدون تدخّل المطوِّر.
ولكن ليست كل العناصر قابلة للتركيز؛ والفقرات وdivs وصفحات أخرى متنوعة لا يتم التركيز عليها عند التنقل في الصفحة، وذلك عن طريق التصميم. لا داعي عمومًا للتركيز على شيء ما إذا لم يستطع المستخدم التفاعل معه.
التركيز على الموضوع
لنجرب بعض أساليب التركيز التي ناقشناها للتو. باستخدام Chrome، انتقل إلى هذا النموذج التجريبي لموقع شركة الطيران والبحث عن تذكرة معيّنة باستخدام لوحة المفاتيح فقط. لا تحتوي الصفحة على قبول إدخالات الماوس، لذلك لا يمكنك التلاعب في التمرين (لا أننا لا نثق بك ;-).
معلمات طلب الدعم التي يجب تحديدها هي:
- اتجاه واحد
- إلى ملبورن
- المغادرة في 12 تشرين الأول (أكتوبر) 2017 (12/10/2017)
- العودة في 23 تشرين الأول (أكتوبر) 2017 (23/10/2017)
- مقعد مزوّد بنافذة
- لا أريد تلقّي عروض ترويجية
عند إكمال النموذج بنجاح بدون أخطاء في الإدخال وتفعيل زر البحث، سيتم محو النموذج وإعادة ضبطه. امضِ قدمًا وأكمل ثم ارجع.
لنفحص كيف يستخدم النموذج إدخال لوحة المفاتيح. البدء بأول
بضع نقرات على Tab، سيسلّط المتصفّح الضوء على عناصر التنقّل في "رحلات جوية من Google"،
والفنادق والسيارات المستأجرة. أثناء الضغط على Tab، تنتقل إلى
أزرار الاختيار، حيث يمكنك الاختيار من بين "رحلات ذهاب وعودة" أو "اتجاه واحد" أو "مدن متعددة"
باستخدام مفاتيح الأسهم.
تابع خلال حقلي الاسم والعنوان، واملأ البيانات المطلوبة. المعلومات. عند وصولك إلى عنصر تحديد الوجهة، يمكنك استخدام مفاتيح الأسهم لاختيار مدينة، أو يمكنك بدء الكتابة لإكمال الحقل تلقائيًا. وبالمثل، في حقول التاريخ، يمكنك استخدام مفاتيح الأسهم أو كتابة تاريخ فقط.
يعتمد تحديد نوع المقعد أيضًا على مفاتيح الأسهم، أو يمكنك كتابة "w" أو "a" أو
أو "n" للانتقال إلى خيار المقعد. يمكنك بعد ذلك إيقاف العروض الترويجية
تلقائيًا من خلال الضغط على مفتاح المسافة مع التركيز على مربّع الاختيار. أخيرًا، ركز
زر البحث واضغط على Enter لإرسال النموذج.
من المفيد جدًا التفاعل مع نموذج باستخدام لوحة المفاتيح فقط وعدم للتبديل إلى الماوس والعودة لإكمال مهمة. نظرًا لأن جميع العناصر المستخدمة في النموذج هي علامات HTML أصلية مع تركيز ضمني، فإن النموذج يعمل بشكل جيد باستخدام لوحة المفاتيح، ولن تحتاجي إلى كتابة أي رموز لإضافة التركيز أو إدارته السلوك.