מקשי גלילה שניתן להתמקד בהם במקלדת

החל מגרסה 130 של Chrome, אפשר להתמקד במקלדת כברירת מחדל במקשי גלילה שאין להם צאצאים שניתן להתמקד בהם במקלדת.

רקע

גלילות קיימות בכל מקום. יכול להיות שתמצאו אותו בתיבה 'תנאים והגבלות', שבה צריך לגלול עד למטה כדי ללחוץ על לחצן השליחה. לחלופין, יכול להיות שתראו שורת תפריט אנכית עם סמלים לבחירה.

במקרים כאלה, משתמשי אינטרנט רבים משתמשים בתנועות למעלה ולמטה בעכבר או במשטח המגע כדי לגלול על פני הרכיב. עם זאת, התקן הצבעה, משטח מגע או מסך מגע הוא לא הדרך האופטימלית לניווט בדף. אנשים מסוימים מעדיפים לנווט בדף HTML שניגש לכל רכיב שניתן להתמקד בו באמצעות רק המקלדת שלהם. זה יכול לקרות מסיבות שונות. מאנשים שיש להם רעידות או בעיות אחרות שמקשות על הפעלת עכבר, מתקשים לאתר את סמן העכבר באופן חזותי, ואנשים אחרים שמשתמשים מתג או שליטה באמצעות הקול.

לפי השיטות המומלצות בנושא נגישות, כל התכונות חייבות להיות זמינות כשמשתמשים מקלדת. כך כולם יוכלו להשתמש באינטרנט בדרך שהכי מתאימה להם.

2.1.1 מקלדת: כל הפונקציונליות של התוכן ניתנת לתפעול באמצעות ממשק מקלדת, בלי צורך בתזמון ספציפי של הקשות בודדות, למעט מקרים שבהם הפונקציה הבסיסית דורשת קלט שמבוסס על נתיב התנועה של המשתמש ולא רק על נקודות הקצה. (רמה A)

לפני השינוי הזה להעברת המיקוד בגלילים

לפני השינוי הזה, ניתן להתמקד ברכיב גלילה באמצעות כרטיסייה רק אם ה-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 חיובי.

שימוש ב-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>
לרכיב הגלילה אין tabindex או צאצאים שניתן להתמקד בהם, אבל עדיין אפשר להתמקד בו.

הערה: ההתנהגות הזו מתרחשת רק אם בחלונית הגלילה אין ילדים שניתן להתמקד בהם. לדוגמה, אם כבר יש לחצן ברכיב הגלילה, כשמשתמשים ילחצו על מקש 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>
לפס ההזזה יש ערך tabindex של 0.

התכונה הזו מאפשרת למשתמשים לגלול במקלדת כברירת מחדל בכל המקרים, כך המשתמשים באינטרנט יוכלו ליהנות מחוויה חלקה יותר כשהם מנווטים בכרטיסיות דף.