{"id":"l-a11y-3-2","courseId":"web-accessibility","lang":"ar","kind":"lesson","summary":"انقل تركيز لوحة المفاتيح عن قصد حين يتغيّر المحتوى دون تحميل صفحة جديدة، باستخدام عنصر dialog الأصلي وخاصية inert وإدارة التركيز عند تغيّر المسار.","html":"

في موقع الويب التقليدي، يتولّى المتصفّح أمر التركيز نيابةً عنك. كل نقرة على رابط تحمّل صفحة جديدة، فيعود التركيز إلى الأعلى، ويُعلن قارئ الشاشة العنوان الجديد. لكن Ticketly تطبيق أحادي الصفحة (single-page app) فيه نوافذ منبثقة وأدراج وتوجيه في جهة العميل، فلا يحدث شيء من ذلك. حين يغيّر كودك الشاشة، يقرّر كودك أين يذهب التركيز. وإن لم يقرّر، يبقى التركيز حيث كان، وكثيرًا ما يكون ذلك على شيء صار مخفيًا أو مغطّى أو محذوفًا.

\n

النافذة التي لا تحبس أحدًا

\n

يفتح زر “Book now” في Ticketly نافذة حجز منبثقة: div عليه طبقة معتمة. راقب ما يحدث بلوحة المفاتيح. تظهر النافذة، لكن التركيز ما زال على “Book now” خلفها. ينتقل Tab إلى رابط المهرجان التالي في الصفحة التي تحتها. ولا يقول قارئ شاشة سمير شيئًا عن أي نافذة؛ فبالنسبة له لم يحدث شيء.

\n

نافذة الحوار المشروطة (modal dialog) الصحيحة تحتاج إلى خمسة سلوكيات:

\n

ينتقل التركيز إلى داخل النافذة حين تُفتح.
يبقى Tab وShift+Tab داخلها ما دامت مفتوحة.
تُخفى الصفحة التي خلفها عن التقنيات المساعدة.
يُغلقها مفتاح Escape.
يعود التركيز إلى عنصر التحكّم الذي فتحها.

\n

لسنوات كان هذا يتطلّب مكتبة لحبس التركيز وخمسين سطرًا من الكود. أما اليوم فعنصر <dialog> الأصلي المفتوح بـ showModal() يفعل السلوكيات الخمسة كلها.

\n

ticketly/booking.html

<button type=\"button\" id=\"book\">Book now</button>\n\n<dialog id=\"booking\" aria-labelledby=\"booking-title\">\n  <h2 id=\"booking-title\">Book Friday pass</h2>\n  <label for=\"qty\">Quantity</label>\n  <input id=\"qty\" type=\"number\" min=\"1\" max=\"6\" value=\"1\">\n  <button type=\"button\" id=\"confirm\">Confirm</button>\n  <button type=\"button\" id=\"close\">Close</button>\n</dialog>

\n

ticketly/booking.js

const dialog = document.querySelector('#booking');\ndocument.querySelector('#book').addEventListener('click', () => dialog.showModal());\ndocument.querySelector('#close').addEventListener('click', () => dialog.close());

\n

يضع showModal() النافذة في الطبقة العليا (top layer) فوق كل شيء، ويجعل بقية المستند inert (خاملًا): غير قابل للتركيز ولا للنقر وغائبًا عن شجرة إمكانية الوصول. يذهب التركيز إلى العنصر الذي عليه autofocus إن وُجد، وإلا فإلى أول عنصر قابل للتركيز داخلها (هنا حقل الكمية)، وإلا فإلى النافذة نفسها. ويُغلقها Escape. وحين تُغلق، يعيد المتصفّح التركيز إلى العنصر الذي كان عليه قبلها، أي زر “Book now”. وتنسّق الـ pseudo-element ‏::backdrop الطبقة المعتمة.

\n

التركيز خلال حياة نافذة الحوار

\n\n

أعطِ كل نافذة حوار اسمًا بـ aria-labelledby تشير إلى عنوانها. حين تُفتح، يقرأ NVDA ‏"Book Friday pass, dialog, Quantity, spin button, 1"، وهذا يخبر سمير بالضبط أين هو. وإن لم يكن أول حقل في النافذة أفضل نقطة بداية، كنافذة شروط طويلة مثلًا، فضع autofocus على العنصر الذي يجب أن يتلقّى التركيز، مثل زر الإغلاق فيها، أو عنوانها بعد جعله قابلًا للتركيز بـ tabindex="-1" لتبدأ القراءة من الأعلى.

\n

inert لكل ما سوى ذلك

\n

ليست كل لوحة مخفية نافذة حوار. تنزلق قائمة الهاتف في Ticketly خارج الشاشة حين تُغلق، لكن روابطها ما زالت في الـ DOM وما زالت قابلة للتركيز، فيمرّ مستخدمو لوحة المفاتيح على ثمانية روابط غير مرئية. خاصية inert تُطفئ شجرة فرعية كاملة: لا تركيز، ولا نقر، ولا شجرة إمكانية وصول.

\n

HTML

<nav id=\"mobile-menu\" class=\"drawer\" inert>…</nav>

\n

JavaScript

function setMenuOpen(open) {\n  menu.inert = !open;\n  menu.classList.toggle('drawer--open', open);\n  toggle.setAttribute('aria-expanded', String(open));\n}

\n

خاصية inert مدعومة في كل المتصفّحات الرئيسية منذ 2023. استخدمها للأدراج المغلقة، وشرائح الـ carousel الواقعة خارج الشاشة، والمحتوى الذي خلف طبقة مخصّصة لا تستطيع تحويلها إلى <dialog>.

\n

التركيز بعد تغيّر المسار والحذف

\n

حين يستبدل الـ router في Ticketly الصفحةَ الرئيسية بصفحة الدفع، يختفي الرابط الذي فعّله المستخدم، فيسقط التركيز إلى <body>. تبدأ ضغطة Tab التالية من أعلى المستند، ولا يُعلن قارئ الشاشة شيئًا. افعل ما كان تحميل الصفحة سيفعله:

\n

ticketly/router.js

function afterNavigate() {\n  const heading = document.querySelector('main h1');\n  document.title = `${heading.textContent} · Ticketly`;\n  heading.setAttribute('tabindex', '-1');\n  heading.focus();\n}

\n

التركيز على h1 يُعلن اسم الصفحة الجديدة ويضع المستخدم في بداية محتواها. وtabindex="-1" تجعل العنوان قابلًا للتركيز من السكربت دون إضافة محطة لـ Tab. بعض الـ frameworks تفعل جزءًا من هذا نيابةً عنك؛ فتحقّق مما يفعله الـ framework الذي تستخدمه قبل أن تضيف كودك.

\n

والمبدأ نفسه ينطبق على الحذف. حين يحذف المستخدم تذكرة من السلة، يختفي زر “Remove” الذي ضغطه. انقل التركيز إلى مكان منطقي، مثل زر Remove للعنصر التالي أو عنوان السلة، بدلًا من تركه يسقط إلى أعلى الصفحة.

\n\n

العناصر الأصلية وبضعة أسطر لإدارة التركيز تغطّي معظم Ticketly. وحين لا يوجد عنصر أصلي، تحتاج إلى ARIA، وهذا موضوع الدرس التالي.

\n","toc":[{"id":"sec-1","text":"النافذة التي لا تحبس أحدًا","level":2},{"id":"sec-2","text":"inert لكل ما سوى ذلك","level":2},{"id":"sec-3","text":"التركيز بعد تغيّر المسار والحذف","level":2}],"takeaways":["حين يغيّر السكربت ما يظهر على الشاشة، يصبح هو المسؤول عن وجهة التركيز؛ فالمتصفّح لا يدير التركيز إلا عند تحميل صفحة كاملة.","نافذة الحوار التي تُفتح بـ showModal() تنقل التركيز إلى داخلها، وتجعل بقية الصفحة inert، وتُغلق بمفتاح Escape، وتعيد التركيز إلى العنصر الذي فتحها حين تُغلق.","خاصية inert تُخرج شجرة فرعية كاملة من التركيز والنقر وشجرة إمكانية الوصول، وهي مثالية للأدراج المغلقة واللوحات الواقعة خارج الشاشة.","بعد تغيّر المسار في جهة العميل، حدّث document.title وانقل التركيز إلى عنوان h1 في الصفحة الجديدة (مع tabindex=“-1”)."],"further":[{"title":"MDN: The Dialog element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog"},{"title":"MDN: HTMLElement inert property","url":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"},{"title":"W3C APG: Dialog (Modal) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"}],"quiz":[{"q":"

يضغط مستخدم لوحة المفاتيح Enter على “Book now”، فيُشغَّل هذا الكود. أين يكون التركيز بعد ذلك؟

\n

JavaScript

bookButton.addEventListener('click', () => {\n  document.querySelector('.modal').hidden = false; // a div styled as a modal\n});

\n","options":[{"text":"ما زال على زر “Book now”، خلف النافذة","why":"صحيح. إظهار div لا ينقل شيئًا. ضغطة Tab التالية تستكمل التنقّل في الصفحة خلف الطبقة المعتمة، وقد لا يذكر قارئ الشاشة النافذة إطلاقًا."},{"text":"على أول حقل داخل النافذة، لأن النوافذ تتلقّى التركيز تلقائيًا","why":"وحده عنصر dialog الأصلي المفتوح بـ showModal() ينقل التركيز. أما الـ div الذي حُذفت منه hidden فمجرد محتوى إضافي."},{"text":"على عنصر body، لأن النقر نقل التركيز بعيدًا","why":"تفعيل الزر لا ينقل التركيز بعيدًا عنه. التركيز لا يتغيّر إلا إذا غيّره كودك."}],"answer":0},{"q":"

أيّ هذه الأشياء لا يفعله dialog.showModal() نيابةً عنك؟

","options":[{"text":"جعل المحتوى خارج النافذة inert","why":"يضع showModal() النافذة في الطبقة العليا (top layer) ويجعل بقية المستند inert، فلا يستطيع Tab الهروب إلى الصفحة خلفها."},{"text":"إغلاق النافذة حين يضغط المستخدم Escape","why":"نوافذ الحوار المشروطة (modal) تُغلق بـ Escape افتراضيًا، وتطلق حدث cancel يمكنك الاستماع إليه."},{"text":"منح النافذة اسمًا متاحًا","why":"صحيح. ما زلت تحتاج إلى تسميتها، عادةً بـ aria-labelledby تشير إلى عنوانها، لتُعلن قارئات الشاشة “Book Friday pass, dialog”."},{"text":"نقل التركيز إلى داخل النافذة","why":"يركّز showModal() على عنصر عليه autofocus، وإلا فعلى أول عنصر قابل للتركيز داخلها، وإلا فعلى النافذة نفسها."}],"answer":2},{"q":"

تنزلق قائمة الهاتف في Ticketly خارج الشاشة حين تُغلق، لكن Tab ما زال يزور روابطها الثمانية وهي غير مرئية. ما أبسط إصلاح متين؟

","options":[{"text":"أضف aria-hidden="true" إلى القائمة حين تكون مغلقة","why":"aria-hidden تُخفي المحتوى عن التقنيات المساعدة لكنها تتركه قابلًا للتركيز، فيظلّ مستخدمو لوحة المفاتيح ينتقلون إلى روابط غير مرئية، وهذه المرة دون أي إعلان."},{"text":"أضف tabindex="-1" إلى كل رابط من الروابط الثمانية","why":"يعمل هذا إلى أن يضيف أحدهم رابطًا تاسعًا، وعليك أن تتذكّر التراجع عنه عند الفتح. أما inert فتعالج الشجرة الفرعية كلها بخاصية واحدة."},{"text":"اضبط خاصية inert على القائمة ما دامت مغلقة","why":"صحيح. تُخرج inert الشجرة الفرعية كلها من ترتيب Tab وأحداث المؤشّر وشجرة إمكانية الوصول، وحذف الخاصية يعيد كل شيء."}],"answer":2},{"q":"

بعد تنقّل في جهة العميل من الصفحة الرئيسية إلى ‎"/checkout"، ماذا يجب أن يفعل الـ router في Ticketly لمستخدمي قارئ الشاشة؟

","options":[{"text":"لا شيء؛ قارئات الشاشة تكتشف تغيّرات عنوان URL تلقائيًا","why":"قارئات الشاشة تتفاعل مع تحميل الصفحات الكاملة. أما التنقّل عبر pushState فيغيّر الـ DOM بصمت، ويبقى التركيز على الرابط الذي نُقر، والذي ربما لم يعد موجودًا."},{"text":"إعادة تحميل الصفحة ليُعلنها المتصفّح","why":"هذا يهدر فوائد التوجيه في جهة العميل. وإدارة التركيز والعنوان تعطي النتيجة نفسها دون إعادة تحميل."},{"text":"نقل التركيز إلى أول رابط في ترويسة الموقع","why":"هذا يجبر المستخدم على المرور بالترويسة كلها من جديد في كل تنقّل، ولا يُعلن الصفحة التي هو فيها."},{"text":"تحديث document.title ونقل التركيز إلى عنوان h1 في صفحة الدفع، وعليه tabindex=“-1”","why":"صحيح. يسمع المستخدم العنوان الجديد، ويستكمل Tab من بداية المحتوى الجديد، ويطابق عنوان النافذة الصفحة."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"

\n

Harbour Lights: Friday

\n

Standing tickets, SAR 180 each.

\n \n Festival FAQ\n

\n\n","css":".modal { border: 0; border-radius: 12px; padding: 16px 20px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.3); }\ndiv.modal:not([hidden]) { position: fixed; inset: 10% 10% auto; background: #fff; }\n.modal::backdrop { background: rgb(20 16 40 / 0.6); }\n.modal h2 { margin-block-start: 0; }\n.modal input { display: block; margin-block: 4px 12px; font: inherit; }\n","js":"const modal = document.querySelector('#booking');\n\ndocument.querySelector('#book').addEventListener('click', () => {\n modal.hidden = false;\n});\n\ndocument.querySelector('#close').addEventListener('click', () => {\n modal.hidden = true;\n});\n"},"solution":{"html":"

\n

Harbour Lights: Friday

\n

Standing tickets, SAR 180 each.

\n \n Festival FAQ\n

\n\n","css":".modal { border: 0; border-radius: 12px; padding: 16px 20px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.3); }\ndiv.modal:not([hidden]) { position: fixed; inset: 10% 10% auto; background: #fff; }\n.modal::backdrop { background: rgb(20 16 40 / 0.6); }\n.modal h2 { margin-block-start: 0; }\n.modal input { display: block; margin-block: 4px 12px; font: inherit; }\n","js":"const modal = document.querySelector('#booking');\n\ndocument.querySelector('#book').addEventListener('click', () => {\n modal.showModal();\n});\n\ndocument.querySelector('#close').addEventListener('click', () => {\n modal.close();\n});\n"},"checks":[{"id":"named-dialog","test":"const d = $('#booking'); if (!d || d.tagName !== 'DIALOG') return false; const ids = (d.getAttribute('aria-labelledby') || '').split(/\\s+/).filter(Boolean); const viaLabelledby = ids.some((id) => document.getElementById(id)?.textContent.includes('Book Friday pass')); return viaLabelledby || /Book Friday pass/.test(d.getAttribute('aria-label') || '');"},{"id":"opens-modal","test":"const b = $('#book'); b.focus(); await click(b); const d = $('#booking'); return !!d.open && d.matches(':modal');"},{"id":"focus-inside","test":"return $('#booking').contains(document.activeElement) && document.activeElement !== document.body;"},{"id":"page-inert","test":"const inside = document.activeElement; $('#book').focus(); const escaped = document.activeElement === $('#book'); inside.focus(); return !escaped;"},{"id":"focus-returns","test":"const d = $('#booking'); if (d.tagName !== 'DIALOG' || !d.open || !d.contains(document.activeElement)) return false; await click('#close'); await tick(30); return !d.open && document.activeElement === $('#book');"}],"title":"حوّل نافذة الحجز إلى نافذة حوار حقيقية","prompt":"

نافذة الحجز في Ticketly عنصر div يظهر حين تضغط Book now. يبقى التركيز خلفها، وتبقى الصفحة التي تحتها قابلة للوصول، ولا تُبلَّغ قارئات الشاشة بأن نافذة حوار فُتحت.

\n

حوّل #booking إلى عنصر <dialog> أصلي (أبقِ الـ id) له اسم متاح مأخوذ من عنوانه “Book Friday pass”. افتحه كنافذة مشروطة (modal) من زر Book now وأغلقه من زر Close. وحين يُغلق، يجب أن يعود التركيز إلى Book now.

\n","hints":["غيّر الـ div إلى