ضمان إمكانية الوصول إلى الارتباطات والصور

مكتمل

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

نص الارتباط

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

خذ بعين الاعتبار الارتباطين في نص المثال التالي:

• "البطريق الصغير، المعروف أحيانًا باسم البطريق الخرافي، هو أصغر بطريق في العالم. انقر هنا لمزيد من المعلومات."
• "البطريق الصغير، المعروف أحيانًا باسم البطريق الخرافي، هو أصغر بطريق في العالم. تفضل بزيارة https://en.wikipedia.org/wiki/Little_penguin لمزيد من المعلومات."

إشعار

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

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

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

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

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

• "البطريق الصغير، المعروف أحيانا باسم البطريق الخرافي، هو أصغر بطريق في العالم".

إشعار

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

سمات ARIA

تخيل صفحة المنتج التالية:

المنتج	‏‏الوصف	الأمر
عنصر واجهة المستخدم	[Description]('#')	[Order]('#')
عنصر واجهة المستخدم متميز	[Description]('#')	[Order]('#')

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

لدعم هذه الأنواع من السيناريوهات، يدعم HTML مجموعة من السمات المعروفة باسم Accessible Rich Internet Applications (ARIA). يمكنك استخدام هذه السمات لتوفير مزيد من المعلومات لقارئات الشاشة.

على سبيل المثال، يمكنك استخدام aria-label لوصف ارتباط عندما لا يسمح لك تنسيق الصفحة بذلك. قد يتم تعيين وصف عنصر واجهة المستخدم على النحو التالي:

<a href="#" aria-label="Widget description">description</a>

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

<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>

هام

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

النص البديل للصور

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

بالنسبة للصور الزخرفية البحتة يجب تعيين السمة alt بها إلى سلسلة فارغة: alt="". يمنع هذا الإعداد قارئات الشاشة من الإعلان عن الصورة الزخرفية دون داعٍ.

إشعار

كما قد تتوقع، لا يمكن لمحركات البحث فهم ما هو موجود في الصورة. إنها تعتمد على النص البديل. لذلك نكرر، ضمان إمكانية الوصول إلى صفحتك يوفر مكافآت!