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

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

רקע

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

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

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

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

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

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

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

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

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