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

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

الخلفية

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

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

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

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

قبل هذا التغيير، يجب التركيز على أدوات التمرير

قبل إجراء هذا التغيير، لم يكن بالإمكان التركيز على عنصر التمرير في علامة التبويب إلا إذا تم ضبط مؤشر Tabindex بشكل صريح على 0 أو أعلى. على سبيل المثال، يمكنك استخدام لغة CSS ولغة HTML التالية. بعد ذلك، حاول الضغط على مفتاح التبويب (Tab) من الزر الأول إلى عنصر التمرير.

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>
يمكن التركيز على شريط التمرير بسبب مؤشر تابوي إيجابي.

باستخدام فهرس Tab سلبي كما في 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>
لا يحتوي شريط التمرير على مؤشر Tab.

لاحظ أن شريط التمرير الذي يحتوي على عناصر فرعية قابلة للتركيز، كما في 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 124 مع أدوات تمرير قابلة للتركيز

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

<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 بحدّ أقصى 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>
يحتوي شريط التمرير على فهرس Tab بقيمة 0.

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