في هذا الفيديو ، يشرح Jaci من فريق WebFX Interactive كيف يمكنك البدء في تصميم الويب الذي يمكن الوصول إليه.

نص:

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

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

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

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

ما هو الوصول إلى موقع الويب؟

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

وفقًا لـ World Wide Web Consortium ، المعروف أيضًا باسم W3C ، يعمل موقع الويب الذي يمكن الوصول إليه للأشخاص ذوي الإعاقات السمعية والمعرفية والعصبية والجسدية والكلامية والبصرية.

لا تقلق إذا لم تكن متأكدًا من أين تبدأ. لدى W3C وثائق تخبرك بما يجب أن يتضمنه موقع الويب الخاص بك لتلبية معاييرهم.

تتضمن هذه الوثائق:

• إرشادات الوصول إلى أداة التأليف (ATAG)
• إرشادات الوصول إلى محتوى الويب (WCAG)
• إرشادات إمكانية الوصول إلى وكيل المستخدم (UAAG)

تركز ATAG على الأدوات التي يستخدمها الأشخاص لإنشاء محتوى الإنترنت وتنظر UAAG في إمكانية الوصول إلى الأدوات التي تعرض محتوى الويب.

سأركز على WCAG في هذا الفيديو ، وهي إرشادات لجعل محتوى موقع الويب في متناول الجميع.

مع WCAG ، لديك ثلاثة مستويات مختلفة من الامتثال: A و AA و AAA. أثناء انتقالك من A إلى AA إلى AAA ، فإنك تتبع المزيد من المعايير التي حددتها WCAG وتجعل موقعك في متناول عدد أكبر من الأشخاص.

لذا ، كيف تعرف ما إذا كان لديك موقع ويب يمكن الوصول إليه؟ قم بالتدقيق!

كيفية تدقيق الوصول إلى موقع الويب الخاص بك

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

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

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

يحتوي موقع W3C على قائمة كبيرة من أدوات الوصول ، لذلك لا يتعين عليك القيام بكل شيء بمفردك.

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

5 إرشادات إمكانية الوصول إلى تصميم الويب

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

1. تأكد من أن النص قابل للقراءة

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

يلعب التباين دورًا مهمًا في هذا. كما هو الحال الآن ، يحتاج النص الكبير (مثل العناوين الرئيسية) إلى نص 3: 1 إلى نسبة تباين الخلفية. يحتاج النص العادي (أو الأصغر) ، مثل النص الذي يشكل نص المحتوى الخاص بك ، إلى نسبة تباين 4.5: 1.

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

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

2. تحسين الصور حتى يمكن رؤيتها وقراءتها

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

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

3. امنح جمهورك طرقًا إضافية لفهم مقاطع الفيديو

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

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

يمكنك أيضًا طلب التسميات التوضيحية باستخدام أداة مثل Rev ثم إضافتها إلى الفيديو الخاص بك.

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

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

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

تتيح لك منصة الاستضافة مثل Wistia تحميل أوصاف صوتية (وحتى لديها قائمة تحقق لإمكانية الوصول إلى الفيديو عند تحميل مقاطع الفيديو الخاصة بك).

4. تصميم موقع الويب الخاص بك ليكون سهل الماوس ولوحة المفاتيح

لا يستخدم الجميع الماوس للتنقل عبر الإنترنت. يجب أن يعكس موقع الويب الخاص بك ذلك.

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

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

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

5. اجعل التنقل في موقعك سهل الفهم

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

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

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

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

في هذا المثال الذي يعرض موقع At Home's على الويب ، على الرغم من أنني أنقر من صفحة إلى أخرى ، فإن التنقل في الجزء العلوي من الصفحة لا يتغير.

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

لمواصلة التعرف على موضوعات تصميم الويب المختلفة والتسويق الرقمي ، اشترك في قناتنا على YouTube وفي النشرة الإخبارية عبر البريد الإلكتروني ، Revenue Weekly . لن تخيب أملك.

شكرا لانضمامك لي!

انضم إلى 5000 مسوق يحصلون على معرفتهم التسويقية من مقاطع فيديو WebFX.

إشترك الآن