تاريخ النشر: 5 مارس 2026
السمة focusgroup في HTML هي طريقة مقترَحة تعريفية لإضافة إمكانية التنقّل باستخدام مفاتيح الأسهم في لوحة المفاتيح إلى عناصر واجهة المستخدم المركّبة، مثل أشرطة الأدوات وقوائم علامات التبويب والقوائم المنسدلة ومربّعات القوائم وما إلى ذلك، بدون كتابة أي رمز JavaScript خاص بالسمة roving-tabindex. تستبدل سمة واحدة مئات الأسطر من الرموز النموذجية. نريد معرفة ملاحظاتك قبل طرح هذه الميزة.
تجربة الميزة ومشاركة ملاحظاتك
يمكنك تجربة focusgroup اليوم في Chrome وEdge ومتصفّحات Chromium الأخرى من خلال تفعيلها بإحدى الطريقتَين التاليتَين:
- الاختبار المحلي: في المتصفّح، افتح صفحة
about://flagsوفعِّل علامة ميزات تجريبية لمنصة الويب. أو يمكنك تشغيل المتصفّح من سطر الأوامر باستخدام مَعلمة سطر الأوامر--enable-blink-features=Focusgroup. - مرحلة التجربة والتقييم: سجِّل في مرحلة التجربة والتقييم لمجموعة التركيز لاختبارها على موقعك الإلكتروني مع مستخدمين حقيقيين.
بعد ذلك، استكشِف العروض التوضيحية التفاعلية للاطّلاع على كل نمط أثناء العمل.
نحتاج إلى معرفة رأيك. يُرجى تقديم بلاغ بشأن مجموعة التركيز لإطلاعنا على رأيك.
هذا جهد مشترك بين المتصفحات: تم تقديم الاقتراح من Microsoft من خلال مجموعة OpenUI Community Group، وهو يحظى بدعم قوي من Google. قد يتغيّر شكل واجهة برمجة التطبيقات استنادًا إلى ملاحظاتك. لنستكشف معًا المشكلة التي يحلّها Focusgroup وكيفية عمل واجهة برمجة التطبيقات.
المشكلة: استخدام tabindex يدويًا
إذا سبق لك إنشاء شريط أدوات أو قائمة علامات تبويب أو قائمة أو مربّع قائمة، فقد كتبت بعض إصدارات هذا الرمز. تنصح دليل ممارسات إنشاء محتوى ARIA (APG) بأن تعرض عناصر واجهة المستخدم المركّبة نقطة توقّف واحدة للوحة المفاتيح وتتيح للمستخدمين التنقّل بين العناصر باستخدام مفاتيح الأسهم. يُعرف هذا النمط باسم "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>
من هنا، على المطوّرين استخدام JavaScript الذي يستمع إلى مفاتيح الأسهم لنقل التركيز، وتعديل سمة tabindex لجميع العناصر. هذا هو الإصدار المبسّط. يجب أن يتعامل التنفيذ في مرحلة الإنتاج أيضًا مع ما يلي:
- وضع الكتابة من اليمين إلى اليسار: اضبط اتجاهات مفاتيح الأسهم استنادًا إلى اتجاه المحتوى.
- الذاكرة التي تم التركيز عليها آخر مرة: استعادة التركيز على العنصر النشط السابق عندما يعود المستخدم إلى علامات التبويب.
- العناصر غير المفعّلة والمخفية: يتم تخطّيها أثناء التنقّل.
- العناصر الديناميكية: عدِّل الفهرس المتجوّل عند إضافة عناصر أو إزالتها.
تتضمّن معظم مكتبات واجهة المستخدم، بما في ذلك 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>
جرِّبها مباشرةً: نمط شريط الأدوات > شريط الأدوات الأساسي. انتهيت! لا يتم استخدام JavaScript للتنقّل باستخدام مفاتيح الأسهم. لا يلزم إدارة tabindex يدويًا. في ما يلي المهام التي يتولّاها المتصفّح الآن نيابةً عنك:
- التنقّل باستخدام مفاتيح الأسهم: يمكنك التنقّل بين العناصر مع مراعاة وضع الكتابة واتجاهها.
- موضع توقّف علامة تبويب واحد: يقلّل المتصفّح تلقائيًا عدد العناصر المشارِكة إلى موضع توقّف علامة تبويب واحد. لا يحتاج المطوّرون إلى ضبط قيمة
tabindex="-1"على العناصر غير النشطة. - الذاكرة التي تم التركيز عليها آخر مرة: عندما يغادر المستخدم مجموعة التركيز ويعود إليها، تتم استعادة التركيز على العنصر الذي غادره.
- دلالات ARIA: يوفّر المتصفّح أدوارًا مناسبة (مثل
role="toolbar") استنادًا إلى السلوك الذي تم اختياره عند استخدام العناصر العامة.
يحتفظ المطوّرون بالمنطق الفريد لميزاتهم فقط، مثل تبديل الحالة المضغوطة، أو فتح القوائم، أو إدارة التحديد، أو أي أوامر مخصّصة.
نظرة عامة على واجهة برمجة التطبيقات
تتلقّى السمة focusgroup قائمة بالرموز المميزة مفصولة بمسافات. الرمز المميز الأول هو دائمًا رمز مميز للسلوك يعرّف نمط الأداة. تليها الرموز المميزة المعدِّلة الاختيارية: focusgroup="<behavior> [inline|block] [wrap] [nomemory]".
رموز السلوك المميزة
يجب إدخال الرمز المميّز للسلوك (ما لم يتم استخدام none لإيقاف مجموعة التركيز الرئيسية). يحدّد هذا العنصر نمط الأداة المركّبة، ما يضمن إمكانية استنتاج الأدوار الصحيحة في حال عدم تحديدها. تتّبع الرموز المميزة الأنماط الموضّحة في دليل ممارسات إنشاء المحتوى المتوافق مع Aria والمدرَجة في الجدول التالي:
| السلوك | نمط APG | الحد الأدنى لدور الحاوية (عند التطبيق) | الحد الأدنى لدور الحساب الفرعي (عند التطبيق) |
المعدّلات التلقائية |
|---|---|---|---|---|
toolbar |
شريط الأدوات | شريط الأدوات | (لا شيء) | inline |
tablist |
علامات تبويب APG | tablist | علامة التبويب | inline wrap |
radiogroup |
مجموعة الراديو | radiogroup | radio | (لا شيء) |
listbox |
Listbox | listbox | option | (لا شيء) |
menu |
القائمة | menu | menuitem | block wrap |
menubar |
شريط القوائم | menubar | menuitem | inline wrap |
none |
لا تنطبق | لا تنطبق | لا تنطبق | لا تنطبق |
اطّلِع على الشرح للحصول على التفاصيل الكاملة حول طريقة عمل تعيين الأدوار.
قيود المحور (inline وblock)
إذا لم يكن للسلوك المختار أي معدّلات تلقائية، ستعمل مفاتيح الأسهم الأربعة
على نقل التركيز. يمكنك حصر التنقّل على محور منطقي واحد باستخدام المعدِّل inline أو block:
inline: لا تستجيب مجموعة التركيز إلا لمفاتيح الأسهم على المحور المضمّن، أي اليمين واليسار في معظم سياقات اللغة الإنجليزية (أفقيًا، من الأعلى إلى الأسفل).block: لا تستجيب مجموعة التركيز إلا لمفاتيح الأسهم على محور الكتلة، للأعلى وللأسفل في معظم سياقات اللغة الإنجليزية (أفقية، من أعلى إلى أسفل).
يتوافق تقييد المحور مع الخصائص المنطقية في CSS ويتكيّف تلقائيًا مع وضع الكتابة واتجاهها.
التنقّل الدائري
يتوقف التنقّل باستخدام مفاتيح الأسهم تلقائيًا عند حواف مجموعة التركيز. أضِف المعدِّل wrap للتكرار من العنصر الأخير إلى العنصر الأول (ومن العنصر الأول إلى العنصر الأخير). إذا كان السلوك يتضمّن التفافًا تلقائيًا، استخدِم المعدِّل nowrap لإيقاف هذا السلوك.
جرِّبها مباشرةً: نمط قائمة علامات التبويب > قائمة علامات تبويب أفقية مع التفاف. في هذا المثال، عندما يكون التركيز على علامة التبويب الأسئلة الشائعة ويضغط المستخدم على مفتاح السهم المتّجه لليسار، يعود التركيز إلى علامة التبويب نظرة عامة.
السمة 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 إلى الانتقال إلى "الوسط (إدخال)" لأنّه يتضمّن 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>
جرِّبها مباشرةً: نمط قائمة علامات التبويب > قائمة علامات تبويب أفقية مع التفاف.
ما يجب الانتباه إليه:
- تظهر السمة
focusgroupstartفي علامة التبويب المحدّدة، لذا ينتقل التركيز دائمًا إلى هناك. - يضمن المعدِّل
nomemoryأنّه حتى إذا كان المستخدم قد ركّز سابقًا على علامة تبويب مختلفة، سيتم دائمًا إعادة الدخول إلى علامة التبويب المحدّدة. - يقتصر المعدِّل
inlineعلى مفتاحَي السهمين المتّجهَين لليمين واليسار فقط. يتطابق ذلك مع السلوك المتوقّع الموضّح في نمط علامات التبويب في APG. - يتيح المعدِّل
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 للتنقّل للأعلى وللأسفل. مجموعات التركيز المتداخلة
مستقلة تمامًا، لذا لا تتداخل مع بعضها البعض.
Radiogroup
مجموعة أزرار اختيار مخصّصة مع إمكانية التنقّل باستخدام مفاتيح الأسهم والتحكّم الكامل في التصميم
<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.
في حين أنّ السمة focusgroup تتعامل مع التنقّل باستخدام مفاتيح الأسهم، عليك تنفيذ رمز التحديد. في هذا العرض التوضيحي، يدير رمز JavaScript حالة checked (باستخدام السمة aria-checked).
المفاهيم الرئيسية
المشاركة في مجموعة التركيز
تُعتبر جميع العناصر التابعة التي يمكن التركيز عليها بالتسلسل للعنصر الذي تم ضبط focusgroup على سلوك صالح مشارِكة في مجموعة التركيز هذه. وهذا يعني أنّه لا يتم أخذ العناصر التي تتضمّن قيمة سالبة للسمة tabindex في الاعتبار، ولكن يتم أخذ العناصر التي يمكن التركيز عليها بشكل أصلي، مثل <button>، بالإضافة إلى العناصر التي حدّدت فيها قيمة غير سالبة للسمة tabindex.
علامة الجدولة
لست بحاجة إلى إدارة قيم tabindex. حتى عندما يكون من الطبيعي أن تكون عناصر فرعية متعددة قابلة للتنقل باستخدام مفتاح Tab (على سبيل المثال، عدة عناصر <button>)، فإنّ focusgroup يدمجها في نقطة توقّف واحدة عند الضغط على مفتاح Tab. يحدّد المتصفّح العنصر الذي يمكن الانتقال إليه باستخدام مفتاح Tab في أي وقت. جرِّب البث المباشر:
نمط شريط الأدوات > لا حاجة إلى إدارة tabindex.
الذكرى التي تم التركيز عليها آخر مرة
تلقائيًا، عندما يضغط المستخدم على مفتاح Tab للخروج من مجموعة التركيز ثم يعود إليها بالضغط على مفتاح Tab، يعود التركيز إلى العنصر الذي تم التركيز عليه آخر مرة. وهذا أمر بالغ الأهمية للقوائم الكبيرة وأشرطة الأدوات حتى لا يفقد المستخدمون موضعهم. استخدِم المعدِّل nomemory لإيقاف هذا السلوك عندما تريد أن تتم إعادة التركيز دائمًا على العنصر الأول، أو إذا كنت تستخدم focusgroupstart للتحكّم في العنصر الذي يتم التركيز عليه في البداية.
مجموعات التركيز المتداخلة
يؤدي كل بيان focusgroup إلى إنشاء نطاق مستقل. تتوقف مجموعة التركيز المتداخلة تلقائيًا عن استخدام التنقّل باستخدام الأسهم في العنصر الأصل. استخدِم مفتاح Tab للتنقّل بين مجموعات التركيز، ومفاتيح الأسهم للتنقّل داخل مجموعة التركيز الحالية. جرِّبها مباشرةً: مفاهيم إضافية > مجموعات التركيز المتداخلة.
إتاحة Shadow DOM
ينطبق Focusgroup على حدود shadow DOM تلقائيًا. تتضمّن مجموعة التركيز التي تم تعريفها في مضيف الظل عناصر قابلة للتركيز داخل شجرة الظل الخاصة بهذا المضيف. إذا أردت إيقاف هذه الميزة، يمكنك استخدام focusgroup="none" داخل شجرة الظل الخاصة بالمكوّن.
التعامل مع تضارب المفاتيح
تستخدم بعض العناصر داخل مجموعة التركيز، مثل <input> و<textarea> وعناصر تحكّم أخرى، مفاتيح الأسهم لأغراضها الخاصة. عندما يكون هناك تعارض بين مفاتيح التنقّل في مجموعة التركيز وسلوك مفتاح السهم الخاص بعنصر أصلي:
- تستهلك العناصر التفاعلية مفاتيح الأسهم (على سبيل المثال، لتحريك مؤشر النص)، ولا تتداخل focusgroup مع ذلك.
- يوفّر مفتاح التبويب (Tab) أو Shift+Tab آلية خروج تلقائية، ما يسمح للمستخدم باستخدام التنقّل بواسطة مفتاح التبويب (Tab) من أجل "إعادة الدخول" إلى مجموعة التركيز.
لا تنطبق سلوكيات الهروب هذه إلا عند حدوث تعارض في مفتاح فعلي،
ولا تتأثر المحاور غير المتعارضة. يمكنك أيضًا استدعاء preventDefault() في أحداث keydown لتجاوز سلوك مفتاح السهم في focusgroup لعناصر معيّنة. وهذا يعني أنّه يمكنك تضمين عناصر إدخال ومساحات نصية داخل مجموعة تركيز بدون تعطيل أيّ من السلوكين.
إذا أضفت معالجات مفاتيح إلى عناصرك الخاصة المشاركة في مجموعة تركيز، احرص على توفير آلية خروج مماثلة ليتمكّن المستخدمون من الوصول إلى بقية المجموعة.
اكتشاف العناصر الفرعية المتعمّقة
لا يجب أن تكون عناصر 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 اليوم، قبل أن يصبح متوافقًا بالكامل مع جميع المتصفّحات، يمكنك رصد التوافق مع focusgroup في JavaScript:
if ('focusgroup' in HTMLElement.prototype) {
// focusgroup is supported.
} else {
// fall back to manual roving tabindex.
}
الخاتمة
تتطوّر السمة focusgroup من خلال الهيئات المعنية بالمعايير، ونعمل حاليًا على إنشاء النموذج الأولي في Chromium وتحسين واجهة برمجة التطبيقات.
يمكنك تجربة هذه الميزة والإبلاغ عن مشكلة في مجموعة التركيز في أداة تتبُّع المشاكل في Open-UI على GitHub. يهمّنا بشكل خاص معرفة آرائك حول ما يلي:
- هل تبدو واجهة برمجة التطبيقات مناسبة للأنماط التي تنشئها؟
- هل هناك أنماط أو سيناريوهات لم نلاحظها؟
- هل هناك عناصر لا يجب السماح باستخدام السمة focusgroup عليها؟
- كيف تعمل ميزة إمكانية الوصول في حالات الاستخدام؟
نشكرك على مساعدتنا في تحسين التنقّل باستخدام لوحة المفاتيح على الويب.
مزيد من المعلومات
- شرح ميزة Focusgroup
- العروض التوضيحية التفاعلية (المصدر)
- مشكلة في HTML من WHATWG
- مشاكل مجموعة التركيز في Open UI
- دليل ممارسات إنشاء محتوى ARIA
نشكر "ماسون فريد" و"سارة هيغلي" و"سكوت أوهارا" وبقية أعضاء منتدى Open-UI على مساعدتهم في إعادة طرح ميزة focusgroup.