جعل صفحاتكم ميسّرة.

امنحوا كل صورة وصفًا، وحافظوا على ترتيب العناوين، واجعلوا النص مقروءًا فوق الألوان، ليتمكن مستخدمو قارئات الشاشة ولوحات المفاتيح من استخدام صفحاتكم. تسرد هذه الصفحة ما يفعله DXPR Builder نيابة عنكم، وما تضيفونه بأنفسكم، وكيف تتحققون من النتيجة قبل النشر.

ما يفعله المنشئ نيابة عنكم

• بنية نصية حقيقية. يستخدم عنصر النص CKEditor 5 مع عناوين حقيقية (العنوان 1 إلى العنوان 6) وفقرات وقوائم.
• ARIA على العناصر التفاعلية. تحمل التبويبات role="tablist" وrole="tab". وتحمل أشرطة التقدم وعدادات الدائرة role="progressbar" مع حدّها الأدنى والأقصى وقيمتها الحالية. وعناوين لوحات الطي أزرار تُعلن ما إذا كانت لوحتها مفتوحة.
• مربعات حوار محرّر ميسّرة. كل مربع حوار إعدادات هو role="dialog" مع aria-modal وعنوان.
• وصول بلوحة المفاتيح في المحرّر. Enter يفتح إعدادات العنصر، ويغلق Escape اللوحة أو يلغي تحديد العنصر، وينقل Ctrl (Cmd على Mac) مع مفتاح سهم العناصر. انظر مرجع اختصارات لوحة المفاتيح.

عناصر التخطيط (المقاطع والصفوف والأعمدة) هي عناصر div عادية. والبنية التي يعلنها قارئ الشاشة تأتي من عناوينكم.

إضافة نص بديل إلى صورة

1. أشيروا إلى الصورة وانقروا المزيد > الإعدادات.
2. افتحوا لوحة تحسين محركات البحث.
3. اكتبوا وصفًا في سمة Alt: ما تُظهره الصورة ولماذا هي على الصفحة، في جملة أو جملتين، دون عبارة "image of".
4. انقروا حفظ في مربع الحوار، ثم حفظ على شريط الحاوية.

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

تبدأ الصور المولّدة بالذكاء الاصطناعي بأمركم كنص بديل لها. حرّروه ليصف النتيجة لا الطلب. انظر النص البديل للصور.

الحفاظ على ترتيب العناوين

1. امنحوا الصفحة عنوانًا واحدًا من المستوى 1. تعرض معظم القوالب عنوان الصفحة كعنوان من المستوى 1، فلا تضيفوا ثانيًا في المنشئ. على DXPR CMS يمكنكم إخفاء ذلك العنوان على صفحة واحدة بدل ذلك: في نموذج تحريرها، افتحوا إعدادات قالب DXPR وحدّدوا عنوان الصفحة ضمن مناطق الإخفاء في DXPR.
2. في شريط أدوات عنصر النص، استخدموا قائمة العناوين لتمييز عناوين المقاطع كـ العنوان 2 والعناوين الفرعية كـ العنوان 3. ولا تتجاوزوا المستويات.
3. استخدموا أزرار القوائم في شريط الأدوات للقوائم بدل الشرطات المكتوبة.

تثبّت ثلاثة عناصر مستوى عنوانها. فـ العنوان في Jumbotron هو دائمًا العنوان 1، والعنوان في البطاقة هو دائمًا العنوان 5، وكل عنوان تبديل في لوحة طي هو عنوان من المستوى 2.

التحقق من تباين الألوان

تعرض منتقيات الألوان لوحة قالبكم لكنها لا تقيس التباين، فتحققوا منه بأنفسكم:

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

استخدام روابط وأزرار وصفية

يعرض عنصرا الزر والرابط النص الذي تكتبونه كنص الرابط. اكتبوا ما يفعله الرابط ("Register for Open Day") لا "click here". ويملك عنصر الرابط أيضًا سمة العنوان في لوحة تحسين محركات البحث الخاصة به لوصف أطول.

ما الذي ترونه

1. اضبطوا وضع العرض على شريط الحاوية إلى معاينة، فلا تعترض عناصر تحكم المحرّر طريقكم.
2. اضغطوا Tab للتنقل عبر الصفحة. فكل زر ورابط وتبويب قابل للوصول ويعرض حلقة تركيز مرئية.
3. يُعلن مدقق آلي، مثل تدقيق إمكانية الوصول في المتصفح أو إضافة axe، عدم وجود أخطاء لمحتوى المنشئ على الصفحة المنشورة.

إذا لم تروا تقريرًا نظيفًا

• يُبلغ المدقق عن صورة دون نص بديل. سمة Alt الخاصة بعنصر الصورة فارغة. املؤوها، أو انقلوا الصورة الزخرفية إلى خلفية مقطع.
• يُبلغ المدقق عن عنوانين من المستوى 1. العنوان في Jumbotron هو دائمًا العنوان 1، بجانب عنوان صفحة قالبكم. استخدموا عنصر نص مع عنوان من المستوى 2 بدل ذلك.
• يُبلغ المدقق عن مستوى عنوان متجاوَز. العنوان في البطاقة هو دائمًا العنوان 5. اتركوه فارغًا وابدؤوا البطاقة بعنوان عنصر نص بالمستوى الصحيح.
• يُبلغ المدقق عن تباين منخفض على نص فوق صورة. أضيفوا التدرج اللوني الموضح أعلاه، أو اختاروا خلفية نص أغمق.

ما الخطوة التالية؟

• اختصارات لوحة المفاتيح للقائمة الكاملة لاختصارات المحرّر.
• الجدار الناري وإقامة البيانات لمواضيع الامتثال الأخرى.