كيفية إتاحة واجهات الويب بلوحة المفاتيح

إتاحة واجهات الويب بلوحة المفاتيح تعني أن يستطيع المستخدم الوصول إلى الأزرار والروابط والنماذج وتشغيلها دون الحاجة إلى فأرة. وتُعد هذه القدرة أساسية لعدد كبير من المستخدمين، ومن بينهم من يعتمدون على التقنيات المساعدة. لذلك يبدأ التصميم الصحيح بعناصر HTML الدلالية، لا بإضافة أحداث JavaScript إلى عناصر غير تفاعلية.

ما المتطلبات الأساسية لإتاحة واجهات الويب بلوحة المفاتيح

للبدء، يحتاج المثال التالي إلى متصفح حديث ومحرر نصوص فقط. أنشئ ملفًا باسم keyboard-demo.html، والصق الكود ثم افتحه في المتصفح. المثال مستقل ولا يحتاج مكتبات أو خادمًا. وهو يعرض رابط انتقال سريع وزرًا وقسم تفاصيل يمكن فتحه وإغلاقه بلوحة المفاتيح.

كيفية إنشاء واجهة قابلة للتنقل بلوحة المفاتيح

<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تجربة التنقل بلوحة المفاتيح</title>
<style>
  body { font: 18px/1.7 system-ui; margin: 2rem; }
  .skip-link { position: absolute; top: -5rem; right: 1rem; }
  .skip-link:focus { top: 0.5rem; background: white; }
  :focus-visible { outline: 3px solid #175fd0; outline-offset: 4px; }
  button { padding: .6rem 1rem; cursor: pointer; }
</style>
</head>
<body>
<a class="skip-link" href="#main">انتقل إلى المحتوى</a>
<header><a href="#info">اقرأ المعلومات</a></header>
<main id="main" tabindex="-1">
  <h1>تجربة لوحة المفاتيح</h1>
  <button type="button" id="action">اضغط للتجربة</button>
  <p id="result" role="status" aria-live="polite"></p>
  <details id="info">
    <summary>كيف تعمل التجربة</summary>
    <p>استخدم Tab للتنقل وEnter لفتح التفاصيل.</p>
  </details>
</main>
<script>
  document.getElementById('action').addEventListener('click', () => {
    document.getElementById('result').textContent = 'نجحت العملية';
  });
</script>
</body>
</html>

وبذلك، تتيح عناصر الرابط والزر والتفاصيل وظائف لوحة المفاتيح افتراضيًا. كما تساعد قاعدة CSS المعتمدة على ‎:focus-visible في إظهار موضع التركيز. أما ‎role=”status” فيتيح الإعلان عن تغيير النص للتقنيات المساعدة دون نقل التركيز بصورة مفاجئة.

كيفية اختبار عناصر الواجهة دون فأرة

1. اترك الفأرة جانبًا، ثم اضغط Tab من بداية الصفحة وراقب ترتيب العناصر التي تستقبل التركيز.
2. اضغط Enter على الرابط ثم على الزر. اضغط Space عند التركيز على الزر لتجربة تفعيله أيضًا.
3. انتقل إلى عنوان «كيف تعمل التجربة» واضغط Enter لفتح التفاصيل وإغلاقها.
4. ارجع باستخدام Shift + Tab، وتحقق من بقاء مؤشر التركيز ظاهرًا في كل خطوة.
5. فعّل تنقل لوحة المفاتيح الكامل من إعدادات المتصفح أو النظام عند الحاجة، وكرر الاختبار باستخدام قارئ شاشة إن توفر.

أخطاء شائعة في إتاحة واجهات الويب بلوحة المفاتيح

في المقابل، من الأخطاء تحويل عنصر div إلى زر شكلي دون دعم التركيز أو مفاتيح التفعيل. كذلك يؤدي استعمال tabindex بقيمة موجبة إلى ترتيب غير متوقع. وقد تحذف بعض ملفات CSS إطار التركيز بواسطة outline: none دون توفير بديل واضح، فيضيع موضع المستخدم.

بالإضافة إلى ذلك، توضح إرشادات W3C الرسمية كيفية التعامل مع التنقل داخل المكونات المتقدمة. وإذا كنت تعمل على صفحة متجاوبة، فقد يفيد أيضًا درس إنشاء واجهة متجاوبة باستخدام CSS Grid. لكن الاستجابة للشاشات وحدها لا تضمن إتاحة لوحة المفاتيح.

متى تحتاج إلى JavaScript إضافي

أما المكونات المخصصة فتحتاج مثل النوافذ الحوارية المعقدة إلى إدارة حركة التركيز والإغلاق والعودة إلى عنصر التشغيل. أما الأزرار والروابط العادية فالأفضل استخدام عناصرها الأصلية بدل إعادة اختراع سلوكها. استعمل اختبار لوحة المفاتيح المباشر معيارًا للتحقق، ولا تكتفِ بمظهر الصفحة.