Web Accessibility Academy · درس

أدوار مربعات الحوار وعنصر dialog الأصلي

حدّدوا الطبقة كمربع حوار مشروط حقيقي

الدرس 1 من 413 خطوة

أدوار مربعات الحوار وعنصر dialog الأصلي درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.

ما الذي يجعل النافذة مربع حوار

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

يبدو div كنافذة منبثقة لكنه ليس كذلك

يمكن أن يبدو عنصر div المنسّق كنافذة منبثقة، لكن تقنيات المساعدة تراه محتوى عاديًا. ومن دون الدور المناسب، لن يعرف المستخدمون أبدًا أنه تم فتح مربع حوار.

<div class="modal">Are you sure?</div>

تعرّف على عنصر dialog الأصلي

صُمم عنصر HTML dialog لهذه المهمة. فهو يتضمن دلالات مربع الحوار تلقائيًا، ولذلك تعلنه قارئات الشاشة بشكل صحيح.

<dialog>Are you sure?</dialog>

افتحه كنافذة مشروطة حقيقية

استدعِ showModal() في JavaScript لفتح مربع الحوار كنافذة مشروطة حقيقية. فهذا يجعل الصفحة الموجودة خلفه غير تفاعلية ولا يمكن الوصول إليها.

document.querySelector("dialog").showModal();

‎show()‎ ليس مشروطًا

انتبه: يفتح show() مربع الحوار كنافذة غير مشروطة، لذلك تظل الصفحة خلفه تفاعلية. إذا أردت مربع حوار يحجب الصفحة، فاستخدم showModal().

dialog.show();

الدور الكامن وراء dialog

من الداخل، يُطابق العنصر dialog role. وإذا اضطررت إلى بنائه من عنصر div، فإن role="dialog" هي السمة التي تمنحه معناه.

<div role="dialog">Settings</div>

‏alertdialog للاختيارات العاجلة

عندما يتطلب مربع الحوار استجابة، مثل تأكيد الحذف، استخدم role="alertdialog". فهذا يشير إلى درجة إضافية من الإلحاح لتقنيات المساعدة.

<div role="alertdialog">Delete this file?</div>

كل مربع حوار يحتاج إلى اسم

يجب أن يتضمن مربع الحوار accessible name حتى يعرف المستخدمون غرضه عند فتحه. وجّه aria-labelledby إلى العنوان الموجود بداخله.

<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>

أغلقه برمجيًا

يوفر العنصر الأصلي الطريقة المطابقة close(). يؤدي استدعاؤها إلى إغلاق مربع الحوار وإتاحة الوصول إلى الصفحة الموجودة خلفه مجددًا.

dialog.close();

الخلفية المضمّنة

تحصل النافذة المشروطة على backdrop مجانًا، ويمكنك تنسيقها باستخدام العنصر الزائف ::backdrop. فهي تعتّم الصفحة وتشير إلى انتقال التركيز.

dialog::backdrop { background: rgba(0,0,0,0.5); }

لماذا يوفر العنصر الأصلي جهدك

يتولى عنصر dialog الأصلي إدارة التركيز ومفتاح Escape وجعل الخلفية غير تفاعلية نيابةً عنك. واستخدامه يعني أخطاء أقل من إنشاء عنصر div يدويًا.

تحقق سريع

تريد نافذة تأكيد منبثقة تحجب الصفحة حتى يستجيب المستخدم. ما الاستدعاء الذي ينبغي استخدامه؟

أجب عليها في الدرس التفاعلي

مراجعة: استخدم مربعات الحوار الحقيقية

لقد تعلمت أن النافذة المشروطة تحتاج إلى dialog semantics. فضّل استخدام dialog الأصلي مع showModal()، وامنحه اسمًا، واقصر استخدام alertdialog على الاختيارات العاجلة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 30
الدروس: 120

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «أدوار مربعات الحوار وعنصر dialog الأصلي» مجاني؟

نعم — نص درس «أدوار مربعات الحوار وعنصر dialog الأصلي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.

ماذا ستتعلم في «أدوار مربعات الحوار وعنصر dialog الأصلي»؟

حدّدوا الطبقة كمربع حوار مشروط حقيقي تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟

لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «أدوار مربعات الحوار وعنصر dialog الأصلي»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟

نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Web Accessibility Academy