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