search

hasadna / datacity-k8s

1 stars 0 forks source link

ניראות מוקד המקלדת #88

Closed eilanabenish closed 3 years ago

eilanabenish commented 3 years ago

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

נסו לזהות כמה שיותר מהר היכן נמצא מוקד המקלדת היכן נמצא מוקד המקלדת

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

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

אפקט ויזואלי טוב בריחוף עכבר על קישורים

WCAG 2.0 SC 2.4.7 Focus Visible Level AA

OriHoch commented 3 years ago

צריך לאפיין

niryariv commented 3 years ago

אפיון:

add tabindex="0" to all the category buttons' <div> elements:

Screen Shot 2021-03-22 at 10 41 13

OriHoch commented 3 years ago

deployed