فُحِص في 24/9/2026 · https://www.heise.de/
5 عائق حرجn · إضافةً إلى 2 للتحقق.
كيف تُحتسب الدرجة؟ (100 نقطة بداية)
| 40 من 519 صورة بلا سمة alt | -18 |
| 4 حقل نموذج بلا تسمية يمكن التعرف عليها | -18 |
| 16 رابط بلا اسم يمكن التعرف عليه في الـ HTML | -18 |
| 6 زر بلا اسم في الـ HTML | -18 |
| 5 قاعدةn CSS بتباين نص قد يكون منخفضًا جدًا | -18 |
| لا يوجد عنوان <h1> في الـ HTML المُقدَّم | -7 |
| 6 سمة id مكررة | -7 |
| النتيجة | 0 / 100 |
قابل للإدراك
40 من 519 صورة بلا سمة alt
الصور التي تُحمَّل عبر JavaScript غير مشمولة هنا.
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3377" height="1898"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1920" height="1079"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3200" height="1798"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250">
ما ينبغي فعله: امنح كل <img> سمة alt: وصف قصير للصور الحاملة للمعنى، alt="" للصور الزخرفية البحتة.
4 حقل نموذج بلا تسمية يمكن التعرف عليها
تحقق مما إذا كان هناك aria-label مضبوط عبر JavaScript.
<input type="text" name="q" placeholder="Suchen"><input type="text" name="q" placeholder="Suchen"><select name="in"><input type="text" name="fs" placeholder="Im Preisvergleich suchen">
ما ينبغي فعله: اربط كل حقل بعنصر <label for> أو اضبط aria-label / aria-labelledby. لا يكفي placeholder وحده.
5 قاعدةn CSS بتباين نص قد يكون منخفضًا جدًا
المطلوب: 4.5:1 (عادي) أو 3:1 (نص كبير). في حالة «خلفية صفحة مفترَضة» تعذر تحديد الخلفية الفعلية بيقين — عند الشك تحقق في المتصفح. مما عُثر عليه: `.dark a-gift-link dialog`: #e0e0e0 auf #fff (Vorfahren-Hintergrund) = 1.32:1 · `.a-android-native-app-prompt__close-banner`: #323232 auf rgba(0,0,0,0) = 1.64:1 · `a-opt-in[is-active] .opt-in__footnote`: #959595 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 3.00:1 · `.a-android-native-app-prompt__load-app`: #fff auf #27a209 = 3.36:1 · `a-topic .topic-label`: #fff auf #ed3725 = 4.06:1
.dark a-gift-link dialog, .a-android-native-app-prompt__close-banner, a-opt-in[is-active] .opt-in__footnote, .a-android-native-app-prompt__load-app, a-topic .topic-label
ما ينبغي فعله: غمِّق لون النص أو فتِّح الخلفية حتى بلوغ الحد الأدنى المعني. لا تستخدم اللون أبدًا كسمة تمييز وحيدة.
قابل للتشغيل
16 رابط بلا اسم يمكن التعرف عليه في الـ HTML
روابط فارغة أو مجرد أيقونة/صورة بلا alt. لا يُتعرَّف هنا على aria-label المضبوط عبر JavaScript.
<a-click-performance><a name="topnavi.ho.magazine-nav.ct" class="hover:bg-brand dark:hover:<a name="topnavi.ho.magazine-nav.ix" class="hover:bg-brand-alternative<a name="topnavi.ho.magazine-nav.foto" class="hover:bg-brand dark:hove
ما ينبغي فعله: أضِف نص رابط مرئيًا، أو استخدم في روابط الأيقونات aria-label أو صورة ذات alt.
6 زر بلا اسم في الـ HTML
الأزرار بلا نص وبلا aria-label صامتة لقارئات الشاشة — ما لم يُضبَط الاسم عبر JavaScript.
<button class="scroll-left text-ho-text"><button class="scroll-right text-ho-text"><button class="scroll-left text-ho-text"><button class="scroll-right text-ho-text">
ما ينبغي فعله: أضِف نص الزر أو اضبط aria-label.
لا يوجد عنوان <h1> في الـ HTML المُقدَّم
يجب أن تبدأ كل صفحة بعنوان h1 واحد بالضبط. في الصفحات المبنية عبر JavaScript قد لا ينشأ الـ h1 إلا في المتصفح — عندئذٍ تحقق في الـ DOM المعروض.
body
ما ينبغي فعله: أدرِج <h1> ذا معنى كأول عنوان (على جانب الخادم إن أمكن).
متين
6 سمة id مكررة
مثلًا heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. يكسر ارتباطات label-for وaria.
[id]
ما ينبغي فعله: امنح معرّفات id فريدة.
الخطوات التالية
- 40 من 519 صورة بلا سمة alt. امنح كل <img> سمة alt: وصف قصير للصور الحاملة للمعنى، alt="" للصور الزخرفية البحتة.
- 4 حقل نموذج بلا تسمية يمكن التعرف عليها. اربط كل حقل بعنصر <label for> أو اضبط aria-label / aria-labelledby. لا يكفي placeholder وحده.
- 16 رابط بلا اسم يمكن التعرف عليه في الـ HTML. أضِف نص رابط مرئيًا، أو استخدم في روابط الأيقونات aria-label أو صورة ذات alt.
- 6 زر بلا اسم في الـ HTML. أضِف نص الزر أو اضبط aria-label.
- 5 قاعدةn CSS بتباين نص قد يكون منخفضًا جدًا. غمِّق لون النص أو فتِّح الخلفية حتى بلوغ الحد الأدنى المعني. لا تستخدم اللون أبدًا كسمة تمييز وحيدة.
إعادة فحص أسبوعية، بعرض JS، بريد إلكتروني عند العوائق الجديدة — قريبًا.
المنهجية & الحدود
في 24/9/2026 فُحِص الـ HTML الذي يُقدِّمه www.heise.de عند أول استدعاء دون تسجيل دخول، إضافةً إلى ما يصل إلى أربعة ملفات CSS مرتبطة من النطاق نفسه. ما فُحِص: تباين الألوان (من الـ CSS)، البدائل النصية، تسمية النماذج، أسماء عناصر التحكم، بنية العناوين، عنوان الصفحة ولغتها، قفل التكبير، معرّفات id مكررة، قيم tabindex موجبة، المعالم.
لم يُفحَص: كل ما ينشأ عبر JavaScript، وقابلية التشغيل بلوحة المفاتيح، والتركيز المرئي، وترتيب التركيز، وإعلان قارئ الشاشة، والمحتوى خلف تسجيل الدخول، والصفحات الفرعية. يكتشف الاختبار الآلي نحو 20–35 % من مخالفات WCAG — أما الباقي فيحتاج إلى فحص يدوي. لقطة لحظية، لا حكم قانوني.
لا تجعل أدوات الـ overlay (أزرار إمكانية الوصول التي تغيّر التباين أو الخط) الموقعَ مطابقًا للمعايير — يجب إصلاح العوائق المكتشفة في الشيفرة المصدرية. لماذا لا تفيد أدوات الـ overlay