باستخدام عناصر 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.
ويعود السبب في ذلك إلى أنّ تطبيقات قراءة الشاشة تُعلن عن الأزرار والروابط بشكل مختلف. يساعد استخدام العنصر الصحيح مستخدمي قارئ الشاشة في معرفة النتيجة المتوقعة.
قائمة المهام: DevSite - تقييم التفكير والتحقّق
التصميم
قد يصعب تصميم بعض العناصر المضمَّنة، ولا سيما <input>.
باستخدام أدوات CSS الذكية، يمكنك التغلب على بعض هذه القيود. يتضمّن مشروع WTFForms (الذي يحمل اسمًا مضحكًا)
مثالًا
لجدول الأنماط
يوضّح عددًا من التقنيات لتنسيق بعض الصعوبات
العناصر المضمّنة.
الخطوات التالية
يمكن أن يؤدي استخدام عناصر HTML المدمجة إلى تحسين إمكانية وصول المستخدمين إلى موقعك الإلكتروني بشكل كبير، وإلى تقليل حجم عملك بشكل كبير. جرِّب الانتقال من علامة تبويب إلى أخرى في موقعك الإلكتروني و ابحث عن أي عناصر تحكّم لا تتيح استخدام لوحة المفاتيح. استبدِل هذه العلامات، إن أمكن، ببدائل HTML موحّدة.
قد تعثر أحيانًا على عنصر ليس له نظير في HTML.
لا بأس. اطّلِع على المزيد من المعلومات لمعرفة كيفية إضافة ميزة التوافق مع لوحة المفاتيح إلى عناصر التحكّم المخصّصة والدمجية باستخدام tabindex.