ممارسات CSS التي يمكن أن تضر بإمكانية الوصول

أصبحت CSS لغة قوية للغاية. ما بدأ كوسيلة لإضافة نمط أساسي إلى النص وعناصر التصميم الأخرى أصبح الآن قادرًا على تحقيق المزيد.

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

ولكن مثل أي أداة قوية ، يمكن أن يكون لـ CSS أيضًا آثار جانبية غير مقصودة. تعد إمكانية الوصول من بين أكبر مجالات الاهتمام. يمكن أن تضر بعض التطبيقات أكثر مما تنفع.

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

عرض نص هام باستخدام خاصية content

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

لكن هذا الأخير يمكن أن يكون مزعجًا بشكل خاص. لا يتم تضمين النص المضاف عبر خاصية content في نموذج كائن المستند (DOM). هذا يعني أن التكنولوجيا المساعدة مثل برامج قراءة الشاشة قد لا تتعرف عليها.

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

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

إنشاء تسلسلات متحركة شديدة اللمعان

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

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

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

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

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

غير بديهي :hover قم بالمرور أو :focus الدول على العناصر التفاعلية

CSS بارع في تصميم العناصر التفاعلية. ضع في اعتبارك ما هو ممكن مع العناصر اليومية مثل الارتباطات التشعبية وحقول النموذج. يمكن تخصيصها لدرجة لا يمكن التعرف عليها عند مقارنتها بمظهرها الافتراضي.

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

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

التصميم الأولي للعنصر التفاعلي هو نصف المعركة فقط. تقديم أنماط بديهية لـ :hover and :focus pseudo-class - استكمال تجربة المستخدم.

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

أخذ أساسيات التصميم الذي يمكن الوصول إليه من أجل الممنوح

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

غالبًا ما تُترك أساسيات التصميم الذي يمكن الوصول إليه. ممارسات CSS التي قد يأخذها المصممون كأمر مسلم به ويفترضون أنها تصل بالفعل إلى مستوى قياسي.

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

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

يتعلق الأمر باستخدام CSS بمسؤولية

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

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

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

CSS موجود لجعل الوصول أسهل. كل هذا في كيفية اختيارنا لاستخدامه.