كل ما سبق استخدم HTML عاديًا، وهذا مقصود. عناصر HTML تأتي ومعها الأدوار والأسماء والحالات وسلوك لوحة المفاتيح جاهزة. لكن أحيانًا ينفد ما في HTML. لا يوجد عنصر أصلي لحالة الضغط في زر التبديل، ولا لمجموعة تبويبات، ولا لـ «قل هذا بصوت عالٍ حين تتغيّر السلة». هنا يأتي دور ARIA (Accessible Rich Internet Applications): مجموعة من الخصائص تتيح لك وصف الأدوار والحالات والعلاقات مباشرةً لشجرة إمكانية الوصول.
\nتبدأ إرشادات W3C نفسها بقاعدة تفاجئ الناس: إن استطعت استخدام عنصر HTML أصلي فيه السلوك الذي تحتاجه، فاستخدمه بدلًا من ARIA. وتظلّ فحوص WebAIM السنوية لأشهر مليون صفحة رئيسية تجد أن الصفحات التي تستخدم ARIA فيها أخطاء مرصودة أكثر، لا أقل. والسبب بسيط. ARIA تغيّر فقط ما يُعلَن. لا تجعل أي شيء قابلًا للتركيز، ولا تضيف معالجة للوحة المفاتيح، ولا تغيّر المظهر. كل خاصية ARIA وعدٌ للتقنيات المساعدة، وعلى كود JavaScript الذي تكتبه أن يفي به.
\n<!-- A promise with nothing behind it -->\n<span role=\"button\">Add to basket</span>\n\n<!-- The same promise, kept by the browser -->\n<button type=\"button\">Add to basket</button>تنقسم خصائص ARIA (attributes) إلى ثلاث مجموعات.
\nالأدوار (roles) تقول ما هو الشيء: role="tab"، role="dialog"، role="switch"، role="status". ونادرًا ما تحتاج إليها لأشياء يوفّرها HTML أصلًا.
الخصائص بالمعنى الدقيق (properties) تصف العلاقات أو السمات الثابتة: aria-labelledby وaria-describedby (استخدمتهما كلتيهما في النماذج)، وaria-controls، وaria-required، وaria-haspopup.
الحالات (states) تصف أشياء تتغيّر مع تفاعل المستخدم، ويجب أن يحدّثها السكربت: aria-expanded، aria-pressed، aria-checked، aria-selected، aria-current، aria-disabled، aria-invalid.
قلب قائمة الأمنيات في Ticketly مثال جيد. إنه زر حقيقي أصلًا، لكن لا شيء يخبر قارئ الشاشة إن كانت الفعالية محفوظة أم لا. تحوّله aria-pressed إلى زر تبديل (toggle button):
<button type=\"button\" class=\"fav\" aria-pressed=\"false\">Save to wishlist</button>fav.addEventListener('click', () => {\n const saved = fav.getAttribute('aria-pressed') === 'true';\n fav.setAttribute('aria-pressed', String(!saved));\n});صار NVDA يقول “Save to wishlist, toggle button, not pressed”، ثم “pressed” بعد التفعيل. لاحظ أن التسمية تبقى كما هي؛ والحالة هي التي تحمل التغيير. ويمكنك التنسيق انطلاقًا من الحالة مباشرةً، وهذا يمنع المظهر والدلالة من الافتراق:
\n.fav[aria-pressed='true'] {\n background: #5b3cc4;\n color: #fff;\n}وللصفحة الحالية في قائمة تنقّل، تخبر aria-current="page" مستخدمي قارئ الشاشة بالرابط الذي هم عليه: “Tickets, current page, link”.
وبضع قواعد أخرى من مذكّرة “Using ARIA” الصادرة عن W3C تُبعدك عن المتاعب:
\n<h2 role="button"> يدمّر العنوان. ضع زرًّا داخل العنوان بدلًا من ذلك.حين يضيف Ticketly تذكرة، يتغيّر عدّاد السلة في الترويسة من 1 إلى 2. يلاحظ المبصرون ذلك. أما مستخدمو قارئ الشاشة فلا يسمعون شيئًا، لأن تركيزهم ما زال على الزر الذي ضغطوه. الـ live region عنصر تُقرأ تغييرات محتواه تلقائيًا، دون نقل التركيز.
\n<p id=\"basket-status\" role=\"status\"></p>function addToBasket() {\n count += 1;\n basketStatus.textContent = `Ticket added. ${count} tickets in your basket.`;\n}ثلاث قواعد تجعل الـ live regions موثوقة:
\nrole="status" (مثل aria-live="polite") تنتظر حتى ينتهي قارئ الشاشة من جملته الحالية. وrole="alert" (حازمة، assertive) تقاطعه. احتفظ بالـ alert للرسائل العاجلة والنادرة مثل فشل الدفع؛ فإعلان “Ticket added” بحزم مع كل نقرة مُرهِق.تصبح حالات ARIA وأدوارها في أقوى صورها في الـ widgets المخصّصة، حيث لا يوجد أي عنصر HTML مقابل. يبني الدرس التالي ثلاثة منها وفق دليل ARIA Authoring Practices.
\n","toc":[{"id":"sec-1","text":"القاعدة الأولى في ARIA","level":2},{"id":"sec-2","text":"الأدوار والخصائص والحالات","level":2},{"id":"sec-3","text":"الـ Live Regions: إعلان التغييرات","level":2}],"takeaways":["القاعدة الأولى في ARIA أن تستخدم عنصر HTML أصليًا حين يوجد؛ فـ ARIA تغيّر ما يُعلَن، ولا تغيّر أبدًا كيف يتصرّف أي شيء.","تنقسم ARIA إلى أدوار (ما هو العنصر)، وخصائص (العلاقات والسمات الثابتة)، وحالات (قيم تتغيّر، ويجب أن يُبقيها السكربت متزامنة).","لا تضع أبدًا aria-hidden=“true” على عنصر قابل للتركيز، ولا تتجاوز دور عنصر أصلي له الدور الصحيح أصلًا.","يجب أن تكون الـ live region موجودة في الـ DOM قبل أن يتغيّر نصها؛ استخدم role=“status” للتحديثات المهذّبة، وrole=“alert” للعاجلة فقط."],"further":[{"title":"W3C: Using ARIA (the rules of ARIA use)","url":"https://www.w3.org/TR/using-aria/"},{"title":"MDN: ARIA live regions","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions"},{"title":"W3C APG: Read Me First","url":"https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/"}],"quiz":[{"q":"ما الذي تغيّره إضافة role="button" إلى عنصر <span>؟
يعرض Ticketly الرسالة “Ticket added. 2 tickets in your basket.” في هذا العنصر بعد النقر. لماذا تبقى قارئات الشاشة صامتة؟
\nconst msg = document.createElement('p');\nmsg.setAttribute('role', 'status');\nmsg.textContent = 'Ticket added. 2 tickets in your basket.';\nbasket.append(msg);أيّ هذه الأمثلة يستخدم ARIA بشكل صحيح؟
","options":[{"text":"<button aria-pressed="false">Save to wishlist</button>، ويُحدَّث إلى “true” عند الحفظ","why":"صحيح. زر التبديل يكشف حالته عبر aria-pressed، والسكربت يُبقيها متزامنة، فيسمع المستخدمون “Save to wishlist, toggle button, pressed”."},{"text":"<h2 role="button" onclick="toggle()">Refunds</h2>","why":"هذا يستبدل دور العنوان، فيختفي من التنقّل بين العناوين، ويبقى «الزر» بلا دعم للوحة المفاتيح."},{"text":"<a href="/faq" aria-hidden="true">FAQ</a>","why":"الرابط ما زال قابلًا للتركيز لكنه صار بلا اسم ولا دور في الشجرة. فيصل مستخدمو لوحة المفاتيح إلى محطة صامتة."},{"text":"<nav role="navigation">","why":"ليس ضارًا، لكنه مكرّر. لعنصر nav دور navigation أصلًا، فالخاصية لا تضيف شيئًا."}],"answer":0},{"q":"يرفض مزوّد الدفع بطاقة في صفحة الدفع في Ticketly. أيّ دور live region يناسب الرسالة “Payment failed. Your card was declined.”؟
","options":[{"text":"role="status"","why":"status تنتظر بتهذيب حتى ينتهي قارئ الشاشة من الكلام. أما لإخفاق يوقف المستخدم ويجب أن يسمعه الآن، فـ alert أنسب."},{"text":"role="log"","why":"log مخصّص لتسلسلات الرسائل مثل سجلّ المحادثة، حيث تُضاف المدخلات الجديدة في النهاية."},{"text":"role="alert"","why":"صحيح. alert حازمة: تقاطع الكلام الحالي، وهذا مناسب لرسالة نادرة وعاجلة يجب أن يتصرّف المستخدم بناءً عليها."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"\n\nأربع مهام صغيرة بـ ARIA على بطاقة التذكرة في Ticketly:
\naria-current="page".aria-pressed="false" ويتبدّل مع كل نقرة. أبقِ نص التسمية كما هو.#basket-status live region مهذّبة لتُعلَن رسالة “Ticket added…”.aria-hidden="true"، وهذا يترك محطة Tab صامتة. أصلحه دون حذف الزر (يمكنك تغيير نصه).تضيف aria-current="page" عبارة “current page” إلى إعلان رابط Tickets. ويُبقي زر قائمة الأمنيات تسميته ويكشف حالته عبر aria-pressed، التي يُبقيها معالج النقر متزامنة؛ ويمكن للـ CSS التنسيق انطلاقًا من الخاصية نفسها. وrole="status" على الفقرة الموجودة والفارغة تعني أن كل رسالة جديدة تُقرأ بتهذيب دون نقل التركيز. وعاد الزر الثابت مرئيًا وقابلًا للتركيز في شجرة إمكانية الوصول: لا يجوز أبدًا أن يقع عنصر قابل للتركيز داخل aria-hidden="true"، لأن مستخدمي لوحة المفاتيح يصلون إليه بينما تبقى قارئات الشاشة صامتة.