إمكانية الدخول

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

قصور في رؤية الألوان

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

يمكن أن تمنحك بعض الأدوات فكرة عامة عن كيفية ظهور أنظمة الألوان للأشخاص الذين يعانون من أنواع مختلفة من مشاكل رؤية الألوان.

تتضمّن علامة التبويب "إمكانية الوصول" في Firefox قائمة منسدلة تحمل اسم محاكاة مع قائمة بالخيارات.

في "أدوات مطوّري البرامج في Chrome"، تتيح لك علامة التبويب "العرض" محاكاة قصور الرؤية.

هذه أدوات خاصة بالمتصفّح. يمكن أيضًا محاكاة أنواع مختلفة من مشاكل الرؤية على مستوى نظام التشغيل.

على جهاز Mac، انتقِل إلى:

1. الإعدادات المفضّلة للنظام
2. تسهيل الاستخدام
3. الشبكة الإعلانية
4. فلاتر الألوان
5. تفعيل "فلاتر الألوان"

حدِّد أحد الخيارات.

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

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

تباين الألوان

يمكن أن تسبب بعض مجموعات الألوان مشاكل. إذا لم يكن هناك تباين كافٍ بين لون المقدّمة ولون الخلفية، سيصعب قراءة النص. يُعدّ تباين الألوان الضعيف من أكثر مشاكل تسهيل الاستخدام شيوعًا على الويب، ولكن لحسن الحظ، يمكنك رصدها في وقت مبكر من عملية التصميم.

في ما يلي بعض الأدوات التي يمكنك استخدامها لاختبار نسبة التباين بين ألوان النص والخلفية:

• VisBug هي إضافة متصفّح متاحة لجميع متصفّحات أجهزة الكمبيوتر المكتبية الرئيسية.
• يمكن لأداة Accessibility Inspector في Firefox التحقّق من المشاكل المتعلّقة بالتباين المرئي.
• يمكنك أيضًا اكتشاف النص المنخفض التباين وحلّ المشاكل المتعلّقة به باستخدام "أدوات مطوّري البرامج في Chrome".
• في متصفّح Edge من Microsoft، يمكنك اختبار تباين لون النص باستخدام أداة اختيار الألوان.

من المستحسن دائمًا تعريف color وbackground-color معًا في ملف CSS. لا تفترض أنّ لون الخلفية سيكون هو اللون التلقائي للمتصفّح. يمكن للمستخدمين تغيير الألوان التي يستخدمها المتصفّح، وهذا ما يفعله البعض.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

تباين عالٍ

يضبط بعض الأشخاص أنظمة التشغيل على استخدام وضع التباين العالي. يمكنك تجربة ذلك على نظام التشغيل.

على جهاز Mac، انتقِل إلى:

1. الإعدادات المفضّلة للنظام
2. تسهيل الاستخدام
3. الشبكة الإعلانية

اختَر خيار زيادة التباين.

تتوفّر ميزة وسائط للتحقّق مما إذا كان المستخدم قد فعّل وضع التباين العالي. يمكن طلب البحث عن ثلاث قيم في ميزة الوسائط prefers-contrast، وهي: no-preference وless وmore. يمكنك استخدام هذه المعلومات لتعديل لوحة الألوان في موقعك الإلكتروني.

يمكن للمستخدمين أيضًا ضبط إعدادات مفضّلة في نظام التشغيل لاستخدام الألوان المعكوسة.

على جهاز Mac، انتقِل إلى:

1. الإعدادات المفضّلة للنظام
2. تسهيل الاستخدام
3. الشبكة الإعلانية

اختَر خيار عكس الألوان.

تأكَّد من أنّ موقعك الإلكتروني لا يزال مناسبًا للمستخدمين الذين يتصفّحون بألوان مقلوبة. انتبه إلى ظلال المربّعات، فقد تحتاج إلى تعديلها عند عكس الألوان.

حجم الخط

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

يمكنك الاستجابة لهذه الإعدادات باستخدام أحجام خط نسبية. تجنَّب استخدام وحدات مثل px. استخدِم وحدات نسبية مثل rem أو ch بدلاً من ذلك.

جرِّب تغيير إعداد حجم النص التلقائي في المتصفّح. يمكنك إجراء ذلك في إعدادات المتصفّح المفضّلة. أو يمكنك إجراء ذلك أثناء تصفّح صفحة ويب من خلال التكبير. هل يظل موقعك الإلكتروني يعمل إذا تمت زيادة حجم الخط التلقائي بنسبة%200؟ ماذا عن ‎400%؟

يجب أن يحصل المستخدم الذي يزور موقعك الإلكتروني على جهاز كمبيوتر مكتبي مع زيادة حجم الخط إلى% 400 على التصميم نفسه الذي يحصل عليه المستخدم الذي يزور موقعك الإلكتروني على جهاز بشاشة صغيرة.

التنقّل باستخدام لوحة المفاتيح

لا يستخدم الجميع ماوسًا أو لوحة لمس للتنقّل في صفحات الويب. تُعدّ لوحة المفاتيح طريقة أخرى للتنقّل في الصفحة، ويكون المفتاح tab مفيدًا بشكل خاص. يمكن للمستخدمين الانتقال بسرعة من رابط أو حقل نموذج إلى التالي.

ستعرض الروابط التي تم تصميمها باستخدام :hover و:focus الفئات الزائفة هذه التصاميم بغض النظر عمّا إذا كان المستخدم يستعمل الماوس أو لوحة اللمس أو لوحة المفاتيح. استخدِم :focus-visible فئة زائفة لتحديد نمط الروابط عند التنقّل باستخدام لوحة المفاتيح فقط. يمكنك جعل هذه الأنماط أكثر وضوحًا.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

عندما ينتقل المستخدم من رابط إلى آخر أو من حقل نموذج إلى آخر باستخدام مفتاح Tab، سيتم التركيز على هذه العناصر بالترتيب الذي تظهر به في بنية المستند. يجب أن يتطابق هذا الترتيب أيضًا مع الترتيب المرئي.

يجب توخّي الحذر عند استخدام السمة order في CSS. يمكنك استخدام هذه السمة مع flexbox وgrid لوضع العناصر بترتيب مرئي مختلف عن ترتيبها في HTML. هذه ميزة فعّالة، ولكنّها قد تربك المستخدمين الذين يتنقّلون باستخدام لوحة المفاتيح.

اختبِر صفحات الويب باستخدام المفتاح tab على لوحة المفاتيح للتأكّد من أنّ ترتيب الانتقال بين العناصر باستخدام مفتاح 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 إلى Accessible Rich Internet Applications (تطبيقات الإنترنت التفاعلية التي تسهّل الاستخدام). تتيح لك مفرداتها تقديم معلومات دلالية عندما لا يتوفّر عنصر HTML مناسب.

إذا كنت بحاجة إلى إنشاء عناصر واجهة غير متوفّرة بعد كعناصر HTML، تعرَّف على ARIA.

كلما أضفت وظائف مخصّصة باستخدام JavaScript، زادت حاجتك إلى فهم ARIA. إذا التزمت بعناصر HTML العادية، قد لا تحتاج إلى أي ARIA.

إذا كان ذلك ممكنًا، اختبِر الموقع الإلكتروني مع مستخدمين حقيقيين لبرامج قراءة الشاشة. لن يساعدك ذلك في فهم طريقة تنقّلهم على الويب بشكل أفضل فحسب، بل سيساعدك أيضًا في تصميم مواقع ويب تراعي إمكانية الوصول بدون الحاجة إلى التخمين.

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

اختبِر معلوماتكَ

اختبِر معلوماتك حول تسهيل الاستخدام