تصميم لدعم قارئ الشاشة
فيما يلي بعض الاعتبارات التي يجب أخذها في الاعتبار أثناء مرحلة التصميم:
المحتوى الذي يمكن تقديمه بطرق مختلفة دون فقدان المعلومات أو البنية
استخدم عناصر HTML الدلالية لضمان بنية منطقية. تساعد العناوين (<h1> إلى <h6>) في تحديد التسلسل الهرمي للمحتوى، والقوائم (<ul>، <و ol>، <و li>) التي تنظم العناصر، والجداول (<الجدول>، <tr>، <th>، <td>) تقدم البيانات بتنسيق منظم. تضمن إمكانية التكيف هذه إمكانية تنقل برامج قراءة الشاشة وتفسير المحتوى بفعالية.
التسمية المناسبة
يتضمن استخدام أسماء واضحة ووصفية للعناصر، مثل عناصر تحكم النماذج والأزرار والارتباطات. يساعد هذا برامج قراءة الشاشة على نقل الغرض من هذه العناصر إلى المستخدمين. على سبيل المثال، بدلا من تسمية زر "إرسال"، قد تستخدم "إرسال التطبيق" لتوفير المزيد من السياق.
تعيين الدور
يتضمن استخدام أدوار ARIA لتحديد الغرض من العناصر على صفحة ويب. تساعد أدوار ARIA، مثل الزر والارتباط ومربع الحوار والتنقل، برامج قراءة الشاشة على فهم وظيفة كل عنصر. على سبيل المثال، يضمن استخدام السمة role="button" على عنصر زر مخصص أن تتعرف عليه برامج قراءة الشاشة كزر. لاحظ أن هذه ليست مطلوبة لعلامات HTML الأصلية.
مسح آليات التنقل
مساعدة المستخدمين على فهم بنية ونواصر المقاطع المختلفة على صفحة ويب. يمكن تحقيق ذلك باستخدام عناصر HTML الدلالية، مثل <الرأس>والتنقل<>والعنوان< الرئيسي><والمقالة>والتذييل<>. توفر هذه العناصر معالم وسياقا واضحا، مما يسمح لقارئات الشاشة بالتنقل في المحتوى بشكل أكثر فعالية.
عناوين إعلامية حساسة للسياق
يعد توفير عناوين إعلامية حساسة للسياق لكل صفحة أمرا بالغ الأهمية لمساعدة المستخدمين على فهم محتوى الصفحة والغرض منها. يجب أن يحتوي عنصر العنوان< في قسم رأس HTML على عنوان موجز ووصفي يعكس بدقة محتوى الصفحة.><> على سبيل المثال، بدلا من استخدام عنوان عام مثل "الصفحة الرئيسية"، يمكنك استخدام "الصفحة الرئيسية - موارد إمكانية وصول ذوي الاحتياجات الخاصة".
تلميحات إضافية
- استخدم عناصر HTML المناسبة لنقل بنية المحتوى والغرض منه.
- تخطيط ترتيب تركيز منطقي وبديهي للتنقل في لوحة المفاتيح.
- توفير نص بديل ذي معنى للصور، مع وصف محتواها والغرض منها. تجنب استخدام صور النص واستخدم نصا حقيقيا بدلا من ذلك، باستثناء شعارات العلامة التجارية.
- استخدم أدوار ARIA وحالاته وخصائصه لنقل معلومات إضافية حول العناصر عند الحاجة.
- تصميم أنماط تنقل متناسقة ومواقع عناصر عبر الصفحات.
- تحديد الأخطاء في النماذج والعناصر التفاعلية الأخرى ووصفها بوضوح.
- خطط لإعلام برامج قراءة الشاشة بالتغييرات في المحتوى الديناميكي باستخدام مناطق ARIA المباشرة.
- تأكد من إمكانية الوصول إلى جميع الوظائف عبر لوحة المفاتيح دون الحاجة إلى الماوس.
- عند الحاجة إلى إدخال المستخدم، قم بتوفير إرشادات أو تسميات تصف تنسيقات الإدخال والبيانات المتوقعة الضرورية لمنع أخطاء التحقق من الصحة.
- تأكد من أن العناصر في تسلسل ذي معنى أو ترتيب قراءة.
- عرض محتوى الكائنات النصية وسمات النص ونص النص المعروض على الشاشة. في جداول البيانات، تأكد من عرض رؤوس الصفوف والأعمدة بشكل صحيح لقارئات الشاشة.