أتقن النص البديل، وتسلسلًا هرميًا للعناوين يمكن لقارئات الشاشة التنقّل فيه فعليًا، واستخدام ARIA مقصورًا على الحالات التي يعجز فيها HTML الأصلي.
افتح هذا الدرس في Kodokonإمكانية الوصول ليست طبقة تجميلية تُضاف في نهاية المشروع: إنها خاصية بنيوية في شيفرة HTML لديك. أولًا، السمة alt. النص البديل الجيّد يصف وظيفة الصورة في سياقها، لا مظهرها بكسلًا بكسل. مخطط المبيعات لا يُوصف بأنه "مخطط أعمدة أزرق" بل بالمعلومة التي يحملها. أما الصورة الزخرفية البحتة فيجب أن تحصل على alt="" فارغة: إنها الإشارة الصريحة التي تُخبر قارئة الشاشة بتخطّيها. إغفال السمة هو أسوأ الخيارات جميعًا، لأن قارئة الشاشة تنطق حينها باسم الملف.
<img src="sales-chart.png"
alt="2025 sales: +18% in the last quarter">
<img src="divider-ornament.png" alt="">المهمة الثانية: التسلسل الهرمي للعناوين. يقفز مستخدمو قارئات الشاشة في الغالبية العظمى من عنوان إلى عنوان لبناء خريطة ذهنية للصفحة. لذلك يجب أن يعكس مخطط h1 ← h2 ← h3 لديك البنية المنطقية للمحتوى، لا الحجم البصري الذي تصادف أنك تريده. قاعدتان غير قابلتين للتفاوض: عنوان h1 واحد لكل صفحة، وعدم تخطّي المستويات (لا h4 مباشرةً تحت h2). إذا بدا عنوان ما "كبيرًا جدًا"، فأصلح ذلك في CSS، لا بخفض مستواه الدلالي.
<h1>Dashboard</h1>
<section>
<h2>Statistics</h2>
<h3>Monthly visits</h3>
<h3>Conversion rate</h3>
</section>
<section>
<h2>Exportable reports</h2>
</section>يصبح استخدام ARIA مشروعًا حين يعجز HTML الأصلي عن التعبير عن حالة ديناميكية: قائمة مفتوحة أو مغلقة، منطقة تُحدَّث مباشرة، تبويب نشط. السمات الأساسية هي aria-expanded (حالة مفتوح/مغلق)، وaria-controls (الربط بالعنصر المتحكَّم فيه)، وaria-live (الإعلان عن التحديثات). تذكّر المبدأ: HTML الأصلي يوفّر الأدوار، وARIA يملأ الحالات والخصائص التي تغيّرها شيفرة JavaScript مع مرور الوقت.
<button aria-expanded="false" aria-controls="menu">
Menu
</button>
<ul id="menu" hidden>
<li><a href="/profile">Profile</a></li>
<li><a href="/settings">Settings</a></li>
</ul>