החל מגרסה 130 של Chrome, אפשר להתמקד במקלדת כברירת מחדל במקשי גלילה שאין להם צאצאים שניתן להתמקד בהם במקלדת.
רקע
גלילות קיימות בכל מקום. יכול להיות שתמצאו אותו בתיבה 'תנאים וכללים', שבה צריך לגלול עד למטה כדי ללחוץ על לחצן השליחה. לחלופין, יכול להיות שתראו שורת תפריט אנכית עם סמלים לבחירה.
במקרים כאלה, משתמשי אינטרנט רבים משתמשים בתנועות למעלה ולמטה בעכבר או במשטח המגע כדי לגלול על פני הרכיב. עם זאת, לא כל המשתמשים מעדיפים להשתמש באמצעי הצבעה, במשטח מגע או במסך מגע כדי לנווט בדף. יש אנשים שמעדיפים לנווט בדף HTML ולגשת לכל אלמנט שאפשר להתמקד בו באמצעות המקלדת בלבד. יכולות להיות לכך כמה סיבות. אנשים עם רעד או בעיות אחרות שקשה להשתמש בעזרתן בעכבר, אנשים שמתקשים לאתר באופן חזותי את סמן העכבר ואנשים שמשתמשים במתג יחיד או בשליטה קולית.
בהתאם לשיטות המומלצות בנושא נגישות, כל התכונות צריכות להיות זמינות באמצעות מקלדת. כך כולם יוכלו להשתמש באינטרנט בדרך שהכי מתאימה להם.
2.1.1 מקלדת: כל הפונקציונליות של התוכן ניתנת לתפעול באמצעות ממשק מקלדת, בלי צורך בתזמון ספציפי של הקשות בודדות, למעט מקרים שבהם הפונקציה הבסיסית דורשת קלט שמבוסס על נתיב התנועה של המשתמש ולא רק על נקודות הקצה. (רמה A)
לפני השינוי הזה להעברת המיקוד בגלילים
לפני השינוי הזה, אפשר היה להתמקד ברכיב גלילה באמצעות מקש Tab רק אם הגדרתם את ה-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>
אם משתמשים ב-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 מוגדר וללא צאצאים שניתן להתמקד בהם להיות ניתנים לגלילה במקלדת. כך משתמשים שלא יכולים להשתמש בעכבר או בוחרים לא להשתמש בו יוכלו להתמקד בתוכן באמצעות מקש 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, המיקוד במסך ידלג על הרכיב ויעבור ישירות ללחצן. במקרה כזה, אפשר לגשת לתוכן של רכיב הגלילה כבר באמצעות מקשי החיצים, ברגע שהלחצן מקבל את המיקוד. בגלל הכלל הזה, יכול להיות שההתנהגות שמוגדרת כברירת מחדל לא תמיד תהיה האופטימלית ביותר אם קיימים צאצאים כאלה. אם רוצים שאפשר יהיה להשתמש במקלדת כדי להתמקד ברכיב הגלילה עצמו במצב כזה, מומלץ להגדיר ערך 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>
התכונה הזו מאפשרת לגשת לגלילה באמצעות המקלדת כברירת מחדל בכל המקרים, וכך למשתמשים באינטרנט תהיה חוויה חלקה יותר כשהם מנווטים בדף באמצעות Tab.