بالنصوص البديلة والعناوين والتباين الجيد وعناوين الروابط الواضحة تجعل صفحتك متاحة للجميع، بمن فيهم مستخدمو قارئ الشاشة.
الصفحة سهلة الوصول يستطيع الجميع استخدامها: من يستخدم قارئ الشاشة، ومن بصره ضعيف، ومن يتجنب الحركة على الشاشة، أو ببساطة من ينظر إلى هاتفه في الشمس. يتولى LinkHarbor كثيرًا من ذلك تلقائيًا، وبعض الأمور متروكة لك. تعرض هذه المقالة ما يجب الانتباه إليه.
ما يفعله LinkHarbor تلقائيًا
- إذا فعّل الزائر إعداد تقليل الحركة في نظامه، لا تُشغَّل فيديوهات الخلفية، وتُوقف تأثيرات التمرير والمنظور (parallax) وحركات التمرير بالمؤشر
- تُخرج كتلة «عنوان» كعنوان حقيقي يستخدمه قارئ الشاشة للتنقل
- تحصل الصور من كتلتي «صورة» و«معرض الصور» على نصك البديل كوصف لها
- إذا لم تختر لونًا خاصًا لنص الأزرار، يختار LinkHarbor لونًا يناسب لون الزر
النصوص البديلة للصور
يصف النص البديل ما يظهر في الصورة. يقرؤه قارئ الشاشة بصوت عالٍ، ويظهر عندما لا تُحمَّل الصورة.
- كتلة «صورة»
- حقل «النص البديل» في محرر الكتلة.
- كتلة «معرض الصور»
- «النص البديل» حتى 200 حرف لكل صورة.
- صِف المحتوى لا الملف: «كابتشينو برسم لاتيه على طاولة خشبية» بدلًا من «IMG_2041»
- في الصور التي تحتوي على نص، يوضع النص في النص البديل
- اجعله قصيرًا، فجملة واحدة تكفي عادة
أين تجد الحقول مشروح في الكتل المجانية بالتفصيل وكتل المحتوى.
البنية بالعناوين
قسّم الصفحات الطويلة بكتلة «عنوان» بدلًا من النص الكبير. ينتقل مستخدمو قارئ الشاشة من عنوان إلى عنوان فيجدون بسرعة ما يبحثون عنه، مثل «ساعات العمل» أو «جهة اتصال».
عناوين روابط واضحة
- يجب أن يكون لكل رابط معنى بمفرده: «قائمة الطعام بصيغة PDF» بدلًا من «انقر هنا»
- تجنّب العناوين المتطابقة لأهداف مختلفة
- الرموز التعبيرية في بداية العنوان تُقرأ بصوت عالٍ؛ استخدمها باعتدال
المزيد عن الروابط في إضافة الروابط وتنسيقها.
التباين وسهولة القراءة
- احرص على تباين كافٍ بين النص والخلفية، خاصة مع ألوان الباستيل الفاتحة
- إذا كان النص فوق صورة أو فيديو خلفية، فاستخدم «شفافية الطبقة» في المظهر ليبقى مقروءًا
- لا نص مهمًا داخل صورة فقط، فزوّار قارئ الشاشة لا يستطيعون قراءته
- اختر خطًا سهل القراءة وحجم خط غير صغير جدًا لكتل النص
تضبط الألوان والخلفية والخط في المظهر، انظر التصميم.
استخدم CSS المخصص بحذر
بـ CSS المخصص يمكنك تغيير كل شيء تقريبًا، بما في ذلك أمور مهمة لإمكانية الوصول. لا تُخفِ إطارات التركيز، ولا تصغّر النص كثيرًا، وبعد التغييرات اختبر الصفحة بلوحة المفاتيح أيضًا. انظر CSS المخصص.
اختبرها بنفسك
- شغّل قارئ الشاشة على هاتفك (VoiceOver على iPhone، وTalkBack على Android) واستمع إلى صفحتك
- كبّر حجم النص في إعدادات النظام وتحقّق من أن كل شيء يبقى مقروءًا
- انظر إلى الصفحة في ضوء ساطع وفي الوضع الداكن
قد يفيدك أيضًا
لم تجد ما تبحث عنه؟
أخبرنا بما تحتاج إليه، وسيساعدك فريق الدعم لدينا شخصيًا.