مخططات تفاعلية قابلة للتنقل بلوحة المفاتيح

غالبًا ما تعرض المخططات التفاعلية القيم فقط عند التمرير بالمؤشر. ولا يمرر مستخدمو لوحة المفاتيح واللمس المؤشر، فتظل تلك البيانات محجوبة عنهم.

اسمح للمستخدمين بالانتقال باستخدام Tab إلى كل نقطة بيانات أو سلسلة، وذلك بمنحها tabindex="0". وهكذا تستطيع لوحة المفاتيح الوصول إلى ما يصل إليه تمرير الفأرة.

لا فائدة من نقطة قابلة للتركيز لا تعلن شيئًا. امنح كل نقطة اسمًا متاحًا يذكر تسميتها وقيمتها، مثل «مارس، 240 عملية بيع».

يُعد التنقل عبر 100 نقطة باستخدام Tab أمرًا مؤلمًا. استخدم مفاتيح الأسهم للانتقال من نقطة إلى أخرى، وخصّص Tab للدخول إلى المخطط والخروج منه.

أبقِ نقطة واحدة عند tabindex 0 والباقي عند -1، وانقل القيمة 0 عند الضغط على الأسهم. ويحافظ هذا roving tabindex على عدد نقاط التوقف عند Tab ضمن حد معقول.

اعرض عند التركيز كل ما يعرضه التلميح عند التمرير بالمؤشر. اربط كل معالج mouseenter بمعالج focus حتى تتطابق طريقتا الإدخال.

ميّز النقطة التي عليها التركيز حاليًا باستخدام outline أو علامة واضحة. فمن دون ذلك، لن يعرف مستخدمو لوحة المفاتيح موضعهم.

عند انتقال التركيز إلى نقطة جديدة، يمكن لمنطقة aria-live نطق قيمتها. ويفيد ذلك عندما تُعرض التسمية مرئيًا ولكنها لا تظهر في DOM.

ضع كل المحتوى داخل figure ذي اسم، حتى يتمكن المستخدمون من العثور عليه وتجاوزه كوحدة واحدة عند الانتهاء من استكشافه.

التفاعل إضافة وليس بديلًا. أبقِ دائمًا جدول البيانات البسيط، حتى يتوفر للمستخدمين مسار سهل عندما يكون التنقل بالأسهم بطيئًا جدًا.

أبعد الفأرة وتحكم في المخطط باستخدام Tab ومفاتيح الأسهم فقط. فإذا لم تتمكن من الوصول إلى كل قيمة، فلن يتمكن مستخدموك من ذلك أيضًا. ⌨️

تعلّمت جعل النقاط قابلة للتركيز ومُسمّاة، والتنقل بينها بالأسهم باستخدام roving tabindex، ومحاكاة التمرير عند التركيز، والإبقاء دائمًا على جدول عرض بديل. 🚀