الخلاصة

  • فرّقت مسودة Selectors Level 4 الصادرة في فبراير 2018 بين العنصر الذي يملك التركيز، ويطابقه :focus، والعنصر الذي يرى المتصفح أن تركيزه يستحق إشارة مرئية، ويطابقه :focus-visible.
  • فصّلت المسودات اللاحقة قرائن القرار: التنقل بلوحة المفاتيح، وحقول الكتابة، وتفضيل إظهار التركيز دائماً، وانتقال التركيز بواسطة برنامج. يملك المتصفح سياق الوصول ويملك الموقع شكل العلامة.

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

مسودة W3C بتاريخ 2 فبراير 2018 فصلت بين سؤالين. يحدد :focus العنصر الذي يستقبل الإدخال. أما :focus-visible فيطابقه عندما يرى المتصفح أن هذا التركيز يجب أن يكون ظاهراً. تذكر المسودة حقل النص: الكتابة التالية ستغير محتواه، ولذلك يحتاج القارئ إلى معرفة مكانه. وتذكر الزر الذي وصل إليه القارئ بلوحة المفاتيح: لا يوجد مؤشر فأرة يكشف أين انتهت رحلة Tab. عند النقر المباشر، يحمل المؤشر جزءاً من تلك المعلومة. الزر نفسه، لكن الطريق إليه مختلف.

هذه معرفة يملكها المتصفح قبل أن يكتب الموقع أي لون للإطار. يعرف وسيلة الإدخال وإعدادات القارئ. ويعرف ناشر الصفحة كيف يرسم علامة منسجمة مع ألوانه وتباينها. إزالة outline من كل عنصر يطابق :focus ترمي معرفة المتصفح قبل أن تصل إلى العين. أما تصميم علامة قوية لـ:focus-visible فيحوّل تلك المعرفة إلى واجهة مقروءة. يستطيع الإطار تغيير بدلته؛ لا يصح أن يختفي أثناء الدوام.

مسودة 21 نوفمبر 2018 قدّمت مثالاً جريئاً: إطاراً أصفر سميكاً للعناصر التي يطابقها :focus-visible، وخلفية صفراء إضافية للروابط. لم تكن تدعو المصمم إلى تحمل شكل افتراضي لا يعجبه، بل إلى رسم علامة متسقة وواضحة في الصفحة كلها. بين روابط وأزرار وحقول كثيرة، يحتاج القارئ إلى لافتة يمكن العثور عليها، لا إلى اعتذار بصري صغير.

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

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

في مسودة 7 مايو 2022 صار التعبير أدق: يطابق :focus العنصر المركز عليه، ويطابق :focus-visible المواقف التي يقرر فيها المتصفح إظهار ذلك التركيز. يستطيع الموقع تغيير مظهر الإشارة من دون إعادة اختراع موعد ظهورها. وتقترح المسودة أن تستخدم المتصفحات المحدد نفسه في تنسيق التركيز الافتراضي، فيعمل الرسم الذي يختاره الموقع مع قرار العرض الأساسي على ساعة واحدة.

حافظت مسودة 11 نوفمبر 2022 على هذا المنطق. ويضع سجل نشر W3C المراجعات في تسلسلها. النتيجة بسيطة وملموسة: زر هادئ تحت مؤشر الفأرة، وعلامة مضيئة حين توصله ضغطة Tab إلى قارئ يحتاج معرفة موقعه. للمصمم اختيار لون الضوء. وللقارئ حق معرفة أين ستصل الضغطة القادمة.

عاد إطار التركيز إلى عمله. هذه المرة يحمل وصفاً وظيفياً أدق: دليل الطريق.