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

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

الخلفية

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

في هذه الحالات، يستخدم العديد من مستخدمي الويب حركات التنقّل للأعلى أو للأسفل من الماوس أو لوحة اللمس للانتقال عبر العنصر. ومع ذلك، لا تكون جهاز التأشير أو لوحة اللمس أو الشاشة التي تعمل باللمس هي الطريقة المثلى لكل مستخدم للتنقّل في الصفحة. يفضّل بعض الأشخاص التنقّل في صفحة 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>

باستخدام فهرس علامة التبويب السلبي كما هو موضّح في رمز 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 مع أشرطة تمرير يمكن التركيز عليها

وتتيح هذه الميزة لأشرطة التمرير التي لم يتم ضبط قيمة 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>

يُرجى العِلم أنّ هذا السلوك لا يحدث إلا إذا لم يكن لدى شريط التمرير عناصر أطفال يمكن التركيز عليها. على سبيل المثال، إذا كان شريط التمرير يحتوي بالفعل على زر، فعندئذ سيتخطى تركيز علامة التبويب شريط التمرير ويركز على الزر مباشرة. في هذه الحالة، يمكن الوصول إلى محتوى شريط التمرير باستخدام مفاتيح الأسهم بعد تركيز الزر. وبسبب هذه القاعدة، قد لا يعمل الإعداد التلقائي دائمًا بالطريقة الأفضل إذا كانت هذه العناصر الفرعية متوفّرة. إذا كنت تريد أن يكون عنصر التمرير نفسه قابلاً للتركيز باستخدام لوحة المفاتيح في هذه الحالة، ننصحك بضبط قيمة 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>

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