استخدام HTML الدلالي للاستفادة من ميزات لوحة المفاتيح بسهولة

باستخدام عناصر 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 المدمجة إلى تحسين إمكانية وصول المستخدمين إلى موقعك الإلكتروني بشكل كبير، وإلى تقليل حجم عملك بشكل كبير. حاوِل الانتقال من صفحة إلى أخرى في موقعك الإلكتروني باستخدام مفتاح التبويب (Tab) وبحثًا عن أي عناصر تحكّم لا تتيح استخدام لوحة المفاتيح. استبدِلها، إن أمكن، ببدائل HTML موحّدة.

قد تعثر أحيانًا على عنصر ليس له نظير في HTML. لا بأس. اطّلِع على المزيد من المعلومات لمعرفة كيفية إضافة ميزة التوافق مع لوحة المفاتيح إلى عناصر التحكّم المخصّصة والدائمة باستخدام tabindex.