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

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

قضية الوصول

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

تعزز الإحصاءات قضيتنا لإمكانية الوصول:

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

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

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

حالة دومينوز

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

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

بينما انحاز القضاة إلى Domino's في البداية ، حكمت محكمة الاستئناف لصالح العميل الأسبوع الماضي فقط على أساس أن " عدم إمكانية الوصول المزعوم إلى موقع Domino على الويب وتطبيقه يعيق الوصول إلى السلع والخدمات الخاصة بامتيازات البيتزا الفعلية - وهي أماكن عامة الإقامة ".

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

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

أفضل ممارسات الوصول إلى العناوين

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

إذا لم تكن متأكدًا مما هو العنوان ، فإن W3C لديه تعريف جيد ويشرح Yoast استخدامه لتحسين محركات البحث.

يعرّف W3C الاستخدام الصحيح على النحو التالي:

"تشير عناصر العناوين الستة ، من H1 إلى H6 ، إلى عناوين الأقسام. على الرغم من أن ترتيب العناوين وحدوثها غير مقيد بواسطة HTML DTD ، يجب ألا تتخطى المستندات المستويات (على سبيل المثال ، من H1 إلى H3) ، لأن تحويل مثل هذه المستندات إلى تمثيلات أخرى غالبًا ما يكون مشكلة. "

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

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

كيف أتحقق من العناوين؟

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

كملاحظة جانبية ، لا تحتاج إلى إضافة عناوين في كل مكان ، سيكون H1 بسيطًا (والذي عادة ما يكون عنوان الصفحة) متبوعًا بـ H2 كافياً - ولكن دعنا نقول أنك تريد هيكلة صفحة طويلة بشكل صحيح أو أنك تتحقق من شخص آخر الشغل؟ حاول استخدام أحد هذه المكونات الإضافية لمتصفحك المفضل:

• خريطة العناوين للكروم
• خريطة العناوين لمتصفح Firefox

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

الطريقة الصحيحة لاستخدام العناوين:

الطريقة غير الصحيحة لاستخدام العناوين:

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

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

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