التركيز

تكون العناصر التفاعلية، بما في ذلك عناصر التحكّم في النماذج، الروابط والأزرار، قابلة للتركيز عليها والانتقال إليها باستخدام مفتاح Tab تلقائيًا. تُعدّ العناصر القابلة للانتقال إليها باستخدام مفتاح Tab جزءًا من ترتيب التنقّل المتسلسل للتركيز في المستند. أما العناصر الأخرى، فهي غير نشطة، ما يعني أنّها غير تفاعلية. باستخدام سمات HTML، من الممكن جعل العناصر التفاعلية غير نشطة والعناصر غير النشطة تفاعلية.

يكون ترتيب التركيز في التنقّل هو نفسه الترتيب المرئي تلقائيًا، وهو ترتيب رمز المصدر. تتوفّر سمات HTML يمكنها تغيير هذا الترتيب وخصائص CSS يمكنها تغيير الترتيب المرئي للمحتوى. يمكن أن يؤدي تغيير ترتيب الانتقال باستخدام مفتاح Tab باستخدام HTML أو ترتيب العرض المرئي باستخدام CSS إلى الإضرار بتجربة المستخدم.

لا تغيِّر ترتيب الانتقال باستخدام مفتاح Tab المرئي والفعلي باستخدام CSS وHTML. كما يوضّح المثالان التاليان، تكون ترتيبات الانتقال باستخدام مفتاح Tab التي تختلف عن الترتيب المتوقّع مرئيًا مربِكة للمستخدمين وتؤثر سلبًا في تجربة المستخدم.

في المثال التالي، أدّت قيمة السمة tabindex إلى جعل ترتيب الانتقال باستخدام مفتاح Tab غير منتظم:

في هذا المثال، أنشأت CSS تباينًا بين ترتيب الانتقال باستخدام مفتاح Tab والترتيب المرئي للمحتوى:

عكس الإعلان flex-flow: row-reverse; الترتيب المرئي. بالإضافة إلى ذلك، تم تطبيق خاصية ترتيب CSS order على الكلمة السادسة، "This"، ما أدّى إلى نقل هذه الكلمة مرئيًا. إنّ ترتيب الانتقال باستخدام مفتاح Tab هو ترتيب الرمز، الذي لم يعُد يتطابق مع الترتيب المرئي. يؤدي ذلك إلى حدوث انقطاع في تجربة مستخدمي لوحة المفاتيح.

يمكن أن تغيِّر بعض ميزات CSS، بما في ذلك flexbox، grid، positioning، transforms، و multi-column، الترتيب المرئي للمحتوى. اختبِر المحتوى من خلال الانتقال إليه باستخدام مفتاح Tab على لوحة المفاتيح: استخدِم shift + tab للانتقال إلى الخلف خلال المحتوى. استخدِم CSS للإشارة إلى العنصر الذي تم التركيز عليه. لا تعِد ترتيب العناصر القابلة للتركيز عليها باستخدام CSS.

من المهم الحفاظ على ترتيب منطقي للانتقال باستخدام مفتاح Tab على جميع أحجام إطار العرض.

جعل العناصر غير النشطة تفاعلية

يمكن إضافة السمتَين contenteditable وtabindex، باعتبارهما سمتَين عامتَين، إلى أي عنصر، ما يجعلهما قابلتَين للتركيز عليهما في هذه العملية. يمكن أيضًا التركيز على العناصر التي يمكن التركيز عليها باستخدام الماوس أو المؤشر، من خلال ضبط السمة autofocus أو باستخدام نص برمجي، مثل element.focus().

السمة tabindex

تتيح السمة العامة tabindex ، التي تم تقديمها في السمات، إمكانية التركيز على العناصر التي لا يمكنها تلقّي التركيز عادةً، وعادةً ما يتم ذلك باستخدام Tab، ومن هنا جاء الاسم.

تأخذ السمة tabindex عددًا صحيحًا كقيمة لها. تجعل القيمة السلبية العنصر قابلاً للتركيز عليه ولكن لا يمكن الانتقال إليه باستخدام مفتاح Tab. تجعل قيمة tabindex التي تساوي 0 العنصر قابلاً للتركيز عليه والانتقال إليه باستخدام مفتاح Tab، ما يؤدي إلى إضافة العنصر الذي يتم تطبيقه عليه إلى ترتيب التنقّل المتسلسل للتركيز بترتيب رمز المصدر. تجعل القيمة 1 أو أكبر العنصر قابلاً للتركيز عليه والانتقال إليه باستخدام مفتاح Tab، ولكنها تضيفه إلى ترتيب الانتقال باستخدام مفتاح Tab ذي الأولوية ويجب تجنُّبها.

على هذه الصفحة، يكون زر المشاركة <share-action> عنصرًا مخصّصًا. يضيف tabindex="0" هذا العنصر إلى ترتيب الانتقال باستخدام مفتاح Tab التلقائي للوحة المفاتيح:

<share-action authors="@front-end.social/@estellevw" data-action="click"
  data-category="web.dev" data-icon="share" data-label="share, mastodon"
  role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

بالإضافة إلى ذلك، يتضمّن التنقّل المحلي عنصرًا مخصّصًا بقيمة tabindex سالبة:

<web-navigation-drawer type="standard" tabindex="-1">

تجعل السمة tabindex التي تتضمّن قيمة سالبة العنصر قابلاً للتركيز عليه، ولكن لا يمكن الانتقال إليه باستخدام مفتاح Tab. يمكن أن يتلقّى العنصر التركيز، مثل استخدام HTMLElement.focus()، ولكنّه ليس جزءًا من ترتيب التنقّل المتسلسل للتركيز. إنّ الاصطلاح الخاص بالعناصر القابلة للتركيز عليها وغير القابلة للانتقال إليها باستخدام مفتاح Tab هو استخدام tabindex="-1". إذا أضفت tabindex="-1" إلى عنصر تفاعلي، لن يعود بإمكانك الانتقال إليه باستخدام مفتاح Tab.

يمكن استخدام الطريقة element.focus() لضبط التركيز على العناصر القابلة للتركيز عليها. تعرض المتصفّحات العناصر التي تم التركيز عليها. لهذا السبب، تجنَّب استخدام element.focus({preventScroll:true})، لأنّ التركيز على عنصر غير مرئي يقدّم تجربة سيئة للمستخدم.

إذا أردت طلب المستند لمعرفة العنصر الذي تم التركيز عليه، استخدِم السمة للقراءة فقط Document.activeElement.

يتم تضمين العناصر التي تتضمّن tabindex بقيمة 1 أو أكبر في ترتيب منفصل للانتقال باستخدام مفتاح Tab. كما في Codepen التالي، يبدأ الانتقال باستخدام مفتاح Tab في ترتيب منفصل، في ترتيب القيم من الأدنى إلى الأعلى، قبل الانتقال إلى تلك الموجودة في الـ ترتيب العادي (لم يتم ضبط tabindex أو tabindex="0") بترتيب المصدر:

تضع tabindex التي تتضمّن قيمة موجبة العنصر في ترتيب التركيز ذي الأولوية، ما قد يؤدي إلى حدوث فوضى في ترتيب التركيز. تجنَّب تعديل ترتيب نموذج DOM باستخدام tabindex. يمكن أن يؤدي تغيير ترتيب الانتقال باستخدام مفتاح Tab إلى تقديم تجارب سيئة للمستخدمين ويصعب الحفاظ عليه.

السمة contenteditable

تمت مناقشة السمة contenteditable سابقًا. يؤدي ضبط contenteditable="true" على أي عنصر إلى جعله قابلاً للتعديل والتركيز عليه وجزءًا من ترتيب الانتقال باستخدام مفتاح Tab. يشبه سلوك التركيز ضبط tabindex="0"، ولكنّه ليس نفسه. تكون عناصر contenteditable المتداخلة قابلة للتركيز عليها ولكن لا يمكن الانتقال إليها باستخدام مفتاح Tab. لجعل عنصر contenteditable متداخل قابلاً للانتقال إليه باستخدام مفتاح Tab، أضِف tabindex="0"، ما يؤدي إلى إضافته إلى ترتيب التنقّل المتسلسل للتركيز.

منح autofocus للعناصر التفاعلية

على الرغم من أنّ autofocus المنطقية هي سمة عامة يمكن ضبطها على أي عنصر، فإنّها لا تجعل العنصر غير النشط تفاعليًا. عند تحميل الصفحة، يتلقّى أول عنصر قابل للتركيز عليه يتضمّن سمات autofocus التركيز، طالما يتم عرض هذا العنصر وليس متداخلاً في <dialog>.

قد يكون ضبط التركيز تلقائيًا على المحتوى مربِكًا للمستخدمين. عند ضبط autofocus على عنصر تحكّم في نموذج، يتم عرض عنصر التحكّم هذا عند تحميل الصفحة. قد لا يلاحظ المستخدمون، بما في ذلك مستخدمو برامج قراءة الشاشة والمستخدمون الذين لديهم إطارات عرض صغيرة، تعليمات النموذج أو حتى تصنيف عنصر التحكّم في النموذج. علاوةً على ذلك، لا تغيِّر السمة autofocus ترتيب التنقّل المتسلسل للتركيز في المستند. يتم تخطّي العناصر في الترتيب التي تسبق العنصر الذي تم التركيز عليه تلقائيًا. لهذه الأسباب، يجب تجنُّب استخدام السمة autofocus.

الاستثناء من نصيحة "عدم استخدام autofocus" هو تضمين السمة autofocus ضِمن عناصر <dialog>. عند فتح مربّع حوار، يركّز المتصفّح تلقائيًا على أول عنصر تفاعلي قابل للتركيز عليه ضِمن <dialog>، ما يعني أنّه ليس من الضروري إضافة autofocus إلى عنصر. إذا أردت التأكّد من أنّ عنصرًا تفاعليًا معيّنًا ضِمن مربّع الحوار يتلقّى التركيز عند فتح مربّع الحوار، أضِف السمة autofocus إلى هذا العنصر.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

تسمح السمة autofocus التي تم ضبطها على <button> للإغلاق بتلقّي التركيز عند فتح مربّع الحوار. بما أنّه العنصر الأول في مربّع الحوار، كان سيتلقّى التركيز في أي حال. تلقائيًا، عند فتح مربّع حوار، يتلقّى أول عنصر قابل للتركيز عليه ضِمن مربّع الحوار التركيز ما لم يتم ضبط السمة autofocus على عنصر مختلف ضِمن مربّع الحوار.

جعل العناصر التفاعلية غير نشطة

تتوفّر أيضًا سمات HTML يمكنها إزالة العناصر التفاعلية من ترتيب الانتقال باستخدام مفتاح Tab. إنّ تضمين tabindex سالبة في العناصر القابلة للتركيز عليها، وإضافة السمة disabled إلى عناصر التحكّم في النماذج المتوافقة، وإضافة السمة العامة inert إلى حاوية، كل ذلك يجعل العناصر غير قابلة للانتقال إليها باستخدام مفتاح Tab. هذه السمات الثلاث منفصلة تمامًا ولا يمكن استخدام أي منها كبديل عن الأخرى.

قيمة tabindex سالبة

تجعل السمة tabindex التي تتضمّن قيمة سالبة العنصر قابلاً للتركيز عليه، ولكن لا يمكن الانتقال إليه باستخدام مفتاح Tab. على الرغم من أنّه ليس من الضروري إضافة tabindex="0" إلى عنصر قابل للتركيز عليه تلقائيًا، بما في ذلك الروابط والأزرار وعناصر التحكّم في النماذج والعناصر التي تكون contenteditable ، فإنّ تضمين tabindex بقيمة سالبة يزيل العناصر القابلة للانتقال إليها باستخدام مفتاح Tab عادةً من ترتيب التنقّل المتسلسل للتركيز.

تمنع قيمة tabindex السلبية مستخدمي لوحة المفاتيح من التركيز على العناصر التفاعلية، ولكنّها لا توقف العنصر. سيظل بإمكان مستخدمي المؤشر التركيز على العنصر. لإيقاف عنصر، استخدِم السمة disabled.

غير مفعّل

تجعل السمة المنطقية disabled عناصر التحكّم في النماذج التي يتم تطبيقها عليها والعناصر التابعة لها، إن وُجدت، غير قابلة للتركيز عليها. لا يمكن التركيز على عناصر التحكّم في النماذج غير المفعّلة، ولا تتلقّى أحداث النقر، ولا يتم إرسالها عند إرسال النموذج.

disabled ليست سمة عامة. تنطبق على <button> و<input> و <optgroup> و<option> و<select> و<textarea> والعناصر المخصّصة المرتبطة بالنموذج و<fieldset>. عند ضبطها على <optgroup> أو <fieldset>، يتم إيقاف جميع عناصر التحكّم في النماذج التابعة، باستثناء محتويات أول <fieldset>'s <legend>.

يمكن أيضًا استهداف العناصر نفسها التي تتوافق مع disabled باستخدام الفئتَين الزائفتَين :disabled و :enabled. يتم عادةً تنسيق العناصر التي تم إيقافها باستخدام السمة disabled باللون الرمادي الفاتح باستخدام ورقة أنماط وكيل المستخدم، حتى إذا تم ضبط accent-color

بما أنّها سمة منطقية، فإنّ وجود السمة يؤدي إلى إيقاف العنصر الذي يكون مفعّلاً بخلاف ذلك، ولا يمكنك ضبطها على false. لإعادة تفعيل عنصر تم إيقافه، يجب إزالة السمة، وعادةً ما يتم ذلك باستخدام Element.removeAttribute('disabled').

تتيح لك السمة HTMLInputElement.disabled التحقّق مما إذا كان حقل الإدخال غير مفعّل. بما أنّ disabled ليست سمة عامة، لا يتم اكتسابها من HTMLElement، ولكن كل واجهة عنصر متوافقة، مثل HTMLSelectElement وHTMLTextareaElement، تتضمّن السمة نفسها للقراءة فقط.

لا تنطبق السمة disabled على العناصر inert عادةً التي يتم جعلها قابلة للتركيز عليها باستخدام tabindex أو contenteditable، ولا تنطبق على العنصر <form>. لإيقاف هذه العناصر، يمكن استخدام السمة العامة inert.

السمة inert

عند إضافة السمة المنطقية العامة inert إلى عنصر، يتم إيقاف هذا العنصر وجميع المحتوى المتداخل، ما يعني أنّه لا يمكن النقر عليه أو الانتقال إليه باستخدام مفتاح Tab. تتم أيضًا إزالتها من شجرة تسهيل الاستخدام. على الرغم من أنّه يمكن تطبيق inert على أي عنصر، فإنّه يُستخدم عادةً لأقسام المحتوى، مثل المحتوى خارج الشاشة أو المحتوى المخفي بخلاف ذلك.

عند تطبيق disabled على عناصر التحكّم في النماذج، يوفّر المتصفّح تنسيقًا تلقائيًا ويمكن تنسيقه باستخدام الـ :disabled الزائفة. لا توفّر السمة inert أي مؤشرات مرئية وليس لها فئة زائفة مطابقة (على الرغم من أنّ أداة اختيار السمة [inert] تطابقها).

يمكن أن يؤدي استخدام inert على المحتوى المرئي بدون أنماط تشير إلى عدم النشاط إلى تقديم تجربة سيئة للمستخدم. بما أنّ المحتوى غير النشط غير متاح لمستخدمي برامج قراءة الشاشة، يمكن أن يؤدي ذلك إلى حدوث ارتباك عندما يرى مستخدمو برامج قراءة الشاشة الذين يمكنهم الرؤية محتوى على الشاشة غير متاح لأدوات تسهيل الاستخدام. اجعل عدم النشاط واضحًا جدًا باستخدام CSS.

تأكَّد من عدم انتقال التركيز مطلقًا إلى محتوى غير مرئي. يجب جعل أي محتوى يتم عرضه خارج الشاشة ولا يظهر تلقائيًا عند التركيز عليه غير نشط. إذا كان المحتوى مخفيًا ولكنّه يظهر عند التركيز عليه، مثل رابط "الانتقال إلى المحتوى"، فلا داعي لجعله غير نشط.

اختبِر معلوماتكَ

اختبِر معلوماتك عن التركيز.