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

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

רקע

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

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

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

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

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

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

החל מגרסה 130 של Chrome עם גלילה שניתן להתמקד בה

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

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