تتضمن مطالب تصميم الويب بشكل متزايد إمكانية الوصول إلى الويب المحسنة. لكن ألا يكفي تحسين الموقع لجميع المتصفحات الرئيسية التي تتوافق مع أجهزة متعددة؟ يمكنك بسهولة قياس أداء موقع الويب الخاص بك وإمكانية الوصول وأفضل الممارسات وتحسين محركات البحث باستخدام Google Lighthouse. فلماذا الوصول مهم؟

وفقًا لـ CDC (مراكز السيطرة على الأمراض والوقاية منها) ، يعيش أكثر من 60 مليون أمريكي من ذوي الإعاقة. باتباع إرشادات الوصول إلى محتوى الويب ، يمكنك تقديم بعض الاعتبارات الأولية التي ستساهم في إنشاء موقع ويب يمكن الوصول إليه. إليك كل ما تحتاجه للبدء في الوصول إلى الويب باستخدام HTML و CSS.

HTML منظم مع دلالات مناسبة

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

على سبيل المثال ، أ

قراءة المزيد: أمثلة بسيطة لرموز HTML يمكنك تعلمها في 10 دقائق

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

أو علامة ، فهو يساعد في تحسين محركات البحث.

المحتوى المنظم لمستخدمي قارئ الشاشة

في ما يلي مثال على HTML الدلالي good مقابل سيء.

لغة HTML الدلالية جيدة
رأسي

إليك كيفية إنشاء موقع ويب يمكن الوصول إليه باستخدام HTML و CSS

رأسي الثاني

لغة HTML الدلالية سيئة
رأسي

إليك كيفية إنشاء موقع ويب يمكن الوصول إليه باستخدام HTML و CSS

الحالة الأولى سهلة التنقل لقارئات الشاشة. سيقرأ رأس الإخطار بالعنوان والفقرة. سيتوقف لمدة ثانية بعد كل عنصر. يمكنك تخطي بعض العناوين أو العودة إلى السابق باستخدام Enter / Return. يمكنك أيضًا تكوين جدول محتويات باستخدام علامة الرأس.

عندما تكتب HTML عرضيًا بدلاً من HTML الدلالية (في الحالة الثانية) ، فإن السطر ينكسر دون داع وينتج عنه تجربة سيئة. إنه مثل إعداد كتلة عملاقة يصعب تسلسلها ومعالجتها نظرًا لعدم وجود محددات محتملة.

اللغة والتخطيطات لموقع الويب الذي يمكن الوصول إليه

يجب عليك استخدام لغة دقيقة مع الاختصارات الموسعة والاختصارات. إن أمكن ، حاول تجنب الشرطات بكتابة 9-5 -> 9 إلى 5. تم استخدام جداول HTML سابقًا لإنشاء تخطيطات الصفحة. كان يستخدم لعرقلة القراءات الصحيحة بسبب الجداول المتداخلة التي شكلت تخطيطًا معقدًا للغاية. هنا هيكل موقع حديث:

هذا رأس



محتوى الصفحة الرئيسية

تحتوي على مقالة

عنوان المقال

محتوى المقالة



تذييل موقع الويب

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

أعد النظر في عناصر تحكم واجهة المستخدم والجداول والنص البديل

الأكثر شيوعًا ، تكون عناصر تحكم واجهة المستخدم عبارة عن أزرار وعناصر تحكم في النموذج والارتباط لمستند الويب الخاص بك. القاعدة الأساسية هي أنه يمكن التلاعب بها بواسطة لوحة المفاتيح. لديهم بعض الأنماط الافتراضية (قد تختلف في المتصفحات المختلفة) حيث يمكنك الانتقال إلى خيارات أخرى باستخدام مفتاح Tab والضغط على Enter / Return للوصول إلى نتيجة. يمكنك إدارة التسميات النصية عن طريق إضافة نصوص ربط مميزة وذات مغزى بدلاً من "انقر هنا".

لإنشاء جداول يمكن الوصول إليها ، أضف رؤوس الجدول

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

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

في معظم الحالات ، سيقرأ قارئ الشاشة النص البديل واسم الملف وسمة العنوان (يمكنك تخطيه). أيضًا ، إذا كنت لا تريد استخدام نص بديل أو تريد إضافة نفس التصنيف إلى صور متعددة ، فإليك نصيحة سريعة:

زهرة حمراء ...

لقد استخدمت السمة aria-labelledby للإشارة إلى هذا المعرّف. سيسمح لقارئي الشاشة باستخدام نص بديل في شكل تلك الفقرة.

معيار CSS لإمكانية وصول أفضل

تصميم ميزات الصفحة التي يمكن الوصول إليها يعني أن تصميمك يجب أن يتصرف وفقًا للمحتوى الأساسي للصفحة. على سبيل المثال ، من أجل ملف

,

، و

عنصر ، يجب أن يكون CSS النموذجي:

h1 {
حجم الخط: 4rem ؛
}
ص ، لي {
حجم الخط: 1.5rem ؛
لون أزرق؛
}

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

تنسيق النص والارتباطات والتسميات

التفاعلات الدقيقة ممكنة مع CSS يمكن الوصول إليه. يمكن أن تكون صغيرة مثل التأكيد على النص لإبراز الروابط بطريقة مناسبة. يمكنك استخدام ال و علامة مميزة. يمكنك إضافة تسطير منقط باستخدام جزء.

يجب تسطير الرابط القياسي باللون الافتراضي: الأزرق والرابط الذي تمت زيارته مسبقًا بلون افتراضي: أرجواني (يمكنك تخصيصه).

أ {
اللون: # ff0000 ؛
}
أ: نشط {
اللون: # 000000 ؛
لون الخلفية: # a60000 ؛
}
أ: تحوم ، أ: تمت زيارتها ، أ: تركيز {
اللون: # a60000 ؛
زخرفة النص: لا شيء ؛
}

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

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

تباين الألوان وقيم الإخفاء

اضبط نظام ألوان موقع الويب بحيث يتباين لون المقدمة (النص / الصورة) مع لون الخلفية في المقام الأول لأنه يصعب على الأشخاص الذين يعانون من إعاقات بصرية (مثل عمى الألوان) قراءة المحتوى على وجه صحيح. يمكنك استخدام مدقق تباين اللون للحصول على نظام ألوان لائق وفقًا لمعايير WCAG. حاول أيضًا إضافة علامات الترميز (مثل علامة النجمة) جنبًا إلى جنب مع التحذيرات أو البنود والشروط (وليس مجرد تنبيه أحمر).

لا داعي للقلق بشأن برامج قراءة الشاشة حتى يتم كتابة ترتيب الكود المصدري بشكل لائق. حاول تجنب استخدام العرض: لا شيء أو الرؤية: الخصائص المخفية لأنها تخفي المحتوى عن برامج قراءة الشاشة.

اجعل من السهل تجاوز النمط

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

الختام: ادمج HTML و CSS

الآن ، أنت تعرف أساسيات البدء باستخدام HTML الدلالية وكتابة كود مصدر معقول بالترتيب الصحيح لموقع ويب يمكن الوصول إليه. ركز على HTML وتحرك نحو إنشاء CSS يمكن الوصول إليه بمجرد الانتهاء.

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

كيفية إنشاء موقع على شبكة الإنترنت: للمبتدئين

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

اقرأ التالي

نبذة عن الكاتب

قم بالتوسيع لقراءة القصة الكاملة