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