التصنيفات وبدائل النصوص

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

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

من السهل التحقّق من اسم العنصر السهل الوصول إليه باستخدام أدوات مطوّري البرامج في Chrome:

  1. انقر بزر الماوس الأيمن على عنصر واختَر فحص. يؤدي ذلك إلى فتح لوحة DevTools Elements.
  2. في لوحة "العناصر"، ابحث عن لوحة تسهيل الاستخدام. قد يكون مخفيًا بجانب رمز ».
  3. في القائمة المنسدلة السمات المحسوبة، ابحث عن السمة الاسم.
لوحة تسهيل الاستخدام في "أدوات مطوّري البرامج" تعرِض الاسم المحسوب لزرّ.

سواء كنت تطّلع على img يتضمّن نص alt أو input يتضمّن label، تؤدي جميع هذه السيناريوهات إلى النتيجة نفسها: منح عنصر اسمه الواضح.

البحث عن الأسماء غير المتوفّرة

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

تصنيف المستندات والإطارات

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

على سبيل المثال، تحمل الصفحة أدناه العنوان "وصفة تحضير حلوى Maple Bar سريعة التحضير من Mary":

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
      </body>
</html>

وبالمثل، يجب أن تحتوي أي عناصر frame أو iframe على سمات title:

<iframe title="An interactive map of San Francisco" src="…"></iframe>

على الرغم من أنّ محتوى iframe قد يحتوي على عنصر title داخلي، يتوقف عادةً قارئ الشاشة عند حدود الإطار ويُعلن عن دور العنصر "إطار" واسمه الواضح الذي تقدّمه سمة title. يتيح ذلك للمستخدم تحديد ما إذا كان يريد الدخول إلى الإطار أو تخطّيه.

تضمين نصوص بديلة للصور والكائنات

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

إنّ كتابة نص alt جيد هو فن إلى حدٍ ما، ولكن هناك بعض الإرشادات التي يمكنك اتّباعها:

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

إذا كانت الصورة تعمل كعنصر تزيين ولا تقدّم أي محتوى مفيد، يمكنك منحها سمة alt="" فارغة لإزالتها من شجرة تسهيل الاستخدام.

يجب أن تستخدم الصورة المضمّنة في رابط سمة alt في img لوصف المكان الذي سينتقل إليه المستخدم في حال النقر على الرابط:

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

وبالمثل، إذا تم استخدام عنصر <input type="image"> لإنشاء زر صورة، يجب أن يحتوي على نص alt يصف الإجراء الذي يحدث عند نقر المستخدم على الزر:

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

العناصر المضمّنة

يجب أن تحتوي عناصر <object>، التي تُستخدَم عادةً في عمليات التضمين مثل Flash أو ملفات PDF أو ActiveX، على نص بديل أيضًا. تمامًا مثل الصور، يتم عرض هذا النص إذا تعذّر عرض العنصر. يُدرج النص البديل داخل عنصر object كنص عادي، مثل "التقرير السنوي" أدناه:

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

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

الأزرار

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

<button>Book Room</button>

نموذج متوافق مع الأجهزة الجوّالة يتضمّن زر &quot;حجز غرفة&quot;

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

زر رمز مُحاذاة لليسار

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

<button aria-label="Left align"></button>

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

الوصف غير كافٍ
Check out our guide to web performance <a href="/guide">here</a>.
محتوى مفيد
Check out <a href="/guide">our guide to web performance</a>.

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

قائمة الروابط في VoiceOver مليئة بكلمة &quot;هنا&quot;
مثال على VoiceOver، وهو قارئ شاشة لنظام التشغيل macOS، يعرض قائمة التنقل باستخدام الروابط.

عناصر نموذج التصنيف

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

  • ضع عنصر الإدخال داخل عنصر تصنيف.
<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>
  • أو استخدِم سمة for الخاصة بالعلامة وارجع إلى id الخاصة بالعنصر.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

عند تصنيف مربّع الاختيار بشكل صحيح، يمكن لقارئ الشاشة الإبلاغ عن أنّه لدى العنصر دور مربّع اختيار، وأنّه في حالة وضع علامة عليه، وأنّ اسمه "هل تريد تلقّي عروض ترويجية؟"، كما هو موضّح في مثال VoiceOver أدناه:

ناتج النص في ميزة VoiceOver يعرض &quot;هل تريد تلقّي عروض ترويجية؟&quot;

TODO: DevSite - Think and Check assessment