شرح صفوف ومحتوى الفقرة
تمثل الإتاحة الرقمية ركيزة جودة أساسية لكافة الواجهات التفاعلية. يجب أن تضمن النوافذ الحوارية المشروطة منع فخاخ لوحة المفاتيح، وتمكين مستخدمي زر التنقل من تصفح العناصر التفاعلية بسلاسة والخروج بسهولة عبر زر الهروب في أي وقت.
عند إغلاق النافذة الحوارية، يجب إعادة تركيز لوحة المفاتيح تلقائياً إلى الزر الأساسي الذي قام بتشغيل النافذة في البداية؛ مما يحافظ على استقرار موضع التصفح الذهني للمستخدم ويمنع ارتداد مؤشر التركيز إلى بداية الصفحة بشكل مفاجئ.
HTML
<!-- Accessible dialog with clear heading and trigger -->
<button type="button" popovertarget="alert-modal">
View Order Status
</button>
<dialog id="alert-modal" popover>
<h2>Order Submitted</h2>
<p>Your order was processed successfully.</p>
<button type="button" popovertarget="alert-modal"
popovertargetaction="hide">Return to Store</button>
</dialog>
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس العناصر التفاعلية الأصيلة في HTML: وسوم القوائم المطوية details وsummary، وحالة الانفتاح open، والنوافذ الحوارية dialog في الطبقة العليا، وأوامر التحكم التصريحية بالحوار، وميزة القوائم المنبثقة popover، وإتاحة لوحة المفاتيح. الخطوة التالية تأخذنا إلى عالم بناء نماذج الإدخال في مسار نماذج HTML.