بدءًا من Chrome 130، يمكن تلقائيًا التركيز على أشرطة التمرير في لوحة المفاتيح إذا لم يكن لديك يمكن للأطفال التركيز عليها باستخدام لوحة المفاتيح.
الخلفية
أشرطة التمرير متواجدة في كل مكان. يمكنك العثور على أحد البنود في قسم "الأحكام والشروط". صُنْدُوق حيث عليك الانتقال لأسفل الصفحة والنقر على زر الإرسال. أو قد تواجه شريط قوائم عمودي مليء بالأيقونات للاختيار من بينها.
في مثل هذه الحالات، يستخدم العديد من مستخدمي الويب حركات لأعلى إلى أسفل من الماوس أو لوحة اللمس للتمرير عبر العنصر. ومع ذلك، فإن جهاز التأشير أو لوحة اللمس أو الشاشة التي تعمل باللمس ليست الطريقة المثلى لكل مستخدم للتنقل في الصفحة. بعض الأشخاص تفضل التنقل عبر صفحة HTML للوصول إلى كل عنصر يمكن التركيز عليه باستخدام لوحة المفاتيح فقط. يمكن أن يرجع ذلك إلى عدة أسباب. من الأشخاص الذين لديهم الهزات أو غيرها من المشكلات التي تجعل من الصعب تشغيل الماوس، وأولئك الذين يواجهون صعوبة في تحديد الموقع الجغرافي لمؤشر الماوس بشكل مرئي، والمستخدمين الآخرين الذين يستخدمون مفتاح التبديل أو التحكم الصوتي.
تقترح أفضل ممارسات إمكانية الوصول بأن تكون جميع الميزات متاحة باستخدام لوحة مفاتيح. وبهذه الطريقة، يمكن للجميع استخدام الويب على أفضل نحو. لهم.
2.1.1 لوحة المفاتيح: الكل الوظائف من المحتوى قابل للتشغيل من خلال واجهة لوحة المفاتيح بدون الحاجة إلى توقيتات محددة لضغطات المفاتيح الفردية، باستثناء الدالة الأساسية تتطلب مدخلاً يعتمد على مسار مسار المستخدم الحركة وليس نقاط النهاية فقط. (المستوى أ)
قبل هذا التغيير للتركيز في التمريرات
قبل إجراء هذا التغيير، كان من الممكن التركيز على عنصر تمرير باستخدام مفتاح التبويب (Tab) فقط إذا كان فهرس 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 مع أشرطة تمرير يمكن التركيز عليها
وتتيح هذه الميزة لأشرطة التمرير بدون ضبط قيم فهرس Tab وبدون ضبط قدرة الأطفال على التركيز أكثر بلوحة المفاتيح. يسمح هذا للمستخدمين الذين لا يمكنهم أو اختيار عدم استخدام الماوس للتركيز على المحتوى باستخدام علامة التبويب والسهم في لوحة المفاتيح المفاتيح.
<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>
تتيح هذه الميزة إمكانية الوصول إلى أشرطة التمرير افتراضيًا بلوحة المفاتيح في جميع الحالات، ما يساعد مستخدمي الويب في الحصول على تجربة أكثر سلاسة عند التنقّل في علامة التبويب صفحة.