لكي يقدّم قارئ الشاشة واجهة مستخدم مُقروءة للمستخدم، يجب أن تتضمّن العناصر المعنيّة تصنيفات أو بدائل نصية مناسبة. يمنح التصنيف أو البديل النصي العنصر اسمه السهل الفهم، وهو إحدى السمات الرئيسية للتعبير عن دلالات العنصر في شجرة تسهيل الاستخدام.
عند دمج اسم العنصر مع دوره، يقدّم ذلك سياقًا للمستخدِم كي يتمكّن من فهم نوع العنصر الذي يتفاعل معه وكيفية تمثيله على الصفحة. في حال عدم توفّر اسم، لن يقرأ قارئ الشاشة سوى دور العنصر. تخيل محاولة التنقّل في صفحة والاستماع إلى "زر" و"مربّع اختيار" و"صورة" بدون أي سياق إضافي. لهذا السبب، فإنّ التصنيفات والنصوص البديلة مهمة لتوفير تجربة جيدة وسهلة الاستخدام.
فحص اسم عنصر
من السهل التحقّق من اسم العنصر السهل الوصول إليه باستخدام أدوات مطوّري البرامج في Chrome:
- انقر بزر الماوس الأيمن على عنصر واختَر فحص. يؤدي ذلك إلى فتح لوحة DevTools Elements.
- في لوحة "العناصر"، ابحث عن لوحة تسهيل الاستخدام. قد يكون مخفيًا
بجانب رمز
». - في القائمة المنسدلة السمات المحسوبة، ابحث عن السمة الاسم.
سواء كنت تطّلع على img يتضمّن نص alt أو input يتضمّن
label، تؤدي جميع هذه السيناريوهات إلى النتيجة نفسها: منح عنصر
اسمه الواضح.
البحث عن الأسماء غير المتوفّرة
هناك طرق مختلفة لإضافة اسم سهل الاستخدام إلى عنصر، استنادًا إلى نوعه. يسرد الجدول التالي أنواع العناصر الأكثر شيوعًا التي تحتاج إلى أسماء يسهل الوصول إليها وروابط إلى توضيحات حول كيفية إضافتها.
| نوع العنصر | كيفية إضافة اسم |
|---|---|
| مستند HTML | تصنيف المستندات والإطارات |
عناصر <frame> أو <iframe>
|
تصنيف المستندات والإطارات |
| عناصر الصور | تضمين نصوص بديلة للصور والعناصر |
<input type="image"> من العناصر
|
تضمين نصوص بديلة للصور والعناصر |
<object> من العناصر
|
تضمين نصوص بديلة للصور والعناصر |
| الأزرار | أزرار التصنيف والروابط |
| الروابط | أزرار التصنيف والروابط |
| عناصر النموذج | تصنيف عناصر النموذج |
تصنيف المستندات والإطارات
يجب أن تحتوي كل صفحة على عنصر
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 جيد هو فن إلى حدٍ ما، ولكن هناك بعض الإرشادات
التي يمكنك اتّباعها:
- حدِّد ما إذا كانت الصورة تقدّم محتوًى يصعب الحصول عليه من خلال قراءة النص المحيط.
- إذا كان الأمر كذلك، عبِّر عن المحتوى بإيجاز قدر الإمكان.
إذا كانت الصورة تعمل كعنصر تزيين ولا تقدّم أي محتوى مفيد،
يمكنك منحها سمة 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>
ومن بين الاستثناءات الشائعة لهذه القاعدة أزرار الرموز. يمكن أن يستخدم زر الرمز صورة أو خط رمز لتوفير محتوى النص للزر. على سبيل المثال، الأزرار المستخدَمة في محرِّر 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>.
ويُعدّ ذلك مفيدًا بشكل خاص لبرامج قراءة الشاشة التي تقدّم اختصارات لإدراج كل الروابط على الصفحة. إذا كانت الروابط مليئة بنصوص حشو متكررة، تصبح هذه ال اختصارات أقل فائدة بكثير:
عناصر نموذج التصنيف
هناك طريقتان لربط تصنيف بعنصر نموذج، مثل مربّع اختيار. يؤدي استخدام أيّ من الطريقتَين إلى أن يصبح نص التصنيف أيضًا هدفًا للنقر على مربع الاختيار، ما يفيد أيضًا مستخدمي الماوس أو شاشة اللمس. لربط تصنيف بعنصر، يمكنك اتّباع إحدى الخطوتَين التاليتَين:
- ضع عنصر الإدخال داخل عنصر تصنيف.
<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 أدناه:
TODO: DevSite - Think and Check assessment