باستخدام عناصر 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.