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