في قسم قائمة الفنانين في Ticketly ثلاثة تبويبات، Friday وSaturday وSunday، مبنية من أزرار منسّقة تبدّل اللوحات عند النقر. بالفأرة كل شيء على ما يرام. أما بقارئ الشاشة فهي صفّ من ثلاثة أزرار لا علاقة بينها، ولا شيء يقول أيّ يوم معروض، واللوحات تتبدّل بصمت. لا يوجد عنصر <tabs> في HTML، وهذا هو ملعب ARIA.
يصف دليل ARIA Authoring Practices (APG)، الذي تنشره W3C، نحو ثلاثين نمطًا شائعًا للـ widgets: الـ accordion، والـ combobox، ونافذة الحوار، والـ disclosure، والـ listbox، وزر القائمة، والتبويبات، والشجرة وغيرها. ولكل نمط يسرد الأدوار والحالات والخصائص، وتفاعل لوحة المفاتيح الدقيق الذي يتوقّعه المستخدمون. يتعلّم مستخدمو قارئ الشاشة هذه الأعراف عبر آلاف المواقع، فاتّباعها يعني أن الـ widget الذي تبنيه يتصرّف بالطريقة التي يعرفونها أصلًا.
\nتحذيران. أمثلة APG عروض توضيحية لا components جاهزة للإنتاج، فاختبرها في سياقك. وAPG نفسه يقول بتفضيل HTML الأصلي حيث يوجد. وهذا يستبعد عددًا مفاجئًا من الـ widgets المخصّصة.
\nأبسط نمط هو زر يُظهر منطقة ويُخفيها، مثل إجابات الأسئلة الشائعة في Ticketly. إن سمح التصميم بذلك، فعنصرا <details> و<summary> الأصليان يمنحانك الأمر كله دون أي سكربت:
<details>\n <summary>How do refunds work?</summary>\n <p>You can get a full refund up to 14 days before the festival.</p>\n</details>وحين تحتاج إلى نسخة مخصّصة، فالحالة الأساسية هي aria-expanded على الزر:
<h3>\n <button type=\"button\" aria-expanded=\"false\" aria-controls=\"refunds\">How do refunds work?</button>\n</h3>\n<div id=\"refunds\" hidden>\n <p>You can get a full refund up to 14 days before the festival.</p>\n</div>button.addEventListener('click', () => {\n const open = button.getAttribute('aria-expanded') === 'true';\n button.setAttribute('aria-expanded', String(!open));\n panel.hidden = open;\n});يُعلن قارئ الشاشة “How do refunds work?, button, collapsed”، ثم “expanded”. ولفّ الزر بعنوان يُبقي أسئلة الصفحة ضمن التنقّل بين العناوين.
\nلنمط التبويبات أجزاء متحرّكة أكثر:
\nrole="tablist" (واسم، مثل aria-label="Festival days").role="tab"، وaria-selected="true" أو "false"، وaria-controls تشير إلى لوحته.role="tabpanel" وaria-labelledby تشير إلى تبويبها.النقطة الأخيرة تستخدم تقنية اسمها roving tabindex (الـ tabindex المتنقّل). وحده التبويب المحدَّد له tabindex="0"؛ والبقية لها tabindex="-1". فيكون الـ tablist كله محطة Tab واحدة، وينقل معالج مفاتيح الأسهم التركيز والقيمة 0 بين التبويبات.
وهذه نسخة Ticketly:
\n<div role=\"tablist\" aria-label=\"Festival days\">\n <button type=\"button\" role=\"tab\" id=\"tab-fri\" aria-selected=\"true\" aria-controls=\"panel-fri\">Friday</button>\n <button type=\"button\" role=\"tab\" id=\"tab-sat\" aria-selected=\"false\" aria-controls=\"panel-sat\" tabindex=\"-1\">Saturday</button>\n <button type=\"button\" role=\"tab\" id=\"tab-sun\" aria-selected=\"false\" aria-controls=\"panel-sun\" tabindex=\"-1\">Sunday</button>\n</div>\n<div role=\"tabpanel\" id=\"panel-fri\" aria-labelledby=\"tab-fri\" tabindex=\"0\">…</div>\n<div role=\"tabpanel\" id=\"panel-sat\" aria-labelledby=\"tab-sat\" tabindex=\"0\" hidden>…</div>\n<div role=\"tabpanel\" id=\"panel-sun\" aria-labelledby=\"tab-sun\" tabindex=\"0\" hidden>…</div>const tabs = [...document.querySelectorAll('[role=\"tab\"]')];\n\nfunction select(tab) {\n for (const t of tabs) {\n const on = t === tab;\n t.setAttribute('aria-selected', String(on));\n t.tabIndex = on ? 0 : -1;\n document.getElementById(t.getAttribute('aria-controls')).hidden = !on;\n }\n tab.focus();\n}\n\ntabs.forEach((tab) => tab.addEventListener('click', () => select(tab)));\n\ndocument.querySelector('[role=\"tablist\"]').addEventListener('keydown', (event) => {\n const i = tabs.indexOf(event.target);\n const moves = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 };\n if (!(event.key in moves) || i === -1) return;\n event.preventDefault();\n select(tabs[(moves[event.key] + tabs.length) % tabs.length]);\n});يستخدم هذا الكود التفعيل التلقائي (automatic activation): الانتقال بالأسهم إلى تبويب يُظهر لوحته فورًا، وهو ما يوصي به APG حين تُعرض اللوحات دون تأخير. أما إن كانت اللوحة تحتاج إلى تحميل بيانات، فاستخدم التفعيل اليدوي بدلًا منه: الأسهم تنقل التركيز فقط، وEnter أو Space يحدّد التبويب. تحصل اللوحات على tabindex="0" لأنها لا تحتوي عناصر قابلة للتركيز خاصة بها؛ وهذا يمنح Tab مكانًا يصل إليه.
نمط زر القائمة (menu button) في APG زر عليه aria-haspopup="menu" وaria-expanded يفتح عنصرًا عليه role="menu" يضمّ أبناء عليهم role="menuitem". مفاتيح الأسهم تتنقّل بين العناصر، وEscape يُغلق القائمة ويعيد التركيز إلى الزر. وهو مناسب لقوائم الأفعال على طريقة التطبيقات، مثل قائمة “⋯” في Ticketly على حجز ما، وفيها “Download tickets” و"Transfer" و"Cancel booking".
لكنه خاطئ لتنقّل المواقع. يخبر الدور menu قارئات الشاشة بأن تتوقّع سلوك تطبيقات سطح المكتب: فتبدّل أنماط التفاعل وتُعلن العناصر على أنها عناصر قائمة لا روابط. أما لقائمة “Events” المنسدلة في الترويسة المليئة بالروابط، فاستخدم disclosure: زرًّا عليه aria-expanded يكشف قائمة عادية من الروابط. كود أبسط، ويتصرّف كما يتوقّع مستخدمو المواقع.
جعل القسم 3 موقع Ticketly قابلًا للتشغيل. وينتقل القسم 4 إلى ما يراه الناس ويقرؤونه، بدءًا باللون والتباين.
\n","toc":[{"id":"sec-1","text":"دليل ARIA Authoring Practices","level":2},{"id":"sec-2","text":"الـ Disclosure: الإظهار والإخفاء","level":2},{"id":"sec-3","text":"التبويبات","level":2},{"id":"sec-4","text":"زر القائمة، ومتى لا تستخدمه","level":2}],"takeaways":["يوثّق دليل ARIA Authoring Practices (APG) الأدوار والحالات وسلوك لوحة المفاتيح الذي يتوقّعه المستخدمون من كل نمط widget.","الـ disclosure زر عليه aria-expanded يُظهر المحتوى ويُخفيه؛ وعنصرا details وsummary الأصليان يمنحانك واحدًا مجانًا.","تستخدم التبويبات الأدوار tablist وtab وtabpanel، وaria-selected، وroving tabindex بحيث لا يكون محطة لـ Tab إلا التبويب النشط، ومفاتيح الأسهم للتنقّل بين التبويبات.","استخدم role=“menu” فقط لقوائم الأفعال على طريقة التطبيقات؛ أما القوائم المنسدلة لتنقّل الموقع فهي disclosures تضمّ روابط عادية."],"further":[{"title":"W3C APG: Tabs Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"},{"title":"W3C APG: Disclosure (Show/Hide) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"},{"title":"W3C APG: Menu Button Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/"},{"title":"MDN: The Details disclosure element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details"}],"quiz":[{"q":"في widget تبويبات مبني بشكل صحيح، ماذا يحدث حين يضغط مستخدم لوحة المفاتيح Tab والتركيز على التبويب المحدَّد؟
","options":[{"text":"ينتقل التركيز إلى التبويب التالي في الـ tablist","why":"التنقّل بين التبويبات مهمة مفاتيح الأسهم. لو زار Tab كل تبويب، لاحتاج المستخدمون إلى ضغطات كثيرة لتجاوز الـ widget."},{"text":"ينتقل التركيز إلى التبويب التالي ويحدّده","why":"لا يغيّر Tab التحديد أبدًا في نمط APG؛ مفاتيح الأسهم هي التي تفعل ذلك."},{"text":"لا شيء، لأن الـ tablist يلتقط مفتاح Tab","why":"التقاط Tab سيُنشئ مصيدة للوحة المفاتيح. يجب أن يسمح الـ widget لمفتاح Tab بالمغادرة بشكل طبيعي."},{"text":"يغادر التركيز الـ tablist وينتقل إلى لوحة التبويب النشط (أو إلى العنصر التالي القابل للتركيز فيها)","why":"صحيح. مع roving tabindex لا يكون في تسلسل Tab إلا التبويب المحدَّد، فتذهب ضغطة Tab التالية إلى محتوى اللوحة."}],"answer":3},{"q":"ما الخطأ في زر الأسئلة الشائعة هذا؟
\n<button type=\"button\" aria-controls=\"refund-answer\">How do refunds work?</button>\n<div id=\"refund-answer\" hidden>…</div>في ترويسة Ticketly قائمة منسدلة باسم “Events” تضمّ ستة روابط إلى صفحات الفعاليات. أيّ نمط يناسبها أكثر؟
","options":[{"text":"زر disclosure عليه aria-expanded يُظهر قائمة من الروابط العادية","why":"صحيح. القوائم المنسدلة للتنقّل هي disclosures. ينتقل المستخدمون بين الروابط بـ Tab كالمعتاد، وتُعلنها قارئات الشاشة على أنها روابط."},{"text":"زر قائمة مع role=“menu” وrole=“menuitem” على كل رابط","why":"الدور menu يجعل قارئات الشاشة تنتقل إلى نمط التفاعل الخاص بالتطبيقات وتتوقّع التنقّل بالأسهم، وهذا يفاجئ المستخدمين في تنقّل المواقع."},{"text":"tablist يكون فيه كل فعالية تبويبًا","why":"التبويبات تبدّل بين لوحات من المحتوى في الصفحة نفسها. أما هذه فروابط إلى صفحات أخرى."}],"answer":0},{"q":"لماذا يعطي نمط التبويبات في APG التبويبات غير النشطة tabindex="-1"؟
Nour Quartet, 8 pm. The Saltmarsh Band, 10 pm.
\nLayla & the Tides, 7 pm. Harbour Brass, 9 pm.
\nFamily matinee, 3 pm. Closing set by DJ Marwa, 8 pm.
\nNour Quartet, 8 pm. The Saltmarsh Band, 10 pm.
\nLayla & the Tides, 7 pm. Harbour Brass, 9 pm.
\nFamily matinee, 3 pm. Closing set by DJ Marwa, 8 pm.
\nتبويبات قائمة الفنانين في Ticketly لا تعمل إلا بالفأرة ولا تقول شيئًا لقارئات الشاشة. حوّلها إلى نمط التبويبات في APG:
\nrole="tablist" على الحاوية (مع اسم لها، مثل aria-label="Festival days")، وrole="tab" على كل زر، وrole="tabpanel" على كل لوحة.aria-controls تشير إلى لوحته؛ ولكل لوحة aria-labelledby تشير إلى تبويبها.aria-selected هي "true" على التبويب المحدَّد و"false" على البقية. يبدأ Friday محدَّدًا.tabindex="0"، وللبقية -1.تحوّل الأدوار ثلاثة أزرار متفرّقة إلى widget واحد تُعلنه قارئات الشاشة هكذا: “Festival days, tab list, Friday, tab, selected, 1 of 3”. وaria-controls وaria-labelledby تربطان كل تبويب بلوحته في الاتجاهين. ولأن التبويب المحدَّد وحده له tabindex="0"، يكون الـ tablist محطة Tab واحدة؛ وينقل معالج مفاتيح الأسهم التحديد والتركيز والقيمة 0 معًا، ويلتفّ عند الطرفين كما يصف APG. وجود دالة select() واحدة تُبقي كل الحالات متزامنة هو ما يجعل الـ widget جديرًا بالثقة: المظهر (.active) والدلالة (aria-selected) والتركيز لا يمكن أن تختلف أبدًا.