يُعد السماح لصفحاتك بالاستجابة لأحجام الشاشات المختلفة طريقة واحدة فقط للتأكد من إمكانية وصول أكبر عدد ممكن من الأشخاص إلى موقعك الإلكتروني. ننصحك بأخذ بعض هذه العوامل الأخرى في الاعتبار.
قصور في رؤية الألوان
يرى الأشخاص المختلفون اللون بشكل مختلف. بالنسبة للأشخاص الذين يعانون من عمى اللون الأحمر، لا يرون اللون الأحمر بلون مميز. في حال عمى اللون الأخضر، لا يظهر اللون الأخضر. بالنسبة إلى الأشخاص الذين يعانون من عمى اللون الأزرق، يكون لونه أزرق.
يمكن أن تمنحك بعض الأدوات فكرة عامة عن كيفية ظهور مخططات الألوان للأشخاص الذين لديهم أنواع مختلفة من رؤية الألوان.
تتضمن علامة التبويب "إمكانية الوصول" في Firefox قائمة منسدلة باسم محاكاة بقائمة من الخيارات.
في "أدوات مطوري البرامج في Chrome"، تسمح لك علامة تبويب العرض بمحاكاة القصور في الرؤية.
وهي أدوات خاصة بكل متصفح. من الممكن أيضًا محاكاة مختلف أنواع الرؤية على مستوى نظام التشغيل.
على نظام التشغيل Mac، انتقِل إلى:
- إعدادات النظام المفضّلة
- تسهيل الاستخدام
- الشبكة الإعلانية
- فلاتر الألوان
- تفعيل فلاتر الألوان
حدِّد أحد الخيارات.
بشكل عام، ليس من الجيد الاعتماد فقط على اللون للتمييز بين العناصر المختلفة. على سبيل المثال، يمكنك - بل يجب - جعل الروابط لديك بلون مختلف عن النص المحيط. ولكن يجب عليك أيضًا تطبيق بعض مؤشرات النمط الأخرى مثل تسطير الروابط أو جعلها غامقة.
a {
color: red;
}
a {
color: red;
font-weight: bold;
}
تباين الألوان
يمكن أن تسبب بعض مجموعات الألوان مشكلة. إذا لم يكن هناك تباين كافٍ بين لون المقدمة ولون الخلفية، فستصعب قراءة النص. يعد تباين الألوان السيئ من أكثر مشكلات الوصول شيوعًا على الويب، ولكن لحسن الحظ، يمكنك اكتشافه مبكرًا في عملية التصميم.
فيما يلي بعض الأدوات التي يمكنك استخدامها لاختبار نسبة تباين النص وألوان الخلفية:
- tota11y هو تطبيق مختصر يمكنك إضافته إلى شريط أدوات متصفحك.
- VisBug هي إضافة متصفح متاحة لجميع المتصفحات الرئيسية المتوافقة مع أجهزة سطح المكتب.
- يمكن أن يتحقق أداة فحص إمكانية الوصول في Firefox من وجود مشاكل في التباين المرئي.
- يمكنك أيضًا اكتشاف النص المنخفض التباين وإصلاحه من خلال "أدوات مطوري البرامج في Chrome".
- في متصفّح Microsoft Edge، يمكنك اختبار تباين ألوان النص باستخدام منتقي الألوان.
من الأفضل دائمًا تضمين color وbackground-color معًا في خدمة مقارنة الأسعار (CSS). ولا تفترض أن لون الخلفية سيكون لون الخلفية الافتراضي للمتصفح. يمكن للأشخاص تغيير الألوان المستخدمة في المتصفح.
body {
color: black;
}
body {
color: black;
background-color: white;
}
تبايُن عالٍ
يضبط بعض الأشخاص أنظمة التشغيل الخاصة بهم لاستخدام وضع التباين العالي. ويمكنك تجربة هذه الميزة على نظام التشغيل الذي تستخدمه.
على نظام التشغيل Mac، انتقِل إلى:
- إعدادات النظام المفضّلة
- تسهيل الاستخدام
- الشبكة الإعلانية
حدِّد خيار زيادة التباين.
هناك ميزة وسائط لاكتشاف ما إذا كان أحد الأشخاص قد فعّل وضع التباين العالي. يمكن البحث عن ميزة وسائط prefers-contrast لثلاث قيم: no-preference وless وmore. ويمكنك استخدام هذه المعلومات لضبط لوحة ألوان موقعك الإلكتروني.
يمكن للمستخدمين أيضًا ضبط تفضيل في نظام التشغيل لاستخدام الألوان المقلوبة.
على نظام التشغيل Mac، انتقِل إلى:
- إعدادات النظام المفضّلة
- تسهيل الاستخدام
- الشبكة الإعلانية
حدِّد خيار قلب الألوان.
تأكّد من أنّ موقعك الإلكتروني لا يزال مفهومًا بالنسبة إلى الأشخاص الذين يتصفّحون بألوان مقلوبة. انتبه من الظلال المربعة، فقد تحتاج إلى ضبط عند قلب الألوان.
حجم الخط
اللون ليس هو الشيء الوحيد الذي يمكن للأشخاص تعديله في المتصفح، ولكن يمكنهم أيضًا ضبط حجم الخط الافتراضي. ومع تداعيات الرؤية لديهم، قد يعدّلون حجم الخط الافتراضي في المتصفحات أو أنظمة التشغيل، وهو ما يمثل زيادة في الأرقام بمرور السنوات.
ويمكنك الاستجابة لهذه الإعدادات باستخدام أحجام خط نسبية. تجنَّب استخدام وحدات مثل px. استخدِم الوحدات النسبية مثل rem أو ch بدلاً من ذلك.
جرِّب تغيير الإعدادات التلقائية لحجم النص في المتصفّح. يمكنك إجراء ذلك في الإعدادات المفضّلة للمتصفح. أو يمكنك القيام بذلك أثناء زيارة صفحة ويب عن طريق التكبير. هل سيظل موقعك الإلكتروني يعمل في حال زيادة حجم الخط التلقائي بنسبة%200؟ ماذا عن 400٪؟
يجب أن يحصل أي شخص يزور موقعك على جهاز كمبيوتر مكتبي بحجم خطه الذي يصل إلى 400% على نفس التنسيق الذي يحصل عليه شخص يزور موقعك على جهاز شاشة صغيرة.
التنقّل باستخدام لوحة المفاتيح
لا يستخدم بعض الأشخاص الماوس أو لوحة اللمس للتنقل بين صفحات الويب. لوحة المفاتيح هي طريقة أخرى للتنقّل في الصفحة، ويكون المفتاح tab مفيدًا بشكل خاص. يمكن للمستخدمين الانتقال بسرعة من رابط أو حقل نموذج إلى التالي.
ستعرض الروابط ذات النمط :hover و:focus الفئتَين الزائفة، هذه الأنماط بغض النظر عمّا إذا كان الشخص يستخدم ماوس أو لوحة لمس أو لوحة مفاتيح. استخدِم :focus-visible الفئة الزائفة لتصميم الروابط بغرض التنقّل باستخدام لوحة المفاتيح فقط. يمكنك جعل هذه الأنماط بارزة أكثر.
a:focus,
a:hover {
outline: 1px dotted;
}
a:focus-visible {
outline: 3px solid;
}
أثناء علامات تبويب المستخدم من رابط إلى رابط أو حقل نموذج إلى حقل نموذج، سيتم تركيز هذه العناصر بالترتيب الذي تظهر به في بنية المستند. يجب أن يتطابق هذا أيضًا مع الترتيب المرئي.
تعامَل بحذر مع سمة order في CSS. يمكنك استخدام هذا مع flexbox والشبكة لوضع العناصر بترتيب مرئي مختلف عن ترتيبها في HTML. وهذه ميزة قوية ولكنها قد تُربك الأشخاص الذين يتنقّلون باستخدام لوحة مفاتيح.
اختبِر صفحات الويب باستخدام مفتاح tab على لوحة المفاتيح للتأكد من أن الترتيب المرتبط بعلامات جدولة منطقي.
في لوحة إمكانية الوصول في أدوات المطوّرين في متصفح Firefox، هناك خيار عرض ترتيب التنقل بـ Tab. سيؤدي تفعيل ذلك إلى تركيب الأرقام على كل عنصر يمكن التركيز عليه.
حركة منخفضة
الرسوم المتحركة والحركة من الطرق الرائعة لإضفاء الحيوية على تصميمات الويب. لكن بالنسبة لبعض الأشخاص، يمكن أن تكون هذه الحركات مربكة للغاية وحتى تسبب الغثيان.
هناك استعلام عن ميزة يوضح ما إذا كان المستخدم يفضل حركة أقل. يُطلق عليها اسم prefers-reduced-motion. يمكنك إدراجه أينما استخدمت عمليات النقل أو الصور المتحركة في CSS.
a:hover {
transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
}
إنّ الاستعلام عن وسائط prefers-reduced-motion مخصّص للحركة على الشاشة. إذا كنت تستخدم انتقالات على لون عنصر ما يجب ألا يتأثر بـ prefers-reduced-motion. يمكن أيضًا نقل التعتيم والتلاشي المتقاطع. لا يجب أن تعني الحركة المنخفضة عدم وجود رسوم متحركة.
الصوت
يختبر الأشخاص الويب بشكل مختلف. لا يظهر موقعك الإلكتروني على الشاشة لجميع الأشخاص. تعمل التكنولوجيا المساعِدة، مثل برامج قراءة الشاشة، على تحويل مخرجات المعلومات إلى شاشة إلى كلمات منطوقة.
تعمل برامج قراءة الشاشة مع جميع أنواع التطبيقات، بما في ذلك متصفحات الويب. لكي يتواصل متصفح الويب بشكل مفيد مع قارئ الشاشة، يجب أن تكون هناك معلومات دلالية مفيدة في صفحة الويب التي يتم الوصول إليها حاليًا.
لقد تعلّمت سابقًا كيف يجب أن تتضمّن الأزرار فقط للرموز سمة لتحديد الغرض من الزر للمستخدمين غير المبصرين. هذا مجرد مثال واحد على أهمية ترميز HTML التأسيسي القوي.
العناوين
استخدام عناوين مثل <h1> و<h2> و<h3> وما إلى ذلك بشكل معقول تستخدم برامج قراءة الشاشة هذه العناوين لإنشاء مخطط للمستند الذي يمكن التنقل فيه باستخدام اختصارات لوحة المفاتيح.
<div class="heading-main">Welcome to my page</div> <div class="heading-secondary">About me</div> <div class="heading-tertiary">My childhood</div> <div class="heading-secondary">About this website</div> <div class="heading-tertiary">How this site was built</div>
<h1>Welcome to my page</h1>
<h2>About me</h2>
<h3>My childhood</h3>
<h2>About this website</h2>
<h3>How this site was built</h3>
البنية
يمكنك استخدام عناصر المعالم، مثل <main> و<nav> و<aside> و<header> و<footer>، لتنظيم محتوى صفحتك. ويمكن لمستخدمي قارئ الشاشة بعد ذلك الانتقال مباشرةً إلى هذه المعالم.
<div class="header">...</div> <div class="navigation">...</div> <div class="maincontent">...</div> <div class="sidebar">...</div> <div class="footer">...</div>
<header>...</header> <nav>...</nav> <main>...</main> <aside>...</aside> <footer>...</footer>
النماذج
تأكَّد من أنّ كل حقل في النموذج يتضمّن عنصر <label> مرتبطًا. يمكنك ربط تصنيف بحقل نموذج باستخدام السمة for في العنصر <label> والسمة id المقابلة في حقل النموذج.
<span class="formlabel">Your name</span> <input type="text">
<label for="name">Your name</label> <input id="name" type="text">
الصور
قدِّم دائمًا وصفًا نصيًا للصور باستخدام السمة alt.
<img src="dog.jpg">
<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">
إذا كانت الصورة عبارة عن تمثيلية فقط، يجب تضمين السمة alt، ولكن يمكنك إضافة قيمة فارغة لها.
<img src="texture.png">
<img src="texture.png" alt="">
نشر "جيك أرشيبالد" مقالة حول كتابة نص alt رائع.
الروابط
حاوِل إدخال نص وصفي ضمن الروابط. وتجنَّب استخدام عبارات مثل "انقر هنا" أو "المزيد".
<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>
<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>
ARIA
سيؤدي استخدام ترميز HTML دلالي معقول إلى تسهيل الوصول إلى صفحات الويب من خلال التكنولوجيا المساعِدة مثل برامج قراءة الشاشة وكذلك للمخرجات الصوتية الأخرى مثل المساعدات الصوتية.
بعض أدوات الواجهة التي لا تحتوي على عنصر HTML مقابل: العروض الدوارة وعلامات التبويب والأكورديون وما إلى ذلك. ويجب إنشاء تلك الأدوات من نقطة الصفر باستخدام مزيج من HTML وCSS وJavaScript وARIA.
الاختصار ARIA يعني تطبيقات الإنترنت التفاعلية السهلة الوصول. وتتيح لك مفرداتها توفير معلومات دلالية عندما لا يتوفر عنصر HTML مناسب.
في حال كنت بحاجة إلى إنشاء عناصر واجهة غير متاحة بعد كعناصر HTML، تعرّف على ARIA.
كلما زادت الوظائف المخصصة التي تضيفها باستخدام JavaScript، زادت حاجتك إلى فهم ARIA. في حال الالتزام بعناصر HTML الأصلية، قد لا تحتاج إلى استخدام أي ARIA.
إذا كان ذلك ممكنًا على الإطلاق، فاختبر مع مستخدمين حقيقيين لبرامج قراءة الشاشة. لن يمنحك هذا فقط فهمًا أفضل لكيفية تنقلهم على الويب، ولكنه سيزيل أيضًا التخمين من التصميم مع وضع إمكانية الوصول في الاعتبار.
يعد الاختبار مع أشخاص حقيقيين طريقة رائعة لكشف أي افتراضات قد تصنعها. في الوحدة التالية، ستتعرف على الطرق المختلفة التي يتفاعل بها الأشخاص مع مواقع الويب لديك - وهي مجال آخر يسهل فيه وضع افتراضات.
التحقّق من استيعابك
اختبر معلوماتك حول إمكانية الوصول
باستخدام CSS، يمكن للمطور استبدال تفضيل المستخدم مثل حجم الخط، للأسوأ؟
body { font-size: 12px; }.لتجنب استبدال تفضيل حجم الخط للمستخدم، استخدم؟
px.rem.يستخدم الجميع في العالم الماوس.
ما الغرض من استخدام صورة تحتوي على سمة نص بديل فارغة؟