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

תמיכה בדפדפן

קישורים

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• PlatoData.Network Vertical Generative Ai. העצים את עצמך. גישה כאן.
• PlatoAiStream. Web3 Intelligence. הידע מוגבר. גישה כאן.
• PlatoESG. פחמן, קלינטק, אנרגיה, סביבה, שמש, ניהול פסולת. גישה כאן.
• PlatoHealth. מודיעין ביוטכנולוגיה וניסויים קליניים. גישה כאן.
• מקור: https://css-tricks.com/managing-user-focus-with-focus-visible/