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