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

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

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

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

في هذا المثال، قيمة السمة tabindex جعل ترتيب التنقل بـ Tab فوضويًا:

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

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

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

يمكن إضافة السمتَين 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 السالبة مستخدمي لوحة المفاتيح من التركيز على العناصر التفاعلية، ولكنها لا توقف العنصر. Pointer لا يزال بإمكان المستخدمين التركيز على العنصر. لإيقاف عنصر، استخدِم السمة 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.

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

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

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

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