لكي يتمكن قارئ الشاشة من تقديم واجهة مستخدم منطوقة للمستخدم، ينبغي أن تحتوي العناصر المفيدة على تسميات أو بدائل نصية مناسبة. من خلال التسمية أو بديل النص، يتم منح العنصر اسمه الذي يمكن الوصول إليه، وهي إحدى السمات الرئيسية للتعبير عن دلالات العنصر في شجرة تسهيل الاستخدام.
عند دمج اسم عنصر مع دور العنصر، يتم توفير سياق للمستخدم حتى يتمكن من فهم نوع العنصر الذي يتفاعل معه وطريقة تمثيله على الصفحة. إذا لم يكن هناك اسم، فسيعلن قارئ الشاشة فقط عن دور العنصر. تخيل محاولة التنقل في صفحة مع سماع "زر" أو "مربع اختيار" أو "صورة" بدون أي سياق إضافي. هذا هو السبب في أهمية وضع العلامات وبدائل النصوص للحصول على تجربة جيدة يسهل الوصول إليها.
فحص اسم عنصر
من السهل التحقق من اسم عنصر يمكن الوصول إليه باستخدام "أدوات مطوري البرامج في 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 - تقييم التفكير والتحقّق