درخواست بازخورد توسعه‌دهندگان: گروه کانونی

Jacques Newman

منتشر شده: ۵ مارس ۲۰۲۶

ویژگی focusgroup HTML یک روش اعلانی پیشنهادی برای افزودن ناوبری با کلید جهت‌نمای صفحه‌کلید به ویجت‌های ترکیبی مانند نوار ابزار، فهرست‌های تب، منوها، لیست‌باکس‌ها و غیره بدون نوشتن هیچ کد جاوااسکریپت roving-tabindex است. یک ویژگی جایگزین صدها خط کد تکراری می‌شود. ما قبل از ارسال این مطلب، به بازخورد شما نیاز داریم.

امتحان کنید و نظراتتون رو به ما بگید

شما می‌توانید همین امروز با فعال کردن یکی از دو روش زیر، focusgroup در کروم، اج و سایر مرورگرهای کرومیوم امتحان کنید:

1. آزمایش محلی: در مرورگر، صفحه about://flags را باز کنید و پرچم ویژگی‌های پلتفرم وب آزمایشی را فعال کنید. یا با استفاده از پارامتر خط فرمان --enable-blink-features=Focusgroup ، مرورگر را از خط فرمان اجرا کنید.
2. نسخه آزمایشی Origin: برای آزمایش نسخه آزمایشی focusgroup origin در سایت خود با کاربران واقعی ثبت نام کنید.

سپس دموهای تعاملی را بررسی کنید تا هر الگو را در عمل ببینید.

ما به نظرات شما نیاز داریم. یک موضوع گروه کانونی تشکیل دهید تا نظرتان را با ما در میان بگذارید.

این یک تلاش چند مرورگری است: این پیشنهاد از مایکروسافت از طریق گروه جامعه OpenUI با پشتیبانی قوی گوگل سرچشمه می‌گیرد. شکل API ممکن است بر اساس بازخورد شما تغییر کند. بیایید به مشکلی که گروه کانونی حل می‌کند و نحوه عملکرد API بپردازیم.

مشکل: پیمایش دستی tabindex

اگر تا به حال یک نوار ابزار، فهرست برگه‌ها، منو یا لیست‌باکس ساخته باشید، حتماً نسخه‌ای از این کد را نوشته‌اید. راهنمای شیوه‌های نویسندگی ARIA (APG) توصیه می‌کند که ویجت‌های ترکیبی یک Tab stop واحد ارائه دهند و به کاربران اجازه دهند با کلیدهای جهت‌نما بین موارد حرکت کنند. این الگو به عنوان "roving 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>

از اینجا به بعد، توسعه‌دهندگان باید از جاوااسکریپت استفاده کنند که کلیدهای جهت‌نما را برای جابجایی فوکوس دریافت می‌کند و ویژگی tabindex را برای همه عناصر تنظیم می‌کند. این نسخه ساده‌شده است. یک پیاده‌سازی در محیط عملیاتی همچنین باید موارد زیر را مدیریت کند:

• حالت نوشتن و RTL: جهت کلیدهای جهت‌نما را بر اساس جهت محتوا تنظیم کنید.
• آخرین حافظه‌ی متمرکز: وقتی کاربر دوباره با کلید 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>

آن را به صورت زنده امتحان کنید: الگوی نوار ابزار > نوار ابزار پایه . همین. بدون جاوا اسکریپت برای پیمایش با کلیدهای جهت‌نما. بدون مدیریت دستی فهرست برگه‌ها. در اینجا چیزی است که مرورگر اکنون برای شما انجام می‌دهد:

• پیمایش با کلیدهای جهت‌نما: با رعایت حالت نوشتاری و جهت‌گیری، بین موارد پیمایش کنید.
• یک Tab stop: مرورگر آیتم‌های شرکت‌کننده را به‌طور خودکار در یک Tab stop جمع می‌کند. توسعه‌دهندگان نیازی به تنظیم tabindex="-1" برای آیتم‌های غیرفعال ندارند.
• حافظه آخرین مورد تمرکز: وقتی کاربر گروه تمرکز را ترک می‌کند و برمی‌گردد، تمرکز به موردی که ترک کرده است، بازگردانده می‌شود.
• معناشناسی ARIA: مرورگر نقش‌های مناسب (مانند role="toolbar" ) را بر اساس رفتار انتخاب شده هنگام استفاده از عناصر عمومی ارائه می‌دهد.

توسعه‌دهندگان فقط منطق منحصر به فرد ویژگی‌های خود مانند تغییر وضعیت فشرده‌شده، باز کردن منوها، مدیریت انتخاب یا هرگونه دستور سفارشی را حفظ می‌کنند.

مرور کلی API

ویژگی focusgroup لیستی از توکن‌ها را که با فاصله از هم جدا شده‌اند، می‌گیرد. اولین توکن همیشه یک توکن رفتاری است که الگوی ویجت را اعلام می‌کند. توکن‌های اصلاح‌کننده اختیاری به شرح زیر هستند: focusgroup="<behavior> [inline|block] [wrap] [nomemory]" .

نشانه‌های رفتاری

توکن رفتار الزامی است (مگر اینکه none برای انصراف از یک گروه کانونی اجداد استفاده شود). این توکن الگوی ویجت مرکب را اعلام می‌کند و تضمین می‌کند که نقش‌های صحیح، در صورت عدم تعیین، قابل استنباط هستند. توکن‌ها از الگوهایی پیروی می‌کنند که در راهنمای Aria Authoring Practices شرح داده شده‌اند و در جدول زیر فهرست شده‌اند:

برای جزئیات کامل در مورد نحوه‌ی عملکرد نگاشت نقش، به توضیح‌دهنده مراجعه کنید.

محدودیت محور ( inline و block )

اگر رفتار انتخاب شده هیچ اصلاح‌کننده پیش‌فرضی نداشته باشد، هر چهار کلید جهت‌نما برای جابجایی فوکوس کار می‌کنند. می‌توانید با استفاده از اصلاح‌کننده inline یا block ، پیمایش را به یک محور منطقی واحد محدود کنید:

• inline : گروه کانونی فقط به کلیدهای جهت‌نما روی محور درون‌خطی، چپ و راست در اکثر زمینه‌های زبان انگلیسی ( افقی، از بالا به پایین) پاسخ می‌دهد.
• block : گروه کانونی فقط به کلیدهای جهت‌نما روی محور بلوک، بالا و پایین در اکثر زمینه‌های زبان انگلیسی (افقی، از بالا به پایین) پاسخ می‌دهد.

محدودیت محور با ویژگی‌های منطقی CSS همسو شده و به طور خودکار با حالت و جهت نوشتن سازگار می‌شود.

ناوبری جامع

به طور پیش‌فرض، پیمایش با کلید جهت‌نما در لبه‌های گروه کانونی متوقف می‌شود. برای حلقه زدن از آخرین مورد به اولین مورد (و از اولین مورد به آخرین مورد) از اصلاح‌کننده wrap استفاده کنید. اگر رفتاری به طور پیش‌فرض wrap دارد، از اصلاح‌کننده nowrap برای غیرفعال کردن این رفتار استفاده کنید.

آن را به صورت زنده امتحان کنید: الگوی فهرست جدول‌ها > فهرست جدول‌های افقی با قابلیت نمایش . در این مثال، وقتی تمرکز روی برگه سوالات متداول است و کاربر کلید جهت‌نمای راست را فشار می‌دهد، تمرکز به برگه نمای کلی برمی‌گردد.

ویژگی focusgroupstart

ویژگی focusgroupstart مشخص می‌کند که هنگام اولین بار ورود به یک focusgroup (یا هر بار که حافظه غیرفعال است)، کدام عنصر فوکوس را دریافت می‌کند:

<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 غیرفعال شده است. آن را به صورت زنده امتحان کنید: Toolbar Pattern > Entry Point با focusgroupstart .

غیرفعال کردن حافظه (nomemory)

به طور پیش‌فرض، گروه‌های کانونی آخرین مورد فوکوس شده را به خاطر می‌سپارند و با ورود مجدد با Tab آن را بازیابی می‌کنند. برای الگوهایی که فوکوس باید همیشه به یک نقطه ورود ثابت برگردد (مانند نسخه آزمایشی قبلی)، از اصلاح‌کننده nomemory در ویژگی focusgroup برای غیرفعال کردن آن استفاده کنید.

این اصلاح‌کننده همچنین می‌تواند با حرکت برنامه‌ریزی‌شده‌ی focusgroupstart ترکیب شود تا به شما کنترل کامل بر روی آیتمی که هنگام ورود به گروه مورد تمرکز قرار می‌گیرد، بدهد. حافظه زمانی پاک می‌شود که عنصر به خاطر سپرده شده از دسترس خارج شود؛ برای مثال، اگر از focusgroup حذف، پنهان، غیرفعال، بی‌اثر یا حذف شود.

انصراف ( 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" .

الگوهای رایج

فهرست تبلت

یک کنترل تب با پیمایش کلید جهت‌نما بین تب‌ها.

<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>

آن را به صورت زنده امتحان کنید: الگوی فهرست جدول > فهرست جدول افقی با قابلیت بسته‌بندی .

چه چیزی را باید توجه کرد:

• ویژگی focusgroupstart روی برگه انتخاب شده قرار دارد، بنابراین focus همیشه در آنجا وارد می‌شود.
• اصلاح‌کننده‌ی nomemory تضمین می‌کند که حتی اگر کاربر قبلاً روی تب دیگری فوکوس کرده باشد، هنگام ورود مجدد، همیشه به تب انتخاب‌شده می‌رود.
• اصلاح‌کننده‌ی inline ، پیمایش با فلش را فقط به کلیدهای چپ و راست محدود می‌کند. این با رفتار مورد انتظار مشخص‌شده توسط الگوی APG Tabs مطابقت دارد.
• اصلاح‌کننده‌ی 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>

آن را به صورت زنده امتحان کنید: الگوی منو و نوار منو > منوی عمودی ساده . با اصلاح‌کننده block ، فقط کلیدهای جهت‌نمای بالا و پایین برای پیمایش موارد استفاده می‌شوند. کلیدهای جهت‌نمای چپ و راست برای رفتاری که شما تعریف می‌کنید (مثلاً باز کردن زیرمنوها) آزاد هستند. برای یک نوار منو با زیرمنوهای تو در تو، هر سطح یک گروه کانونی مستقل است. آن را به صورت زنده امتحان کنید: الگوی منو و نوار منو > نوار منو با زیرمنوهای پاپ‌اوور

<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>

آن را به صورت زنده امتحان کنید: الگوی منو و نوار منو > نوار منو با زیرمنوهای پاپ‌اوور . در حالی که نوار منو از اصلاح‌کننده 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>

آن را به صورت زنده امتحان کنید: الگوی گروه رادیویی > مقایسه: بومی در مقابل گروه تمرکزی

در حالی که ویژگی focusgroup ناوبری با کلیدهای جهت‌نما را مدیریت می‌کند، شما باید کد انتخاب را پیاده‌سازی کنید. در این دمو، کد جاوا اسکریپت حالت بررسی‌شده را مدیریت می‌کند (با استفاده از ویژگی aria-checked ).

مفاهیم کلیدی

مشارکت در آیتم‌های گروه کانونی

تمام فرزندان عنصری که به صورت متوالی قابلیت فوکوس دارند و focusgroup آنها روی یک رفتار معتبر تنظیم شده است، در آن focusgroup شرکت داده می‌شوند. این بدان معناست که عناصری که tabindex منفی دارند در نظر گرفته نمی‌شوند، اما عناصری که به صورت ذاتی قابلیت فوکوس دارند مانند <button> و همچنین عناصری که tabindex غیر منفی برای آنها تعیین کرده‌اید، در نظر گرفته می‌شوند.

توقف تب

نیازی به مدیریت مقادیر tabindex ندارید . حتی وقتی چندین عنصر از نسل‌های بعدی به طور طبیعی قابلیت tabbable دارند (مثلاً چندین عنصر <button> )، focusgroup آنها را در یک Tab stop واحد جمع می‌کند. مرورگر در هر زمان مشخص، آیتمی را که قابلیت tabbable دارد، مدیریت می‌کند. آن را به صورت زنده امتحان کنید: الگوی نوار ابزار > نیازی به مدیریت tabindex نیست .

حافظه آخرین-متمرکز

به طور پیش‌فرض، وقتی کاربر برای خروج از یک گروه تمرکز، کلید Tab را فشار می‌دهد و بعداً دوباره کلید Tabs را فشار می‌دهد، تمرکز به آخرین مورد متمرکز شده برمی‌گردد. این برای لیست‌های بزرگ و نوارهای ابزار بسیار مهم است تا کاربران جای خود را گم نکنند. وقتی می‌خواهید تمرکز همیشه به عنصر اول بازگردد، یا اگر focusgroupstart استفاده می‌کنید، برای کنترل عنصری که در ابتدا تمرکز روی آن بوده است، از اصلاح‌کننده nomemory برای غیرفعال کردن این رفتار استفاده کنید.

گروه‌های کانونی تو در تو

هر اعلان گروه کانونی یک محدوده مستقل ایجاد می‌کند. یک گروه کانونی تودرتو به طور خودکار از پیمایش پیکانی گروه والد خود صرف نظر می‌کند. برای حرکت بین گروه‌های کانونی از کلید Tab و برای پیمایش در گروه کانونی فعلی از کلیدهای جهت‌نما استفاده کنید. آن را به صورت زنده امتحان کنید: مفاهیم اضافی > گروه‌های کانونی تودرتو .

پشتیبانی از Shadow DOM

Focusgroup به طور پیش‌فرض در سراسر مرزهای DOM سایه اعمال می‌شود. یک focusgroup که روی یک میزبان سایه اعلام می‌شود، شامل عناصر قابل فوکوس در داخل درخت سایه آن میزبان است. اگر می‌خواهید از این امر صرف نظر کنید، می‌توانید focusgroup="none" در داخل درخت سایه کامپوننت خود استفاده کنید.

مدیریت تعارض کلیدی

برخی از عناصر درون یک گروه کانونی، مانند <input> ، <textarea> و سایر کنترل‌ها، از کلیدهای جهت‌نما برای اهداف خاص خود استفاده می‌کنند. هنگامی که بین کلیدهای ناوبری گروه کانونی و رفتار کلیدهای جهت‌نمای یک عنصر بومی تداخل وجود دارد:

• کلیدهای جهت‌نما توسط عنصر تعاملی (مثلاً برای حرکت مکان‌نمای متن) استفاده می‌شوند و focusgroup دخالتی ندارد.
• Tab یا Shift+Tab یک مکانیزم فرار پیش‌فرض را فراهم می‌کند که به کاربر اجازه می‌دهد از پیمایش Tab برای «بازگشت» به گروه کانونی استفاده کند.

این رفتارهای گریز فقط زمانی اعمال می‌شوند که یک تداخل کلیدی واقعی وجود داشته باشد؛ محورهای غیرمتضاد تحت تأثیر قرار نمی‌گیرند. همچنین می‌توانید preventDefault() را در رویدادهای keydown فراخوانی کنید تا رفتار کلید جهت‌نمای گروه فوکوس را برای عناصر خاص لغو کنید. این بدان معناست که می‌توانید ورودی‌ها و ناحیه‌های متنی را بدون ایجاد اختلال در هیچ یک از این رفتارها، درون یک گروه فوکوس قرار دهید.

اگر به عناصر خودتان که در یک گروه کانونی شرکت دارند، کنترل‌کننده‌های کلید اضافه می‌کنید، مراقب باشید که یک مکانیسم گریز مشابه نیز فراهم کنید تا کاربران بتوانند به بقیه گروه دسترسی داشته باشند.

کشف نسل عمیق

لازم نیست آیتم‌های Focusgroup مستقیماً فرزندِ کانتینرِ 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> تو در تو قرار دارند، کار می‌کند. هیچ الزامی برای لیست مسطح وجود ندارد، بنابراین عناصر پوشش‌دهنده برای استایل‌دهی مناسب هستند.

آن را به صورت زنده امتحان کنید: مفاهیم اضافی > فرزندان عمیق .

ادغام با ویژگی reading-flow

هر دو ناوبری ترتیبی (Tab) و جهت‌دار (کلید جهت‌نما) در صورت وجود، از ویژگی reading-flow CSS پیروی می‌کنند و به جای ترتیب منبع 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 نیز استفاده می‌کند، ترتیب خواندن به A، B، C برمی‌گردد و 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 را در جاوا اسکریپت تشخیص دهید:

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

نتیجه‌گیری

ویژگی focusgroup در حال پیشرفت از طریق نهادهای استاندارد است و ما به طور فعال در حال ساخت نمونه اولیه در Chromium و اصلاح API هستیم.

آن را امتحان کنید و یک مشکل گروه کانونی را در ردیاب مشکل Open-UI GitHub ثبت کنید . ما به ویژه به نظرات شما در مورد موارد زیر علاقه‌مندیم:

• آیا سطح API برای الگوهایی که می‌سازید مناسب است؟
• آیا الگوها یا سناریوهایی وجود دارد که ما از آنها غافل هستیم؟
• آیا عناصری وجود دارند که ویژگی focusgroup نباید روی آنها مجاز باشد؟
• داستان دسترسی‌پذیری چگونه برای موارد استفاده شما عمل می‌کند؟

از شما بابت کمک به بهبود پیمایش صفحه‌کلید در وب متشکریم!

بیشتر بدانید

• توضیح گروه کانونی
• دموهای تعاملی ( منبع )
• مشکل WHATWG HTML
• مسائل مربوط به گروه کانونی رابط کاربری باز
• راهنمای شیوه‌های نویسندگی ARIA

با تشکر از میسون فرید، سارا هیگلی، اسکات اوهارا و بقیه اعضای جامعه Open-UI برای کمکشان در بازگرداندن گروه کانونی.