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

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

רקע

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

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

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

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

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

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

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

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

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