التفاعل عبر لوحة المفاتيح

المفتاحالإجراء
Enter أو المسافةعلى زر الفتح: يفتح القائمة على أول عنصر فيها. وعلى عنصر: يختاره، أو يفتح قائمته الفرعية.
السهم لأسفلعلى زر الفتح: يفتح القائمة على أول عنصر فيها. وداخل القائمة: ينتقل إلى العنصر التالي.
السهم لأعلىعلى زر الفتح: يفتح القائمة على آخر عنصر فيها. وداخل القائمة: ينتقل إلى العنصر السابق.
Home وEndينتقل إلى العنصر الأول أو الأخير.
السهم الأيمنيفتح قائمة فرعية وينتقل إلى أول عنصر فيها (السهم الأيسر في النصوص من اليمين إلى اليسار).
السهم الأيسريُغلق القائمة الفرعية ويعود إلى العنصر الذي فتحها (السهم الأيمن في النصوص من اليمين إلى اليسار).
Escيُغلق القائمة ويُعيد التركيز إلى زر الفتح.
الأحرفينتقل إلى العنصر التالي الذي تبدأ تسميته بالنص المكتوب.

ملاحظات إمكانية الوصول

  • يحصل زر الفتح على aria-haspopup وaria-expanded وaria-controls؛ وتحصل القائمة وعناصرها على أدوار ARIA من Angular Aria.
  • يستخدم العنصر المُبرَز تعبئة مُصمتة بتباين نص لا يقل عن 4.5:1، ويؤدي في الوقت نفسه دور مؤشر التركيز. وفي وضع الألوان المفروضة يحصل على إطار تمييز بألوان النظام.
  • تُعلن العناصر القابلة للتحديد عن حالتها عبر aria-checked.
  • يؤدي اختيار عنصر إلى إغلاق القائمة وإعادة التركيز إلى زر فتحها. كما يُغلقها نقل التركيز إلى خارج الزر والقائمة.
  • لا يقل ارتفاع العناصر عن 28 بكسل، وهو أعلى من الحد الأدنى لحجم الهدف في WCAG 2.2.