HTML وCSS / أنظمة عرض قابلة للصيانة / الدرس 17
أنماط الإفصاح والتفاعل الميسرة
اختر التفاعل الأصلي واحفظ الحالة والتركيز واعرف حدود HTML وCSS في الودجت الكامل.
في هذه الصفحة
أهداف الدرس
- المظهر ليس عقد تفاعل
- تنسيق الحالة الأصلية دون استبدالها
- اختبار رحلة المفاتيح كاملة
المظهر ليس عقد تفاعل
يشمل العقد الدور والاسم والحالة والمفاتيح والتركيز والنتيجة. لا تكتسب div سلوك زر بمظهره، ولا ينفذ role="button" التنشيط والمفاتيح وحده. فضل العنصر الأصلي واستعن بأنماط WAI-ARIA عند ضرورة التخصيص. تنسق CSS التوسع ولا تضمن إدارة التركيز أو تزامن الحالة. ابدأ بالمهمة وأبسط تفاعل يحققها.
الإفصاح الأصلي للمحتوى المناسب
توفر details مع summary إفصاحا أصليا لمعلومات إضافية. سم ما يكشف ولا تخف تعليمات لازمة لبدء المهمة. يدير الأصل التوسع وحالته لكن يبقى اختبار المتصفح والتقنيات ضروريا. لا تفرض دورا أو aria-expanded على summary دون حاجة مبررة. ليس الإفصاح قائمة تطبيق أو تبويبات أو حوارا؛ لكل منها عقد مفاتيح وتركيز مختلف.
تنسيق الحالة الأصلية دون استبدالها
يغير المثال حد details[open] وتنسيق summary ويترك التوسع لـHTML. يبقى التركيز الأصلي وله نمط منفصل عن الفتح. يحدث التنشيط open الحقيقية فتتبعها CSS لا صنفا منفصلا. لا تزل كل المؤشرات دون بديل واضح. المحتوى معلومات سفر إضافية فيناسب الإفصاح. احفظ ترتيب المصدر واختبر الفتح والإغلاق لا صورة المفتوح فقط.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Native disclosure</title>
<style>
details { padding: 1rem; border: 1px solid #555; } details[open] { border-color: #174e9a; } summary { cursor: pointer; } summary:focus-visible { outline: 3px solid #174e9a; outline-offset: 3px; }
</style>
</head>
<body>
<main><h1>Visit the workshop</h1><details><summary>Travel information</summary><p>The entrance is beside the east courtyard.</p></details></main>
</body>
</html>
Travel information can be opened and closed through the summary.تستخدم summary السلوك الأصلي وتنسق open الحالة مع مؤشر تركيز منفصل. النتيجة المتوقعة: يمكن فتح معلومات السفر وإغلاقها عبر الملخص.
استقلال الإفصاحات المستقلة
يقدم المثال إفصاحين يمكن مقارنتهما معا. الإغلاق المتبادل خيار منتج لا مطلب إتاحة تلقائيا وقد يزيل معلومة مستخدمة. في المخصص زامن الزر واللوحة وطبق المفاتيح واحفظ التركيز. تساعد dialog لكن الفتح والإغلاق والتسمية وموضع التركيز وإعادته تحتاج تنفيذا واختبارا. لا يعادل open الساكن showModal أو كل التزامات الحوارات.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Independent disclosures</title>
<style>
details { margin-block: 1rem; padding: 1rem; border: 1px solid; } summary:focus-visible { outline: 3px solid #174e9a; outline-offset: 3px; }
</style>
</head>
<body>
<main><h1>Workshop questions</h1><details><summary>What should I bring?</summary><p>A text editor and the supplied notes.</p></details><details><summary>Can I review later?</summary><p>The local examples can be saved for practice.</p></details></main>
</body>
</html>
Both answers can be expanded independently.لكل إفصاح حالة ويمكن فتحهما معا دون سكربت أو افتراض الحصرية. النتيجة المتوقعة: يمكن توسيع الجوابين باستقلال.
اختبار رحلة المفاتيح كاملة
تنقل للتحكم وافهم اسمه وحالته وفعله واقرأ المحتوى وغادر دون حبس. أعد مع التكبير والتباين والتقنية المساعدة. لا تترك لوحة مخفية عناصر تفاعلية مفاجئة بمسار التركيز. تجنب tabindex الموجب ولا تنقل التركيز لمجرد نهاية حركة. احترم تقليل الحركة دون حذف معلومات. تكشف الأدوات بعض الأسماء والسمات ولا تثبت العقد الكامل أو ملاءمة النمط.
الأخطاء الشائعة وإصلاحها
لا تنشط div المنسقة بالمفاتيح
- لماذا يحدث؟
- حل المظهر محل العنصر الأصلي.
- كيف تصلحه؟
- استخدم زرّا أو نفذ النمط المبرر كاملا.
- كيف تتجنب تكراره؟
- اختبر الدور والاسم والحالة والمفاتيح.
يخالف التنسيق التوسع الحقيقي
- لماذا يحدث؟
- تباعد الصنف والحالة.
- كيف تصلحه؟
- اجعل العرض يتبع الحالة الموثوقة.
- كيف تتجنب تكراره؟
- اختبر تكرار الفتح والإغلاق.
يعيد الحوار التركيز إلى لا شيء
- لماذا يحدث؟
- غابت سياسة الإعادة.
- كيف تصلحه؟
- أعده إلى تحكم مفيد باق.
- كيف تتجنب تكراره؟
- اختبر الإغلاق والعودة.
اختبر فهمك
1. اختر نمطا لتعليمات شحن اختيارية ولتأكيد يحجب العمل الآخر.
اعرض الحل المشروح
يناسب الإفصاح التعليمات الاختيارية داخل التدفق. قد يحتاج التأكيد الحاجب حوارا صحيحا بالتسمية والتركيز والإغلاق والإعادة. لا يمنح مظهر details العائم عقد الحوار.
2. ماذا يحدث إذا أفادت مقارنة جوابين؟
اعرض الحل المشروح
اسمح ببقائهما مفتوحين إلا لمبرر منتج، وافحص الاسمين والمفاتيح. قد يعيق الإغلاق الآلي المقارنة وليس لازما لمجرد تسمية المكون أكورديونا.
أهم ما تعلمته
- فضل السلوك الأصلي المناسب.
- لا تعوض CSS الدلالة أو إدارة التركيز.
- اختبر الدخول والتنشيط والقراءة والخروج.