R012: نصوص سمات غير مترجمة (`placeholder` و`alt` و`title` و`aria-label` وقيمة الزر)

قارئات الشاشة تنطق alt وaria-label بصوت مسموع، والنص المؤقت في الحقل يقول ما يُكتب فيه، فالإنجليزية المتروكة هناك تخذل المستخدم العربي حتى في صفحة مترجمة.

الفحص

المعرّف: R012
الفئة: محتوى لم يُترجم
الخطورة الافتراضية: متوسطة

متى يُطلق ملاحظة

متوسطة
placeholder أو alt أو title أو aria-label لعنصر ظاهر، أو value لحقل إرسال أو زر، لا عربية فيه، وتبقى فيه أربعة حروف لاتينية على الأقل بعد استبعاد أسماء العلامات والروابط والرموز.
الإصلاح: ترجم نصوص هذه السمات.
متوسطة
النص غير المترجم نفسه موجود على عدة عناصر، كما يحدث حين يأتي من قالب بطاقة أو مكوّن مشترك. يُبلَّغ عنه مرة واحدة مع عدد تكراره، كي لا يزاحم قالبٌ واحد كل الملاحظات الأخرى.
الإصلاح: ترجم هذا النص مرة واحدة في القالب المشترك: إنه يتكرر في أنحاء الصفحة.
متوسطة · ثقة منخفضة
كل قيمة مخالفة هي alt أو title بهيئة اسم: حتى أربع كلمات تبدأ بحرف كبير ولا كلمات إنجليزية يومية فيها، مثل Six Flags. هذا في الغالب علامة تجارية أو شخص، لذلك يُبلَّغ بثقة منخفضة.
الإصلاح: ترجمه إن كان نصًا وصفيًا؛ وإن كان علامة تجارية أو اسم شخص فعلّمه بـtranslate="no".
متوسطة
alt أو title أو aria-label لا يقول إلا كلمة مثل Image أو photo أو icon أو logo. هذا لا يصف شيئًا بأي لغة، فالملاحظة عن الوصف لا عن الترجمة.
الإصلاح: اكتب ما تُظهره الصورة، بالعربية، أو علّمها زخرفية بـalt="" إن لم تحمل معنى. قارئ الشاشة الذي يقول "صورة" عند كل صورة صامتٌ كما لو لم يكن هناك alt أصلًا.

ما الذي يتجاهله عمدًا

العناصر المخفية، وكتل الكود، وكل ما تحت translate="no" أو lang غير عربية. القيمة التي فيها أي حرف عربي أو رقم مشرقي تُعدّ مترجمة.

قبل الإصلاح وبعده

before.html

<input type="search" placeholder="Search products">
<img src="team.jpg" alt="Our team at the office">

after.html

<input type="search" placeholder="ابحث في المنتجات">
<img src="team.jpg" alt="فريقنا في المكتب">

افحصه يدويًا

شغّل [...document.querySelectorAll('[placeholder], [alt], [title], [aria-label]')].flatMap((e) => ['placeholder', 'alt', 'title', 'aria-label'].map((a) => e.getAttribute(a))).filter((v) => v && /[A-Za-z]{4,}/.test(v) && !/\p{Script=Arabic}/u.test(v)) في وحدة تحكم DevTools. يسرد نصوص السمات التي لا عربية فيها؛ الأسماء يمكن أن تبقى، والباقي يحتاج إلى ترجمة.

ما يعرضه لك التقرير

تحمل كل ملاحظة من R012 ما ينطبق عليها من الحقول أدناه، فترى سبب ظهورها دون إعادة الفحص.

placeholder: placeholder كما كُتب، حين يكون غير مترجم.
alt: نص alt كما كُتب، حين يكون غير مترجم.
title: title كما كُتب، حين يكون غير مترجم.
aria-label: aria-label كما كُتب، حين يكون غير مترجم.
value: value لحقل إرسال أو زر، حين يكون غير مترجم.
genericDescription: يظهر حين تكون القيمة كلمة عامة مثل Image بدل وصف حقيقي.
occurrences: حين يتكرر النص: عدد العناصر التي تحمله في الصفحة.

مكوّنات تجتاز هذا الفحص بطريقة بنائها

تجتاز مكوّنات ريتلا هذه الفحص R012 بالطريقة التي بُنيت بها. إذا استخدمتها كما يصفها التوثيق، فلن تُدخل هذا الخلل إلى صفحتك.

هل تخفق صفحتك في الفحص R012؟

الصق رابطًا، فتعرض ريتلا الصفحة على سطح المكتب والجهاز اللوحي والجوال، وتشغّل كل الفحوص، وتريك أهم المشكلات مع لقطة شاشة دليلًا على كل منها.

افحص صفحة مجانًا تصفّح الفحوص