التركيز

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

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

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

في هذا المثال، تسبّبت قيمة السمة tabindex في حدوث خلل في ترتيب علامات التبويب:

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

عكس بيان flex-flow: row-reverse; الترتيب المرئي. بالإضافة إلى ذلك، تم تطبيق السمة order في 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 أو أكبر في تسلسل علامات تبويب منفصل. كما ستلاحظ في Codepen، يبدأ التنقل باستخدام المفتاح Tab في تسلسل منفصل، بترتيب من القيمة الأدنى إلى القيمة الأعلى، قبل الانتقال إلى العناصر في التسلسل العادي (لم يتم ضبط tabindex أو tabindex="0") بترتيب المصدر:

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

السمة contenteditable

لقد ناقشنا السمة contenteditable سابقًا. يؤدي ضبط contenteditable="true" على أي عنصر إلى جعله قابلاً للتعديل، ويمكن التركيز عليه، كما يصبح جزءًا من ترتيب علامات التبويب. يشبه سلوك التركيز ضبط tabindex="0"، ولكنّه ليس نفسه. يمكن التركيز على عناصر contenteditable المتداخلة، ولكن لا يمكن الانتقال إليها باستخدام مفتاح Tab. لإتاحة التنقّل باستخدام لوحة المفاتيح في عنصر contenteditable متداخل، أضِف 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>، يتم إيقاف جميع عناصر التحكّم الثانوية الخاصة بالنماذج، باستثناء محتوى أول <legend> في <fieldset>.

يمكن أيضًا استهداف العناصر نفسها التي تتوافق مع 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.

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

التحقّق من فهمك

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