موسيقى للتركيز

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

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

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

في هذا المثال، أحدثت قيمة السمة tabindex فوضى في ترتيب التنقل بـ Tab:

في هذا المثال، أنشأَت خدمة CSS درجة من التباعد بين ترتيب علامات التبويب والترتيب المرئي للمحتوى:

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

جعل عناصر inert تفاعلية

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

السمة tabindex

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

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

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

<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 التي تتضمّن قيمة سالبة تجعل العنصر قابلاً للتركيز ولكن غير قابل للتبويب. العنصر قادر على تلقّي التركيز، مثلاً من خلال HTMLElement.focus()، ولكنه ليس جزءًا من ترتيب التنقّل التركيز المتسلسل. استخدام السمة tabindex="-1" للعناصر غير القابلة للنقر والتي يمكن التركيز عليها. يُرجى العِلم أنّه عند إضافة tabindex="-1" إلى عنصر تفاعلي، لن يكون قابلاً للتبويب بعد الآن.

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

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

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

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

السمة contenteditable

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

التركيز على العناصر التفاعلية

السمة autofocus

على الرغم من أنّ القيمة المنطقية autofocus هي سمة عمومية يمكن ضبطها على أي عنصر، إلا أنّها لا تجعل العنصر inert تفاعليًا. عند تحميل الصفحة، سيتم التركيز على أول عنصر يمكن التركيز عليه ويتضمن مجموعة سمات 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 يمكنها إزالة العناصر التفاعلية من تسلسل علامات التبويب. إنّ إدراج سمة tabindex سلبية إلى عناصر يمكن التركيز عليها، وإضافة السمة disabled إلى عناصر التحكّم في النماذج الداعمة، وإضافة السمة inert العامة إلى إحدى الحاويات، تؤدي إلى جعل العناصر غير قابلة للتبويب. هذه السمات الثلاث غير قابلة للتبادل.

قيمة tabindex سلبية

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

تمنع قيمة tabindex السالبة مستخدمي لوحة المفاتيح من التركيز على العناصر التفاعلية، ولكنها لا توقِف العنصر. لا يزال بإمكان مستخدمي المؤشر التركيز على العنصر. لإيقاف عنصر، استخدِم السمة 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 إلى عنصر ما، يصبح هذا العنصر وكل المحتوى المُدمج غير مفعّل، ولا يمكن النقر عليه ولا يمكن النقر عليه، وتتم إزالته من شجرة تسهيل الاستخدام. يمكن تطبيق علامة inert على أي عنصر، إلا أنّها تُستخدم بشكل عام لأقسام من المحتوى، مثل المحتوى الذي يظهر خارج الشاشة أو المحتوى المخفي.

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

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

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

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

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

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