باستخدام عناصر HTML الدلالية الصحيحة، قد تتمكّن من تلبية معظم أو كل
احتياجاتك المتعلّقة بالوصول إلى لوحة المفاتيح. وهذا يعني تقليل الوقت الذي تقضيه في التعامل مع tabindex،
وزيادة عدد المستخدمين الراضين.
إتاحة لوحة المفاتيح مجانًا (وتجارب أفضل على الأجهزة الجوّالة)
هناك عدد من العناصر التفاعلية المضمّنة التي تتضمّن دلالات مناسبة وتوفر إمكانية استخدام الوحة المفاتيح. في ما يلي الأدوات الأكثر استخدامًا من قِبل المطوّرين:
بالإضافة إلى ذلك، يتم أحيانًا استخدام العناصر التي تحتوي على السمة
contenteditable
لإدخال نص لا يتّبع تنسيقًا معيّنًا.
من السهل تجاهل ميزة لوحة المفاتيح المدمجة التي توفّرها هذه العناصر.
في ما يلي بعض الأمثلة على العناصر التي يمكنك استكشافها. بدلاً من استخدام
الماوس، جرِّب استخدام لوحة المفاتيح للتحكم فيهما. يمكنك استخدام TAB (أو SHIFT +
TAB) للتنقّل بين عناصر التحكّم، ويمكنك استخدام مفاتيح الأسهم ومفاتيح مثل
ENTER وSPACE لتعديل قيمها.
إذا كان لديك هاتف في متناول اليد، يمكنك ملاحظة أنّ هذه العناصر المضمّنة تؤدي في كثير من الأحيان إلى تفاعلات فريدة على الأجهزة الجوّالة. إنّ محاولة إعادة إنتاج هذه التفاعلات على الأجهزة الجوّالة بنفسك يتطلّب الكثير من الجهد. وهذا سبب آخر جيد للالتزام باستخدام العناصر المضمّنة كلما أمكن.
استخدِم button بدلاً من div.
من الممارسات الشائعة المضادة لأدوات تسهيل الاستخدام هي التعامل مع عنصر غير تفاعلي، مثل
div أو span، كزر من خلال إضافة معالِج نقرة إليه.
ولكن لكي يتم اعتبار الزرّ سهل الاستخدام، يجب أن يستوفي الشروط التالية:
- أن تكون قابلة للتركيز عليها باستخدام لوحة المفاتيح
- إيقاف الدعم
- إتاحة استخدام مفتاحَي
ENTERأوSPACEلتنفيذ إجراء - أن يقرأها قارئ الشاشة بشكل صحيح
لا يحتوي الزر div على أيّ من هذه العناصر. وهذا يعني أنّك ستحتاج إلى كتابة
رمز إضافي لإعادة إنشاء ما يوفّره لك عنصر button مجانًا.
على سبيل المثال، تحتوي عناصر button على حيلة رائعة تُعرف باسم *تفعيل
النقرة الاصطناعي*. في حال إضافة معالِج "النقر" إلى button، سيتم تنفيذه عندما يضغط المستخدِم على ENTER أو SPACE. لا يتضمّن الزر div هذه الميزة، لذلك
عليك كتابة رمز إضافي للاستماع إلى الحدث keydown والتحقّق
من أنّ رمز المفتاح هو ENTER أو SPACE، ثمّ تشغيل معالِج النقر. أُوه
هذا يتطلب الكثير من العمل الإضافي.
قارِن الفرق في هذا المثال. TAB للتحكّم، واستخدام ENTER
وSPACE لمحاولة النقر عليها.
إذا كان لديك أزرار div في موقعك الإلكتروني أو تطبيقك الحالي، ننصحك
باستبدالها بعناصر button. button هو تنسيق سهل التصميم ومليء بالميزات التي تُسهِّل سهولة الاستخدام.
الروابط مقابل الأزرار
ومن الأساليب الشائعة الأخرى التي يجب تجنّبها هي التعامل مع الروابط على أنّها أزرار من خلال إرفاق سلوك JavaScript بها.
<a href="#" onclick="// perform some action">
تتيح كلّ من الأزرار والروابط استخدام شكل من أشكال تفعيل النقرات الاصطناعي. إذًا، أيّ خيار من بينها يناسبك؟
- إذا كان النقر على العنصر سيؤدي إلى تنفيذ إجراء على الصفحة، استخدِم
<button>. - إذا كان النقر على العنصر سيؤدي إلى الانتقال بالمستخدم إلى صفحة جديدة، استخدِم
<a>. ويشمل ذلك تطبيقات الويب التي تتألف من صفحة واحدة وتحمل محتوى جديدًا وتُعدِّل عنوان URL باستخدام History API.
ويعود السبب في ذلك إلى أنّ تطبيقات قراءة الشاشة تُعلن عن الأزرار والروابط بشكل مختلف. يساعد استخدام العنصر الصحيح مستخدمي برامج قراءة الشاشة في معرفة النتيجة التي يمكن توقّعها.
TODO: DevSite - Think and Check assessment
التصميم
قد يكون من الصعب تطبيق نمط على بعض العناصر المضمّنة، لا سيما <input>.
باستخدام بعض تنسيقات CSS الذكية، قد تتمكّن من التغلب على بعض
القيود. يتضمّن مشروع WTFForms (الذي يحمل اسمًا مضحكًا)
مثالًا
لجدول الأنماط
يوضّح عددًا من التقنيات لتنسيق بعض الصعوبات
العناصر المضمّنة.
الخطوات التالية
يمكن أن يؤدي استخدام عناصر HTML المدمجة إلى تحسين إمكانية وصول المستخدمين إلى موقعك الإلكتروني بشكل كبير، وإلى تقليل حجم عملك بشكل كبير. جرِّب الانتقال من علامة تبويب إلى أخرى في موقعك الإلكتروني و ابحث عن أي عناصر تحكّم لا تتيح استخدام لوحة المفاتيح. استبدِل هذه العلامات، إن أمكن، ببدائل HTML موحّدة.
قد تعثر أحيانًا على عنصر ليس له نظير في HTML.
لا بأس. اطّلِع على المزيد من المعلومات لمعرفة كيفية إضافة ميزة التوافق مع لوحة المفاتيح إلى عناصر التحكّم المخصّصة والدائمة باستخدام tabindex.