يُعد تصميم تطبيقات الويب الذي يمكن الوصول إليه مكونًا رئيسيًا لتوفير تجربة مستخدم إيجابية ورضا مستخدم التطبيق بشكل عام. يضمن تطبيق الويب الذي يمكن الوصول إليه الوصول المتساوي إلى الأشخاص ذوي القدرات المتنوعة والأشخاص عبر المواقع الجغرافية المختلفة. يُفترض أن يتمكن الأشخاص من الوصول إلى تطبيق الويب إذا كانوا يعانون من قيود متعلقة بقدراتهم السمعية أو الإدراكية أو الكلامية أو البصرية، بالإضافة إلى القيود المؤقتة المتعلقة بالإعاقات القصيرة المدى أو بطء الاتصال بالإنترنت أو حتى أشعة الشمس الساطعة. عند إنشاء الواجهة الأمامية لتطبيق الويب، استخدِم حلول إمكانية الوصول من البداية لمنع مشاكل إمكانية الوصول والحاجة إلى إعادة أي عمل لاحقًا أثناء عملية الإنشاء. تأكَّد من إمكانية اجتياز برامج زحف الويب وبرامج قراءة الشاشة لمحتوى التطبيق مع توفير تجربة إيجابية للمستخدمين.
تُعد إمكانية الوصول التزامًا قانونيًا في العديد من البلدان والمجالات، لذا يجب عليك فهم هذه الإرشادات ودمج حلول إمكانية الوصول في تصميم الواجهة الأمامية. تسلط العديد من حالات العمل الضوء على أهمية إمكانية الوصول إلى محتوى الويب أيضًا.
توفر الموارد مثل MDN وWCAG إرشادات واقتراحات أساسية لزيادة إمكانية الوصول إلى تطبيق الويب. يمكنك أيضًا المشاركة في الدورة التدريبية التعرف على إمكانية الوصول على web.dev.
يعد الاعتماد المتبادل بين المكونات المختلفة جانبًا أساسيًا لجعل تطبيق الويب في متناول مستخدمين متنوعين.
اللون والتباين
يعد استخدام الألوان عاملاً أساسيًا في تقييم إمكانية الوصول إلى تطبيق الويب. يجب أن يكون مستخدمو الواجهة الأمامية قادرين على إدراك المحتوى الموجود على الصفحة، ويؤثر اللون والتباين بشكل كبير على تصور المستخدمين للمحتوى. قد يكون عرض الحالات والإعاقات المتعلقة بالبصر مؤقتًا أو ظرفية أو دائمة، ولكن يجب مراعاتها عند إنشاء الواجهة الأمامية لتطبيق الويب الخاص بك. يمكن أن يؤدي إنشاء التباين أو الاختلاف في السطوع بين الألوان المستخدمة في الواجهة الموجهة للمستخدم إلى جعل تطبيق الويب أكثر سهولة من قبل مستخدمين متنوعين. توفر نسبة التباين الفرق في السطوع بين الخلفية والنص.
لقياس التباين، يمكنك استخدام معادلة نسبة التباين للتأكد من وجود الحد الأدنى من التباين للنص أو الرموز على الخلفية. هناك العديد من أشكال إعاقات إدراك الألوان التي يجب مراعاتها، ولكن يمكن لنماذج الألوان الجديدة أن تضمن رؤية المحتوى بشكل صحيح حتى إذا تم عرضه بالتدرج الرمادي.
غالبًا ما ننصح باستخدام مظهر داكن لدعم اللون والتباين في سهولة الوصول. غالبًا ما تُفضل المظاهر الداكنة للإدخال المرئي بسبب الإضاءة البيضاء وصعوبات القراءة. نظرًا لأن التطبيقات التي تعتمد على المحتوى تتضمن قدرًا كبيرًا من النصوص والصور، فمن الأهمية بمكان استخدام اللون ونسبة التباين بحكمة لتلبية الاحتياجات المتنوعة للمستخدمين.
مزيد من المعلومات حول اللون والتباين على web.dev
فن الطباعة
يشير أسلوب الخط إلى اختيار النص وترتيبه بحيث يكون سهل القراءة ومقروء للمستخدمين المختلفين. يعد حجم الخط الافتراضي على الأجهزة أحد أكثر إعدادات إمكانية الوصول التي تم تغييرها قد يرغب بعض المستخدمين في احتواء المزيد من النص على الشاشة بحجم خط أصغر أو جعل النص كبيرًا قدر الإمكان لذلك، من المهم جدًا جعل حجم أسلوب الخط مرنًا ومقروءًا. يجب أيضًا أن تكون الأحرف النصية الفردية مميّزة للقارئ، كما يجب أن يكون النص العام سهل القراءة. أثناء تصميم الواجهة الأمامية لتطبيقك، تأكد من تحديد الخطوط الطباعية التي تتضمن كلاً من الوضوح وسهولة القراءة.
الخط
يجب أن يكون الخط الطباعي، أو مجموعة الخطوط، التي تختارها لتطبيق الويب الخاص بك، سهل الوصول مرئيًا من قبل مجموعة واسعة من القراء. الخط الطباعي هو التصميم المرئي للأحرف المستخدمة في نص تطبيقك. تصف العديد من الدراسات أهمية الخطوط عند تقييم إمكانية الوصول إلى محتوى الويب. إن تحقيق التوازن بين العلامة التجارية وأهداف تصميم واجهة المستخدم وسهولة القراءة يجعل تطبيقك أكثر إمتاعًا لمجموعة أكبر من المستخدمين. عند إنشاء الواجهة الأمامية، فكر في كيفية مساهمة خيارات الخطوط الطباعية وخيارات الخط داخلها في سهولة الوصول والتصميم العام لتطبيقك.
حجم الخط
ضع في اعتبارك السماح بالتكبير/التصغير في المتصفح لمساعدة المستخدمين الذين يعانون من ضعف البصر أو
الإعاقات في إدراك الألوان. يجب أن يكون خط النص على تطبيق الويب
مرئيًا للقراء المتنوعة. يمكن تغيير حجم الخط من خلال
التبديل من px إلى rem. تسمح وحدات Rem بحجم خط مرتبط
بعنصر الجذر لتطبيق Wep. هذا خيار متنوع من شأنه أن يزيد
من الوصول العام لتطبيق الويب الخاص بك.
البنية والتخطيط
تؤثر خصائص الهيكلية والتخطيط المختلفة في إمكانية الوصول إلى واجهتك. تتضمن ميزات التخطيط التي يجب مراعاتها تباعد كتل النص والمحاذاة بالإضافة إلى المسافة بين سطور النص وحتى الأحرف الفردية. استخدم الشبكات وتصور المكونات التي ترغب في تضمينها في تصميمك. ينبغي أن يكون تخطيط المحتوى وهيكله جذابًا وممتعًا للمستخدمين. وقد يكون من الصعب على بعض المستخدمين، مثل أولئك الذين يعانون من ADHD، استخدام التنسيقات المعقدة أو الخلفيات المزدحمة التي تحتوي على قوالب نصية متعددة. تأكد من إعطاء الأولوية للشمولية أثناء عملية تصميم الواجهة الأمامية.
ARIA وHTML
تشتمل تطبيقات الإنترنت الغنية بصريًا (ARIA) التي يمكن الوصول إليها على مجموعة من الإرشادات والسمات للمساعدة في تسهيل وصول المستخدمين إلى تطبيقات الويب. يُكمِّل ARIA محتوى HTML ويتيح أدوات JavaScript التي يمكن الوصول إليها وتحديثات المحتوى المباشر ورسائل الخطأ وغيرها. يعد الاستخدام الصحيح لـ ARIA أمرًا ضروريًا لجعل تطبيق الويب الخاص بك أكثر سهولة حقًا. يمكن أن يؤدي الاستخدام غير الصحيح لـ ARIA إلى حدوث أخطاء وجعل تطبيقك أقل سهولة في الوصول للمستخدمين.
استخدِم تصنيفات ARIA متى أمكن لتقديم تنسيقات بديلة متوافقة مع لغة برايل وتحويل النص إلى كلام (TTS). تتيح لك أدوار وتسميات ARIA تغيير شجرة إمكانية
الوصول عندما تختلف عن شجرة الدوم. هذه التصنيفات مهمة أيضًا عند استخدام علامات غير عادية، مثل علامة div التي يتم استخدامها كزر قابل للنقر. تكون ARIA مطلوبة عندما لا يتم دعم إمكانية الوصول في عنصر HTML. عند تصميم تطبيقك المستند إلى المحتوى، تأكد من أن برامج قراءة الشاشة والأجهزة المساعِدة الأخرى متوافقة بشكل جيد لمساعدة تطبيقك في الوصول إلى أكبر عدد ممكن من المستخدمين.
يمكنك الاطّلاع على مزيد من المعلومات حول ARIA وHTML على web.dev.
التوافق مع أسواق عالمية
يشير التدويل إلى تصميم تطبيق ويب ليكون في متناول المستخدمين من خلفيات لغوية وثقافية مختلفة. يجب أن يكون تطبيق الويب قابلاً للتكيّف مع مختلف اللغات والمناطق الجغرافية والتفضيلات الثقافية بدون إجراء تغييرات جوهرية على الرموز. وتشمل العناصر الرئيسية لترجمة الأخبار إتاحة تعدد اللغات والأقلمة وفصل المحتوى وتنسيق التاريخ والوقت واتجاه النص والتفاوض بشأن اللغة، وغير ذلك.
من خلال تدويل تطبيق الويب الخاص بك، يمكنك إنشاء تجربة شاملة وسهلة الاستخدام لجمهور عالمي واسع. فالتدويل هو أمر ضروري لأي تطبيق ويب له قاعدة مستخدمين متنوعة أو هدفه توسع دولي.
الخصائص المنطقية
عند إنشاء أنماط في CSS، احرص على استخدام start / end بدلاً من سمات مثل top / down/ left/ right. يضمن ذلك تغيُّر القوائم وتنسيقات المواقع الإلكترونية وفقًا للّغات التي تُكتب من اليمين إلى اليسار.
المحتوى البديل
ضمِّن السمة lang في علامة HTML مع روابط إلى مستندات بديلة في العنوان لتوفير ترميز مخصّص للمحتوى الخاص بك. يتيح ذلك للمتصفح اختيار الصفحة الصحيحة
إذا كانت اللغة المحددة مختلفة عن لغة المتصفّح التلقائية. ويمكن أن تساعد هذه الميزة متصفحات الويب ومحركات البحث في فهم لغة الصفحة، ما يُعدّ مهمًا لعرض المحتوى بشكل صحيح وتحسين محركات البحث بفعالية.
مباريات كرة القدم الأمريكية
يُعدّ الكائن Intl
في JavaScript أداة مهمة لإنشاء تطبيقات ويب متعددة اللغات
وتكون على دراية ثقافية. وهي توفر إمكانات التدويل والأقلمة في تطبيقات الويب، وتضمن أن تكون الواجهة والمحتوى مفهومَين وملائمَين ثقافيًا للمستخدمين حول العالم. تتضمن الميزات التي يوفرها كائن Intl تنسيق التاريخ والوقت وتنسيق الأرقام وتجميع السلسلة.
مزيد من المعلومات حول التدويل على web.dev
النماذج
نماذج HTML هي جزء مهم من تطبيقات الويب التي تعتمد على المحتوى. إنها تمكن تفاعل المستخدم وتوفر طريقة منظمة لجمع معلومات المستخدم. إذا تعذّر على جمهور كبير الوصول إلى نماذج HTML، قد يصاب المستخدمون بالإحباط وعدم رضاهم.
لإتاحة الوصول إلى نماذج HTML، استخدِم عناصر HTML الدلالية لجميع حقول النماذج. يساعد هذا التقنيات المساعدة على فهم الغرض من كل حقل ويسهل على المستخدمين إكمالها. تأكد أيضًا من تسمية جميع حقول النموذج بوضوح. يساعد هذا المستخدمين على تقديم معلومات دقيقة ومفيدة. من المهم أيضًا اختبار إمكانية الوصول إلى نماذج HTML، ويمكن إجراء ذلك باستخدام تكنولوجيات مساعدة لمحاكاة تجربة المستخدم الذي يحتاج إلى هذه التكنولوجيات للاطّلاع على محتوى التطبيق.