اسکرول های قابل فوکوس روی صفحه کلید

از Chrome 130، اسکرول‌ها به‌طور پیش‌فرض قابل فوکوس روی صفحه‌کلید هستند، در صورتی که کودکان قابل فوکوس روی صفحه‌کلید نداشته باشند.

پس زمینه

اسکرولرها همه جا هستند. ممکن است یکی را در کادر «شرایط و ضوابط» بیابید، جایی که باید تا انتها پایین بروید تا روی دکمه ارسال کلیک کنید. یا، ممکن است با یک نوار منوی عمودی پر از نمادها برای انتخاب روبرو شوید.

در چنین مواردی، بسیاری از کاربران وب از حرکات بالا به پایین ماوس یا صفحه لمسی خود برای پیمایش در سراسر عنصر استفاده می کنند. با این حال، دستگاه اشاره گر، پد لمسی یا صفحه لمسی راه بهینه هر کاربر برای پیمایش یک صفحه نیست. برخی از افراد ترجیح می دهند در صفحه HTML حرکت کنند و تنها با استفاده از صفحه کلید خود به هر عنصر قابل تمرکز دسترسی داشته باشند. این می تواند به دلایل مختلفی باشد. از افرادی که لرزش یا مشکلات دیگری دارند که کار کردن با ماوس را دشوار می‌کند، افرادی که در مکان یابی مکان‌نمای ماوس از نظر بصری مشکل دارند و سایرین که از یک سوئیچ یا کنترل صوتی استفاده می‌کنند.

بهترین شیوه‌های دسترس‌پذیری توصیه می‌کنند که همه ویژگی‌ها باید با استفاده از صفحه‌کلید در دسترس باشند. به این ترتیب، همه می توانند از وب به روشی استفاده کنند که بهترین کار را برای آنها دارد.

2.1.1 صفحه کلید: همه عملکردهای محتوا از طریق یک رابط صفحه کلید بدون نیاز به زمان بندی خاص برای ضربه زدن به تک تک کلیدها قابل اجرا است، به جز مواردی که عملکرد زیربنایی به ورودی نیاز دارد که به مسیر حرکت کاربر بستگی دارد و نه فقط به نقاط پایانی. (سطح A)

قبل از این تغییر برای تمرکز در اسکرول

قبل از این تغییر، یک عنصر پیمایشگر فقط در صورتی می‌تواند روی برگه متمرکز شود که شاخص برگه به ​​صراحت روی 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 با پیمایشگرهای قابل فوکوس

این ویژگی به اسکرول‌های بدون تنظیم مقدار 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>

توجه داشته باشید که این رفتار فقط در صورتی اتفاق می‌افتد که پیمایش فرزند قابل تمرکز نداشته باشد. به عنوان مثال، اگر پیمایش قبلاً دارای یک دکمه باشد، فوکوس برگه از پیمایش رد می‌شود و مستقیماً روی دکمه تمرکز می‌کند. در این حالت، پس از فوکوس کردن دکمه، می‌توان از قبل با استفاده از کلیدهای جهت‌نما به محتوای پیمایش دسترسی داشت. با توجه به این قانون، در صورت وجود چنین کودکانی، پیش فرض ممکن است همیشه به بهترین شکل رفتار نکند. اگر می‌خواهید خود عنصر اسکرول در این شرایط قابل فوکوس روی صفحه‌کلید باشد، توصیه می‌شود مقدار شاخص تب 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>

این ویژگی به اسکرول‌ها اجازه می‌دهد تا در همه موارد به‌طور پیش‌فرض از صفحه‌کلید قابل دسترسی باشند، که به کاربران وب کمک می‌کند هنگام پیمایش برگه‌ها در صفحه، تجربه‌ای روان‌تر داشته باشند.