זה הולך להיות הפוסט השני בסדרה קטנה שאנחנו עושים בנושא נגישות טפסים. אם פספסת את הפוסט הראשון, בדוק טפסים נגישים עם שיעורי פסאודו. בפוסט זה אנו הולכים להסתכל על :focus-visible וכיצד להשתמש בו באתרי האינטרנט שלך!
פוקוס נקודת מגע
לפני שנתקדם עם :focus-visible
, בוא נבדוק שוב איך :focus
עובד ב-CSS שלך. מיקוד הוא האינדיקטור החזותי שקיים אינטראקציה עם אלמנט באמצעות מקלדת, עכבר, משטח עקיבה או טכנולוגיה מסייעת. אלמנטים מסוימים הם אינטראקטיביים באופן טבעי, כמו קישורים, כפתורים ורכיבי טופס. אנחנו רוצים לוודא שהמשתמשים שלנו יודעים היכן הם נמצאים ואת האינטראקציות שהם מבצעים.
זכור אל תעשה זאת ב-CSS שלך!
:focus {
outline: 0;
}
/*** OR ***/
:focus {
outline: none;
}
כאשר אתה מסיר פוקוס, אתה מסיר אותו עבור כל אחד! אנחנו רוצים לוודא שאנחנו שומרים על הפוקוס.
אם מסיבה כלשהי אתה צריך להסיר את הפוקוס, ודא שיש גם נפילה :focus
סגנונות עבור המשתמשים שלך. החזרה הזו יכולה להתאים לצבעי המיתוג שלך, אבל וודא שהצבעים האלה גם נגישים. אם השיווק, העיצוב או המיתוג לא אוהבים את סגנונות ברירת המחדל של הטבעת המיקוד, אז זה הזמן להתחיל לנהל שיחות ולשתף איתם פעולה על הדרך הטובה ביותר להוסיף אותם בחזרה.
focus-visible?
מה כיתת הפסאודו, :focus-visible
, הוא בדיוק כמו ברירת המחדל שלנו :focus
מחלקה פסאודו. זה נותן למשתמש אינדיקטור שמשהו מתמקד בדף. הדרך בה אתה כותב :focus-visible
חתוך ויבש:
:focus-visible {
/* ... */
}
כשמשתמש :focus-visible
עם אלמנט מסוים, התחביר נראה בערך כך:
.your-element:focus-visible {
/*...*/
}
הדבר הגדול בשימוש :focus-visible
האם אתה יכול להבליט את האלמנט שלך, בהיר ונועז! אין צורך לדאוג שזה יראה אם הרכיב נלחץ/הקשה. אם תבחר לא ליישם את המחלקה, ברירת המחדל תהיה טבעת המיקוד של סוכן המשתמש, שבעיני חלקם אינה רצויה.
focus-visible
סיפור רקע של לפני שהיה לנו את :focus-visible
, הסגנון של סוכן המשתמש יחול :focus
לרוב האלמנטים בדף; כפתורים, קישורים וכו'. זה יחיל קו מתאר או "טבעת מיקוד" על האלמנט הניתן למיקוד. זה נחשב למכוער, רובם לא אהבו את טבעת המיקוד המוגדרת כברירת מחדל שהדפדפן סיפק. כתוצאה מכך שטבעת המיקוד הייתה לא טובה לצפייה, רוב המחברים הסירו אותה... ללא נסיגה. זכור, כאשר אתה מסיר :focus
, זה מקטין את השימושיות והופך את החוויה ללא נגישה עבור משתמשי מקלדת.
במצב הנוכחי של האינטרנט, הדפדפן כבר לא מצביע באופן גלוי על מיקוד סביב אלמנטים שונים כאשר יש להם מיקוד. במקום זאת, הדפדפן משתמש בהיוריסטיקות שונות כדי לקבוע מתי הוא יעזור למשתמש, ומספק טבעת מיקוד בתמורה. לפי חאן אקדמיה, היוריסטיקה היא, "טכניקה שמנחה אלגוריתם למצוא בחירות טובות."
המשמעות היא שהדפדפן יכול לזהות אם המשתמש מקיים אינטראקציה עם החוויה ממקלדת, עכבר או משטח עקיבה, ועל סמך סוג הקלט הזה, הוא מוסיף או מסיר את טבעת המיקוד. הדוגמה בפוסט זה מדגישה את אינטראקציית הקלט.
בימים הראשונים של :focus-visible
השתמשנו ב- a מילוי רב כדי להתמודד עם טבעת המיקוד שיצרו אליס בוקסהול ובריאן קרדל, מוזילה יצאו גם עם שיעור פסאודו משלהם, :moz-focusring
, לפני המפרט הרשמי. אם אתה רוצה ללמוד עוד על הימים הראשונים של טבעת המיקוד, בדוק A11y Casts עם רוב דודסון.
מיקוד חשיבות
יש הרבה סיבות מדוע מיקוד חשוב ביישום שלך. ראשית, כפי שציינתי למעלה, עלינו כשגרירים של האינטרנט לוודא שאנו מספקים את החוויה הטובה והנגישה ביותר שאנו יכולים. אנחנו לא רוצים שאף אחד מהמשתמשים שלנו ינחש היכן הם נמצאים בזמן שהם מנווטים בחוויה.
דוגמה אחת שתמיד עולה בראש היא אתר שני אחים עיוורים. אם תכנסו לאתר ותלחצו/תקישו (זה עובד בנייד), העין העצומה בפינה השמאלית התחתונה, תראו את העין פתוחה ומתחילה סימולציה. שני האחים, ברדפורד ובריאן מאנינג, אובחנו בגיל צעיר עם מחלת סטארגארדט. מחלת Stargardt היא צורה של ניוון מקולרי של העין. עם הזמן שני האחים יהיו עיוורים לחלוטין. בקר באתר ולחץ על העין כדי לראות איך הם רואים.
אם הייתם בנעליים שלהם והייתם צריכים לנווט בדף, הייתם רוצים לוודא שאתם יודעים בדיוק היכן אתם נמצאים לאורך כל החוויה. טבעת פוקוס מעניקה לך את הכוח הזה.
הַדגָמָה
ההדגמה למטה מראה כיצד :focus-visible
עובד כאשר מוסיפים ל-CSS שלך. החלק הראשון של הסרטון מציג את החוויה בעת ניווט באמצעות עכבר, והשני מציג את הניווט באמצעות המקלדת שלי בלבד. הקלטתי את עצמי גם כדי להראות שאכן עברתי משימוש בעכבר, למקלדת שלי.
הדפדפן חוזה מה לעשות עם טבעת המיקוד בהתבסס על הקלט שלי (מקלדת/עכבר), ואז מוסיף טבעת מיקוד לרכיבים האלה. במקרה זה, כאשר אני מנווט דרך הדוגמה הזו עם המקלדת, הכל מקבל פוקוס. בעת שימוש בעכבר, רק הקלט מקבל מיקוד והלחצנים לא. אם תסיר :focus-visible
, הדפדפן יחיל את טבעת המיקוד המוגדרת כברירת מחדל.
הקוד שלהלן חל :focus-visible
לאלמנטים הניתנים למיקוד.
:focus-visible {
outline-color: black;
font-size: 1.2em;
font-family: serif;
font-weight: bold;
}
אם אתה רוצה לציין את label
או כפתור לקבל :focus-visible
פשוט להקדים את השיעור עם input
or button
בהתאמה.
button:focus-visible {
outline-color: black;
font-size: 1.2em;
font-family: serif;
font-weight: bold;
}
/*** OR ***/
input:focus-visible {
outline-color: black;
font-size: 1.2em;
font-family: serif;
font-weight: bold;
}
תמיכה
אם הדפדפן לא תומך :focus-visible
אתה יכול לקבל חזרה למקום כדי להתמודד עם האינטראקציה. הקוד שלהלן הוא מ- מגרש משחקים של MDN. אתה יכול להשתמש ב- @ תומך בשלטון או "שאילתת תכונה" כדי לבדוק תמיכה. דבר אחד שכדאי לזכור, הכלל צריך להיות ממוקם בראש הקוד או לקנן בתוך קבוצה אחרת.
<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>
.button {
margin: 10px;
border: 2px solid darkgray;
border-radius: 4px;
}
.button:focus-visible {
/* Draw the focus when :focus-visible is supported */
outline: 3px solid deepskyblue;
outline-offset: 3px;
}
@supports not selector(:focus-visible) {
.button.with-fallback:focus {
/* Fallback for browsers without :focus-visible support */
outline: 3px solid deepskyblue;
outline-offset: 3px;
}
}
חששות נגישות נוספים
דאגות נגישות שכדאי לזכור בעת בניית החוויה שלך:
- ודא שהצבעים שאתה בוחר עבור מחוון המיקוד שלך, אם בכלל, עדיין נגישים בהתאם למידע המתועד ב- WCAG 2.2 ניגודיות ללא טקסט (רמה AA)
- עומס קוגניטיבי עלול לגרום למצוקת משתמש. הקפד לשמור על סגנונות עקביים באלמנטים אינטראקטיביים משתנים
תמיכה בדפדפן
נתוני התמיכה בדפדפן זה הם מ אני יכול להשתמש, שיש בו יותר פרטים. מספר מציין שהדפדפן תומך בתכונה בגרסה זו ומעלה.
שולחן העבודה
Chrome | Firefox | IE | אדג ' | ספארי |
---|---|---|---|---|
86 | 4* | לא | 86 | 15.4 |
נייד / טאבלט
אנדרואיד כרום | אנדרואיד פיירפוקס | אנדרואיד | iOS ספארי |
---|---|---|---|
123 | 124 | 123 | 15.4 |
קישורים
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- PlatoData.Network Vertical Generative Ai. העצים את עצמך. גישה כאן.
- PlatoAiStream. Web3 Intelligence. הידע מוגבר. גישה כאן.
- PlatoESG. פחמן, קלינטק, אנרגיה, סביבה, שמש, ניהול פסולת. גישה כאן.
- PlatoHealth. מודיעין ביוטכנולוגיה וניסויים קליניים. גישה כאן.
- מקור: https://css-tricks.com/managing-user-focus-with-focus-visible/
- :יש ל
- :הוא
- :לֹא
- :איפה
- $ למעלה
- 09
- 1
- 11
- 12
- 13
- 16
- 22
- 27
- 2nd
- 31
- 7
- 8
- 9
- 91
- 98
- a
- אודות
- בנוגע לזה
- מֵעַל
- נגישות
- נגיש
- פי
- הוסיף
- מוסיף
- מוסיף
- גיל
- סוֹכֵן
- אַלגוֹרִיתְם
- ירייה
- תעשיות
- גם
- תמיד
- am
- שגרירים
- an
- ו
- דְמוּי אָדָם
- אחר
- כל
- בקשה
- החל
- מריחה
- ARE
- סביב
- AS
- At
- מחברים
- בחזרה
- מבוסס
- BE
- לפני
- מתחיל
- להיות
- להלן
- הטוב ביותר
- שחור
- סיכה
- גבול
- שניהם
- תַחתִית
- מיתוג
- בריאן
- בָּהִיר
- אחים
- דפדפן
- דפדפנים
- בריאן
- בִּניָן
- אבל
- לַחְצָן
- by
- הגיע
- CAN
- מקרה
- לגרום
- מסוים
- לבדוק
- בחירות
- בחרו
- Chrome
- בכיתה
- קליק
- סגור
- קוד
- לשתף פעולה
- מגיע
- לחלוטין
- דאגות
- לעומת זאת
- שיחות
- בפינה
- נוצר
- CSS
- נוֹכְחִי
- מצב נוכחי
- חותך
- נתונים
- ימים
- ירידות
- נחשב
- בְּרִירַת מֶחדָל
- הדגמה
- עיצוב
- פרט
- לאתר
- לקבוע
- DID
- מַחֲלָה
- מצוקה
- do
- עושה
- לא
- עושה
- לא
- לצייר
- לייבש
- מוקדם
- אדג '
- אלמנט
- אלמנטים
- וכו '
- הכל
- בדיוק
- דוגמה
- ניסיון
- עין
- ליפול
- מאפיין
- Firefox
- ראשון
- להתמקד
- מרוכז
- בעד
- טופס
- צורות
- קדימה
- החל מ-
- מקבל
- gif
- נותן
- Go
- הולך
- טוב
- גדול
- קְבוּצָה
- מדריך
- היה
- לטפל
- יש
- יש
- לעזור
- גָבוֹהַ
- פסים
- עמוד הבית
- איך
- איך
- HTML
- http
- HTTPS
- i
- ie
- if
- תמונה
- ליישם
- חשוב
- in
- לא נגיש
- מצביע על
- אינדיקטור
- מידע
- קלט
- בתוך
- במקום
- אינטראקציה
- אינטראקציה
- יחסי גומלין
- אינטראקטיבי
- iOS
- IT
- רק
- שמור
- לדעת
- לִלמוֹד
- עזבו
- רמה
- כמו
- קישורים
- עוד
- נראה
- נראה
- לעשות
- עושה
- עשייה
- ניהול
- שולים
- שיווק
- להתאים
- אומר
- אכפת לי
- החטיא
- סלולרי
- יותר
- רוב
- המהלך
- להתקדם
- מוזילה
- my
- עצמי
- נווט
- מנווט
- ניווט
- צורך
- לא
- ללא חתימה
- מספר
- of
- רשמי
- on
- ONE
- רק
- לפתוח
- or
- שלנו
- הַחוּצָה
- מתווה
- יותר
- שֶׁלוֹ
- עמוד
- חלק
- מקום
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- שפע
- הודעה
- כּוֹחַ
- ניבוי
- מִשׁמֶרֶת
- ובלבד
- מתן
- טעם
- סיבות
- לקבל
- מקבל
- מוקלט
- לזכור
- להסיר
- הוסר
- מסיר
- בהתאמה
- תוצאה
- לַחֲזוֹר
- טַבַּעַת
- לשדוד
- כלל
- ספארי
- שְׁנִיָה
- לִרְאוֹת
- סדרה
- צריך
- לְהַצִיג
- הצגה
- הופעות
- הדמיה
- אתר
- קטן
- מוצק
- כמה
- משהו
- ספציפי
- מפרט
- לעמוד
- התחלה
- מדינה
- אמור
- עוד
- תמיכה
- נתמך
- תומך
- בטוח
- מתג
- תחביר
- טכניקה
- טכנולוגיה
- זֶה
- השמיים
- המידע
- שֶׁלָהֶם
- אותם
- אז
- שם.
- הֵם
- דבר
- זֶה
- אלה
- דרך
- בכל
- זמן
- ל
- חלק עליון
- מפעילה
- נָכוֹן
- שתיים
- סוג
- שמישות
- להשתמש
- משתמש
- משתמשים
- שימושים
- באמצעות
- שונים
- משתנה
- גרסה
- באמצעות
- וִידֵאוֹ
- נראה
- לְבַקֵר
- חזותי
- W3
- רוצה
- היה
- דֶרֶך..
- we
- אינטרנט
- אתר
- טוֹב
- היו
- מה
- מתי
- אם
- אשר
- בזמן
- כל
- למה
- יצטרך
- עם
- לְלֹא
- עובד
- לדאוג
- היה
- אתה
- צעיר
- זפירנט