قائمة التحقق من إمكانية الوصول للمحتوى

النطاق: محتوى فقط (لا يشمل التصميم أو التطوير)

١. عناوين الصفحات والعناوين الهيكلية

✅ تحتوي كل صفحة على عنوان فريد وذو معنى (باستخدام وسم <title>).
✅ استخدام عنوان واحد <h1> في كل صفحة يمثل الموضوع الرئيسي.
✅ يتم استخدام مستويات العناوين بشكل هرمي.
✅ العناوين تصف المحتوى الذي يليها بدقة.

٢. النصوص

✅ استخدام الفقرات للنصوص الطويلة، وليس للعناوين أو القوائم.
✅ الجمل واضحة ومباشرة وسهلة القراءة.
✅ تجنب استخدام الأحرف الكبيرة بالكامل ما لم تكن ضرورية.

٣. القوائم

✅ استخدام عناصر <ul> أو <ol> للقوائم بدلاً من كتابة رموز يدوياً.
✅ كل عنصر قائمة يستخدم <li>.

٤. النص البديل للصور

✅ لكل صورة معلوماتية نص بديل واضح باستخدام خاصية alt.
✅ الصور الزخرفية تحتوي على alt="" فارغ.
✅ تجنب الصور التي تحتوي على نص مكتوب داخلها إلا إذا كانت ضرورية.

٥. الجداول

✅ يتم استخدام الجداول للبيانات فقط، وليس لأغراض التنسيق.
✅ استخدام <th> للعناوين وربطها بـ <td>.
✅ استخدام <caption> عند الحاجة لتوضيح محتوى الجدول.

٦. الروابط

✅ نص الرابط يصف وجهته بدقة (مثل: "عرض التقرير" بدلاً من "اضغط هنا").
✅ تجنب تكرار نصوص الروابط ما لم تشير إلى نفس الوجهة.
✅ إذا كانت الصورة رابطًا، يجب أن يوضح alt وظيفة الرابط.

٧. الأزرار

✅ كل زر يحتوي على نص مرئي وواضح (مثل "إرسال").
✅ لا تعتمد الأزرار فقط على الأيقونات.

٨. حقول النماذج

✅ لكل حقل إدخال تسمية مرئية ومرتبطة به برمجيًا باستخدام .
✅ الحقول المطلوبة موضحة بكلمة "إلزامي" وليس فقط لون أو علامة.
✅ التعليمات توضع فوق أو بجانب الحقل.

٩. أزرار الاختيار ومربعات الاختيار

✅ للمجموعات تسمية تصف هدفها مثل العنوان أو باستخدام <legend>.
✅ كل خيار له تسمية مرئية مرتبطة به.

١٠. القوائم المنسدلة

✅ يحتوي كل عنصر
✅ اربط عنصر بحقل
✅ تتضمن القائمة خيارًا افتراضيًا مثل "اختر من القائمة".

١١. المحتوى القابل للتوسيع والطي

✅ كل قسم له عنوان واضح.
✅ يتم الإعلان عن حالة التوسيع/الطي باستخدام aria-expanded.
✅ لا يتم إخفاء المحتوى الهام دون وسيلة للوصول إليه.

١٢. إعادة تدفق المحتوى على الشاشات الصغيرة

✅ يجب أن يكون المحتوى قابلاً للعرض دون تمرير أفقي عند عرض بعرض ٣٢٠ بكسل.
✅ لا يتم إخفاء المحتوى الأساسي خلف نوافذ منبثقة أو أقسام مطوية بشكل افتراضي.
✅ تبقى العناوين والفقرات منسقة بشكل منطقي على كل حجم شاشة.