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