בקשה למשוב ממפתחים: focusgroup

Jacques Newman

תאריך פרסום: 5 במרץ 2026

מאפיין ה-HTML‏ focusgroup הוא דרך מוצהרת להוספת ניווט באמצעות מקשי החיצים במקלדת לווידג'טים מורכבים כמו סרגלי כלים, רשימות כרטיסיות, תפריטים, תיבות רשימה וכו', בלי לכתוב קוד JavaScript של roving-tabindex. מאפיין אחד מחליף מאות שורות של טקסט סטנדרטי. נשמח לקבל ממך משוב לפני שהמוצר יושק.

כדאי לנסות ולשלוח לנו משוב

אפשר לנסות את focusgroup כבר היום ב-Chrome, ב-Edge ובדפדפנים אחרים מבוססי Chromium. כדי להפעיל אותו, אפשר לבחור באחת משתי הדרכים הבאות:

בדיקה מקומית: בדפדפן, פותחים את הדף about://flags ומפעילים את התכונה הניסיונית Experimental Web Platform features. אפשר גם להפעיל את הדפדפן משורת הפקודה באמצעות הפרמטר --enable-blink-features=Focusgroup בשורת הפקודה.
גרסת מקור לניסיון: אפשר להירשם לגרסת המקור לניסיון focusgroup כדי לבדוק את התכונה באתר עם משתמשים אמיתיים.

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

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

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

הבעיה: שימוש ידני במאפיין tabindex

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

<div role="toolbar" aria-label="Text formatting" id="toolbar">
  <button type="button" tabindex="0">Bold</button>
  <button type="button" tabindex="-1">Italic</button>
  <button type="button" tabindex="-1">Underline</button>
  <button type="button" tabindex="-1">Strikethrough</button>
</div>

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

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

רוב ספריות ממשק המשתמש, כולל React,‏ Angular CDK ו-Fluent UI, כוללות גרסה משלהן של הלוגיקה הזו. זה הרבה מאמץ כפול כדי להשיג משהו שיכול להיות פרימיטיב של פלטפורמה.

הפתרון: המאפיין `focusgroup`

ב-focusgroup, אותו סרגל כלים הופך ל:

<div focusgroup="toolbar" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
  <button type="button">Strikethrough</button>
</div>

שורת התפריטים עם המיקוד בכפתור של טקסט נטוי.

אפשר לנסות את זה בשידור חי:Toolbar Pattern > Basic Toolbar (תבנית סרגל כלים > סרגל כלים בסיסי). זה הכול. אין JavaScript לניווט באמצעות מקשי החיצים. אין ניהול ידני של tabindex<0x0A>. אלה הפעולות שהדפדפן מבצע עכשיו בשבילכם:

ניווט באמצעות מקשי החיצים: ניווט בין פריטים, תוך התחשבות במצב הכתיבה ובכיווניות.
כרטיסיית עצירה אחת: הדפדפן מכווץ אוטומטית את הפריטים המשתתפים לכרטיסיית עצירה אחת. מפתחים לא צריכים להגדיר את הערך tabindex="-1" ל-on לפריטים לא פעילים.
זיכרון של הפריט האחרון שהיה במוקד: כשמשתמש יוצא מקבוצת המוקד וחוזר אליה, המוקד חוזר לפריט שהוא עזב.
סמנטיקה של ARIA: הדפדפן מספק תפקידים מתאימים (כמו role="toolbar") על סמך ההתנהגות שנבחרה כשמשתמשים ברכיבים גנריים.

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

סקירה כללית על ממשקי API

המאפיין focusgroup מקבל רשימה של טוקנים מופרדים ברווחים. האסימון הראשון הוא תמיד אסימון התנהגות שמצהיר על דפוס הווידג'ט. אחריו מופיעים טוקנים אופציונליים של שינוי: focusgroup="<behavior> [inline|block] [wrap] [nomemory]".

טוקנים של התנהגות

נדרש אסימון התנהגות (אלא אם משתמשים ב-none כדי לבטל את ההסכמה להשתתפות בקבוצת מיקוד של ישות אב). היא מגדירה את תבנית הווידג'ט המורכב, כדי להבטיח שאפשר יהיה להסיק את התפקידים הנכונים אם לא צוינו תפקידים אחרים. האסימונים פועלים לפי הדפוסים שמתוארים במדריך Aria Authoring Practices, ומפורטים בטבלה הבאה:

התנהגות	תבנית APG	תפקיד מינימלי במאגר (אם חל)	תפקיד הצאצא המינימלי (אם חל)	משני ברירת מחדל
`toolbar`	סרגל הכלים	סרגל כלים	(ללא)	`inline`
`tablist`	APG Tabs	tablist	כרטיסייה	`inline wrap`
`radiogroup`	קבוצת תחנות רדיו	radiogroup	radio	(ללא)
`listbox`	תיבת רשימה	listbox	option	(ללא)
`menu`	תפריט	menu	menuitem	`block wrap`
`menubar`	סרגל התפריטים	menubar	menuitem	`inline wrap`
`none`	לא רלוונטי	לא רלוונטי	לא רלוונטי	לא רלוונטי

כאן מוסבר איך מיפוי התפקידים פועל.

הגבלת ציר (`inline` ו-`block`)

אם להתנהגות שנבחרה אין מקשי שינוי ברירת מחדל, כל ארבעת מקשי החיצים פועלים להעברת המיקוד. אפשר להגביל את הניווט לציר לוגי יחיד באמצעות המקשים inline או block:

‫inline: קבוצת המיקוד מגיבה רק למקשי החצים בציר המוצג, ימינה ושמאלה ברוב ההקשרים בשפה האנגלית (אופקי, מלמעלה למטה).
‫block: קבוצת המיקוד מגיבה רק למקשי החצים בציר הבלוק, למעלה ולמטה ברוב ההקשרים בשפה האנגלית (אופקי, מלמעלה למטה).

הגבלת הציר מותאמת למאפיינים לוגיים של CSS ומשתנה אוטומטית בהתאם למצב הכתיבה ולכיוון הכתיבה.

ניווט בהקפה

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

אפשר לנסות את זה בשידור חי: Tablist Pattern > Horizontal Tablist with Wrapping. בדוגמה הזו, כשהמיקוד הוא על הכרטיסייה שאלות נפוצות והמשתמש לוחץ על מקש החץ שמאלה, המיקוד חוזר לכרטיסייה סקירה כללית.

המאפיין `focusgroupstart`

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

<div focusgroup="toolbar nomemory" aria-label="Entry point demo">
  <button type="button">First</button>
  <button type="button" focusgroupstart>Middle (Entry)</button>
  <button type="button">Last</button>
</div>

סרגל תפריטים עם הכפתור האמצעי במוקד ההתעניינות.

גם Tab וגם Shift+Tab מגיעים ל-'Middle (Entry)' כי יש בו focusgroupstart והזיכרון מושבת באמצעות הצירוף nomemory. אפשר לנסות את זה בשידור חי: סרגל כלים עם דוגמה > נקודת כניסה עם focusgroupstart.

השבתת הזיכרון (nomemory)

כברירת מחדל, קבוצות המיקוד זוכרות את הפריט האחרון שהיה במיקוד ומשחזרות אותו כשנכנסים מחדש באמצעות Tab. אם רוצים להשבית את ההתנהגות הזו בתבניות שבהן ההדגשה צריכה תמיד לחזור לנקודת כניסה קבועה (כמו בהדגמה הקודמת), צריך להשתמש במאפיין nomemory של focusgroup.

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

ביטול ההסכמה (`focusgroup="none"`)

כדי להחריג רכיב ואת עץ המשנה שלו מניווט החצים של קבוצת המיקוד של ישות אב, משתמשים ב-focusgroup="none". עדיין אפשר להגיע לרכיב שהוצא מההגדרה ולעץ המשנה שלו באמצעות מקש Tab, אבל מקשי החיצים מדלגים עליהם:

<div focusgroup="toolbar" aria-label="Segmented toolbar">
  <button type="button">New</button>
  <button type="button">Open</button>
  <button type="button">Save</button>
  <span focusgroup="none">
    <button type="button">Help</button>
    <button type="button">Shortcuts</button>
  </span>
  <button type="button">Close</button>
  <button type="button">Exit</button>
</div>

תפריט עם הכפתורים 'עזרה' ו'קיצור דרך' שמופיעים באפור.

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

דפוסים נפוצים

Tablist

רכיב בקרה של כרטיסיות עם ניווט בין כרטיסיות באמצעות מקשי החיצים.

<div focusgroup="tablist nomemory" aria-label="Sections">
  <button type="button" aria-selected="true" aria-controls="panel-overview" id="tab-overview" focusgroupstart>Overview</button>
  <button type="button" aria-selected="false" aria-controls="panel-features" id="tab-features">Features</button>
  <button type="button" aria-selected="false" aria-controls="panel-pricing" id="tab-pricing">Pricing</button>
  <button type="button" aria-selected="false" aria-controls="panel-faq" id="tab-faq">FAQ</button>
</div>
<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">...</div>
<div role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0">...</div>
<div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" tabindex="0">...</div>
<div role="tabpanel" id="panel-faq" aria-labelledby="tab-faq" tabindex="0">...</div>

הכרטיסייה 'סקירה כללית' היא מוקד ההתעניינות.

אפשר לנסות את זה בשידור חי: Tablist Pattern > Horizontal Tablist with Wrapping.

מה כדאי לשים לב:

המאפיין focusgroupstart נמצא בכרטיסייה selected, ולכן המיקוד תמיד עובר לשם.
המשנה nomemory מבטיח שגם אם המשתמש התמקד בעבר בכרטיסייה אחרת, הכניסה מחדש תמיד תהיה בכרטיסייה שנבחרה.
מקש הצירוף inline מגביל את הניווט באמצעות מקשי החיצים למקשים שמאלה וימינה בלבד. ההגדרה הזו תואמת להתנהגות הצפויה שמפורטת בתבנית APG Tabs pattern.
המקש wrap מאפשר למשתמשים להשתמש במקשי החיצים ברציפות בכל הכרטיסיות.
קוד המפתח, שהושמט כאן כדי לא להאריך יותר מדי, מטפל בבחירה בפועל: עדכון של aria-selected, החלפה של מצב החשיפה של החלונית והעברה של מאפיין focusgroupstart בשינוי הבחירה.

תפריט וסרגל תפריטים

תפריט אנכי פשוט עם אפשרות ניווט באמצעות החיצים למעלה ולמטה.

<div focusgroup="menu" aria-label="File actions" class="menu-vertical">
    <button type="button" class="menu-item">New</button>
    <button type="button" class="menu-item">Open…</button>
    <button type="button" class="menu-item">Save</button>
    <button type="button" class="menu-item">Exit</button>
</div>

תפריט אנכי עם הפריט 'פתיחת תפריט' במצב מודגש.

אפשר לנסות את זה בשידור חי: Menu and Menubar Pattern > Simple Vertical Menu. כשמשתמשים במקש הצירוף block, אפשר לעבור בין הפריטים רק באמצעות מקשי החיצים למעלה ולמטה. מקשי החצים ימינה ושמאלה פנויים להתנהגות שאתם מגדירים (לדוגמה, פתיחת תפריטי משנה). בסרגל תפריטים עם תפריטי משנה מקוננים, כל רמה היא קבוצת מיקוד עצמאית. אפשר לנסות את זה בלייב: Menu and Menubar pattern > Menubar with Popover Submenus

<ul role="menubar" focusgroup="menubar"
     aria-label="Application Menu" class="menubar">
    <li role="none">
        <button role="menuitem" type="button" class="menubar-item"
             aria-haspopup="menu" aria-expanded="false"
             popovertarget="filemenu">File</button>
        <ul role="menu" focusgroup="menu"
             id="filemenu" popover aria-label="File submenu" class="submenu">
            <li role="none"><button type="button" class="submenu-item"
                 autofocus>New</button></li>
            <li role="none"><button type="button" class="submenu-item">Open</button></li>
            <li role="none"><button type="button" class="submenu-item">Save</button></li>
        </ul>
    </li>
    <!-- More menu items... -->
</ul>

תפריט נפתח עם הפריט 'העתקה' במוקד ההתעניינות.

אפשר לנסות את זה בשידור חי: Menu and Menubar Pattern > Menubar with Popover Submenus. בזמן שבסרגל התפריטים משתמשים במקש inline לשינוי הכיוון בניווט שמאלה וימינה, בתפריטי המשנה משתמשים במקש block לשינוי הכיוון בניווט למעלה ולמטה. קבוצות מיקוד מקוננות הן בלתי תלויות לחלוטין, כך שהן לא מפריעות זו לזו.

קבוצת לחצני בחירה

קבוצת לחצני בחירה בהתאמה אישית עם ניווט באמצעות מקשי החיצים ושליטה מלאה בסגנון.

<div focusgroup="radiogroup" aria-label="Favorite color">
  <span aria-checked="false" tabindex="0">Red</span>
  <span aria-checked="false" tabindex="0">Green</span>
  <span aria-checked="true" tabindex="0" focusgroupstart >Blue</span>
  <span aria-checked="false" tabindex="0">Purple</span>
</div>

קבוצה של כפתורי בחירה עם הכיתוב 'כחול' במצב מודגש.

אפשר לנסות את זה בשידור חי: Radio Group Pattern > Comparison: Native versus Focusgroup.

מאפיין focusgroup מטפל בניווט באמצעות מקשי החיצים, אבל אתם צריכים להטמיע את קוד הבחירה. בהדגמה הזו, קוד JavaScript מנהל את מצב הסימון (באמצעות המאפיין aria-checked).

מושגים מרכזיים

השתתפות בפריט של קבוצת מיקוד

כל הצאצאים של הרכיב שאפשר להתמקד בהם ברצף עם הערך focusgroup שמוגדר להתנהגות תקינה נחשבים כחלק מקבוצת המיקוד הזו. המשמעות היא שרכיבים עם ערך שלילי של tabindex לא נלקחים בחשבון, אבל רכיבים שניתן להתמקד בהם באופן טבעי, כמו <button>, כן נלקחים בחשבון, וגם רכיבים שבהם ציינתם ערך לא שלילי של tabindex.

עצירת Tab

אין צורך לנהל ערכים של tabindex. גם אם יש כמה צאצאים שאפשר להגיע אליהם באמצעות Tab (למשל כמה רכיבי <button>), הרכיב focusgroup מצמצם אותם למיקום עצירה אחד של Tab. הדפדפן קובע איזה פריט אפשר להעביר אליו את המיקוד באמצעות מקש Tab בכל רגע נתון. אפשר לנסות את זה בשידור חי: Toolbar Pattern > No tabindex Management Needed.

הזיכרון האחרון שהתמקד בו

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

קבוצות מיקוד מוטמעות

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

תמיכה ב-Shadow DOM

המאפיין focusgroup חל כברירת מחדל על כל הגבולות של Shadow DOM. קבוצת מיקוד שמוצהרת במארח וירטואלי כוללת אלמנטים ניתנים למיקוד בתוך עץ הצל של המארח הזה. אם רוצים לבטל את ההסכמה, אפשר להשתמש ב-focusgroup="none" בתוך עץ הצל של הרכיב.

טיפול בהתנגשויות של מפתחות

חלק מהרכיבים בתוך קבוצת המיקוד, כמו <input>, ‏ <textarea> ואמצעי בקרה אחרים, משתמשים במקשי החצים למטרות שלהם. אם יש סתירה בין מקשי הניווט של קבוצת המיקוד לבין התנהגות מקשי החצים של רכיב מקורי:

מקשי החצים נצרכים על ידי הרכיב האינטראקטיבי (לדוגמה, לתנועת סמן הטקסט), ו-focusgroup לא מפריע.
Tab או Shift+Tab מספקים מנגנון בריחה שמוגדר כברירת מחדל, שמאפשר למשתמש להשתמש בניווט באמצעות מקש Tab כדי 'להיכנס מחדש' לקבוצת הפריטים המודגשים.

ההתנהגויות האלה של מקש Escape רלוונטיות רק כשיש בפועל התנגשות בין מקשים. צירים שלא מתנגשים לא מושפעים. אפשר גם לקרוא לאירועים preventDefault() on keydown כדי לבטל את ההתנהגות של מקשי החיצים של focusgroup עבור רכיבים ספציפיים. המשמעות היא שאפשר לכלול רכיבי input ו-textarea בתוך focusgroup בלי לשבש את ההתנהגות של אף אחד מהם.

אם מוסיפים ל-elements משלכם key handlers שמשתתפים ב-focusgroup, חשוב לספק מנגנון יציאה דומה כדי שהמשתמשים יוכלו לגשת לשאר הקבוצה.

גילוי צאצאים עמוק

פריטים של קבוצת מיקוד לא צריכים להיות צאצאים ישירים של קונטיינר קבוצת המיקוד.

הדפדפן מתייחס לכל הצאצאים שניתן למיקוד ברצף (לא שליליים, tabindex) כאל רכיבים בקבוצת המיקוד, אלא אם הם נמצאים בתוך קבוצת מיקוד מקוננת או שהם לא נכללים באמצעות focusgroup="none".

<div focusgroup="toolbar" aria-label="Nested wrappers">
  <div>
    <span>
      <button type="button">Alpha</button>
    </span>
    <span>
      <button type="button">Beta</button>
    </span>
    <span>
      <button type="button">Gamma</button>
    </span>
  </div>
</div>

הניווט באמצעות מקשי החיצים פועל גם אם הכפתורים מוטמעים בתגי <div> ו-<span>. אין דרישה לרשימה שטוחה, ולכן אפשר להשתמש ברכיבי wrapper לעיצוב.

אפשר לנסות את זה בשידור חי: מושגים נוספים > צאצאים עמוקים.

שילוב עם הנכס `reading-flow`

כשמנווטים באמצעות Tab או מקשי החיצים, המערכת מתחשבת במאפיין CSS reading-flow אם הוא קיים, ופועלת לפי סדר הקריאה החזותי ולא לפי סדר המקור של DOM.

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

<div focusgroup="toolbar" aria-label="Visual order"
     style="display: flex; flex-direction: row-reverse; reading-flow: flex-visual;">
  <button type="button">A (DOM first)</button>
  <button type="button">B (DOM second)</button>
  <button type="button">C (DOM third)</button>
</div>

סדר ה-DOM הוא A, ‏ B, ‏ C, אבל הסדר החזותי הוא C, ‏ B, ‏ A כי הפריסה משתמשת ב-flex-direction: row-reverse. אבל בגלל שהקוד משתמש גם ב-reading-flow: flex-visual, סדר הקריאה חוזר להיות א', ב', ג', והקבוצה focusgroup תואמת לסדר הזה.

אם מקישים על Tab, המיקוד עובר קודם ל-C, ואם מקישים על החץ ימינה, המיקוד עובר ל-B ואז ל-A. אפשר לנסות את זה בשידור חי: מושגים נוספים > שילוב של CSS עם זרימת קריאה.

נגישות

הסקת תפקידים ב-ARIA

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

<div focusgroup="tablist">
  <button>Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
</div>

נוצר עץ הנגישות הבא, למרות שלא הוגדרו תפקידים בלחצנים:

+   tablist
  |
  +   tab
  |
  +   tab
  |
  +   tab

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

שיקולים בנושא נגישות

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

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

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

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

זיהוי תכונות

כדי להתחיל להשתמש ב-focusgroup עוד היום, לפני שיהיה תמיכה מלאה בכל הדפדפנים, אפשר לזהות תמיכה ב-focusgroup ב-JavaScript:

if ('focusgroup' in HTMLElement.prototype) {
  // focusgroup is supported.
} else {
  // fall back to manual roving tabindex.
}

סיכום

אנחנו נמצאים בתהליך של קידום המאפיין focusgroup בקרב גופי התקנים, ובמקביל אנחנו מפתחים באופן פעיל את אב הטיפוס ב-Chromium ומשפרים את ה-API.

כדאי לנסות את התכונה ולדווח על בעיה בקבוצת המיקוד בכלי של GitHub למעקב אחר בעיות ב-Open-UI. נשמח במיוחד לקבל את דעתך על הנושאים הבאים:

האם ממשק ה-API מתאים לדפוסים שאתם יוצרים?
האם יש תבניות או תרחישים שפספסנו?
האם יש רכיבים שאסור להשתמש בהם במאפיין focusgroup?
איך הנגישות משתלבת בתרחישי השימוש שלכם?

תודה שעזרת לנו לשפר את הניווט במקלדת באינטרנט.

מידע נוסף

תודה ל-Mason Freed, ל-Sara Higley, ל-Scott O'Hara ולשאר חברי קהילת Open-UI על העזרה בהחזרת focusgroup.

בקשה למשוב ממפתחים: focusgroup קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.