أدوات التمرير عبر لوحة المفاتيح التي يمكن التركيز عليها

اعتبارًا من الإصدار 130 من Chrome، يمكن التركيز تلقائيًا على أشرطة التمرير باستخدام لوحة المفاتيح إذا لم تكن تحتوي على عناصر فرعية يمكن التركيز عليها باستخدام لوحة المفاتيح.

الخلفية

أشرطة التمرير متواجدة في كل مكان. يمكنك العثور على أحد البنود في قسم "الأحكام والشروط". صُنْدُوق حيث عليك الانتقال لأسفل الصفحة والنقر على زر الإرسال. أو قد تواجه شريط قوائم عمودي مليء بالأيقونات للاختيار من بينها.

في مثل هذه الحالات، يستخدم العديد من مستخدمي الويب حركات لأعلى إلى أسفل من الماوس أو لوحة اللمس للتمرير عبر العنصر. ومع ذلك، لا تكون جهاز التأشير أو لوحة اللمس أو الشاشة التي تعمل باللمس هي الطريقة المثلى لكل مستخدم للتنقّل في الصفحة. يفضّل بعض الأشخاص التنقّل في صفحة HTML للوصول إلى كل عنصر يمكن التركيز عليه باستخدام لوحة المفاتيح فقط. يمكن أن يرجع ذلك إلى عدة أسباب. بدءًا من الأشخاص الذين يعانون من الارتعاش أو مشاكل أخرى تصعِّب استخدام الماوس، إلى الذين испытывают الصعوبة في تحديد موضع مؤشر الماوس بصريًا، والآخرين الذين يستخدمون مفاتيح تحول واحدة أو التحكّم الصوتي

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

2.1.1 لوحة المفاتيح: يمكن تشغيل كل وظائف المحتوى من خلال واجهة لوحة مفاتيح بدون الحاجة إلى أوقات محددة لضغطات المفاتيح الفردية، إلا إذا كانت الوظيفة الأساسية تتطلّب إدخالًا يعتمد على مسار تنقّل المستخدم وليس فقط نقاط النهاية. (المستوى أ)

قبل هذا التغيير للتركيز في التمريرات

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

div.scroll, button {
  border: 1px solid lightgray;
  margin-top: 1em;
  border-radius: 0.5em;
}

div.scroll {
  overflow: auto;
  width: 20em;
  height: 5em;
  display: block;
}
div.long {
  width: 10em;
  height: 10em;
}

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>

باستخدام مؤشر Tabindex سلبي كما في HTML التالي، سيتم تم تخطيه.

<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>

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

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>

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

<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>

من Chrome 130 مع أشرطة تمرير يمكن التركيز عليها

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

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>

يُرجى العِلم أنّ هذا السلوك لا يحدث إلا إذا لم يكن لعنصر التمرير عناصر فرعية يمكن التركيز عليها. على سبيل المثال، إذا كانت أداة التمرير تحتوي على زر، سيؤدي الضغط على مفتاح التبويب (Tab) إلى تخطّي أداة التمرير والتركيز على الزر مباشرةً. في هذه الحالة، يمكن الوصول إلى محتوى شريط التمرير باستخدام مفاتيح الأسهم بعد تركيز الزر. وبسبب هذه القاعدة، قد لا يعمل الإعداد التلقائي دائمًا بالطريقة الأفضل إذا كانت هذه العناصر الفرعية متوفّرة. إذا كنت تريد أن يكون عنصر التمرير نفسه قابلاً للتركيز باستخدام لوحة المفاتيح في هذه الحالة، ننصحك بضبط قيمة tabindex على 0 أو أعلى.

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>

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