{"id":"l-a11y-3-1","courseId":"web-accessibility","lang":"ar","kind":"lesson","summary":"اجعل كل عنصر تحكّم في Ticketly قابلًا للوصول بلوحة المفاتيح بترتيب منطقي، وأظهر مؤشّر تركيز واضحًا، وأضِف رابط تخطٍّ (skip link)، وامنع الأشرطة الثابتة من إخفاء التركيز.","html":"

ضع الفأرة في الدرج وحاول شراء تذكرة الجمعة في Ticketly. ستكتشف ثلاثة أشياء في نحو ثلاثين ثانية. مفتاح Tab يمرّ بك على أربعين رابطًا ونيّف في الترويسة والتذييل قبل أن يصل إلى المهرجان. ثم يقفز التركيز من زر السبت إلى زر الجمعة ويعود إلى الأعلى. ومعظم الوقت لا ترى أين التركيز أصلًا، لأن أحدهم كتب outline: none عام 2019 ليتخلّص من «ذلك المربع الأزرق القبيح».

\n

الوصول بلوحة المفاتيح ليس حالة نادرة. كل من يستخدم قارئ شاشة على حاسوب مكتبي يعتمد على لوحة المفاتيح، وكذلك مستخدمو أجهزة التبديل، والمصابون بالرعاش، ومن تعطّلت لوحة اللمس لديهم، والمطوّرون الذين يفضّلونها ببساطة. يشترط معيار WCAG ‏2.1.1 Keyboard ‏(A) أن يعمل كل شيء من لوحة المفاتيح، ومعيار 2.1.2 ‏(A) ألا يُحبس التركيز أبدًا.

\n

المفاتيح التي يستخدمها الناس

\n\n

العناصر الأصلية تدعم كل هذا أصلًا. ومهمّتك في الغالب ألا تكسره، وأن تلتزم بهذه الأعراف حين تبني widgets مخصّصة في درس أنماط الـ Widgets.

\n

ترتيب التركيز يتبع الـ DOM

\n

ينتقل Tab بين العناصر القابلة للتركيز بترتيب المصدر. إن وضع التخطيط المرئي زر “Add Saturday” قبل “Add Friday” لكن الكود يضعهما بالعكس، فسيبدو التركيز كأنه يقفز إلى الخلف. والإصلاح أن تضع الكود بالترتيب الذي تريد أن يقابله الناس به. واحذر من CSS الذي يعيد ترتيب العناصر بصريًا، مثل order أو flex-direction: row-reverse أو التموضع الصريح في الـ grid، لأن التركيز سيظلّ يتبع الكود (2.4.3 Focus Order).

\n

تضبط tabindex قابلية التركيز:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
القيمةالأثراستخدمها لـ
0قابل للتركيز، بترتيب الـ DOMعنصر تحكّم مخصّص مبني من عنصر غير تفاعلي
-1قابل للتركيز من السكربت فقط، لا بمفتاح Tabعناوين أو حاويات تنقل التركيز إليها
1 أو أكثريتقدّم على كل شيء آخرلا تستخدمها أبدًا
\n

اجعل التركيز مرئيًا

\n

مستخدم لوحة المفاتيح بلا مؤشّر تركيز مرئي كمستخدم الفأرة بمؤشّر غير مرئي. يشترط معيار WCAG ‏2.4.7 Focus Visible ‏(AA) وجود مؤشّر؛ ويعني معيار 1.4.11 Non-text Contrast أن تباينه يجب ألا يقلّ عن 3:1 مع ما يحيط به.

\n

الأداة الحديثة هي :focus-visible. تطبّقها المتصفّحات حين يجب أن يظهر التركيز: دائمًا عند التنقّل بلوحة المفاتيح وفي الحقول النصية، لكن عادةً لا حين يُنقر زر بالفأرة. هذا يجيب عن شكوى المصمّمة الحقيقية دون أن يؤذي أحدًا:

\n
ticketly/styles.css
:focus-visible {\n  outline: 3px solid #5b3cc4;\n  outline-offset: 2px;\n}
\n

استخدم outline لا box-shadow للحلقة. سمات التباين في Windows (وضع forced colors) تحذف الظلال لكنها تُبقي الـ outline، فالمؤشّر المبني على الظلّ وحده يختفي عند أكثر الناس حاجة إليه.

\n

روابط التخطّي والأشرطة الثابتة

\n

في ترويسة Ticketly شعار، وعشرة روابط قائمة، وحقل بحث، وقائمة للحساب: ثلاث عشرة محطة لمفتاح Tab. على مستخدم لوحة المفاتيح أن يمرّ عليها كلها بمفتاح Tab في كل صفحة. يطلب معيار WCAG ‏2.4.1 Bypass Blocks ‏(A) طريقة لتجاوز المحتوى المتكرّر، والحلّ الكلاسيكي هو رابط التخطّي (skip link): أول عنصر قابل للتركيز في الصفحة، مخفي حتى يتلقّى التركيز.

\n
HTML
<body>\n  <a class=\"skip-link\" href=\"#main\">Skip to main content</a>\n  <header>…</header>\n  <main id=\"main\">…</main>\n</body>
\n
CSS
.skip-link {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-start: 8px;\n  padding: 8px 12px;\n  background: #fff;\n  transform: translateY(-150%);\n}\n.skip-link:focus {\n  transform: none;\n}
\n

لا تُخفِه بـ display: none، فهذا يُخرجه من ترتيب Tab. نقله خارج الشاشة وإعادته عند التركيز يُبقيه قابلًا للوصول ويُظهره تمامًا حين يحتاجه مستخدم لوحة المفاتيح.

\n
\n من دون رابط تخطٍّ، تصل أول ضغطة Tab إلى الشعار وتعبر اثنتا عشرة ضغطة أخرى الترويسة قبل الوصول إلى المحتوى الرئيسي. ومع رابط التخطّي، تُظهر أول ضغطة Tab الرابط Skip to main content، وينقل Enter مباشرة إلى main.\n من دون رابط تخطٍّ\n \n \n \n \n … 13 محطة\n \n main\n مع رابط تخطٍّ\n \n Skip to main content\n \n Enter\n \n main\n
أول ضغطة Tab في Ticketly
\n

الترويسات الثابتة وأشرطة ملفات تعريف الارتباط تجلب المشكلة المعاكسة: ينتقل التركيز إلى عنصر مخفي تحتها، وهذا يخالف معيار 2.4.11 Focus Not Obscured ‏(AA). أخبر المتصفّح بمقدار ما تغطّيه الأجزاء الثابتة من الـ viewport، فيمرّر العناصر التي عليها التركيز بعيدًا عنها:

\n
CSS
html {\n  scroll-padding-block-start: 96px; /* sticky header height plus a little air */\n}
\n

أما شريط ملفات تعريف الارتباط، فالإصلاح الحقيقي ألا تتركه يطفو فوق المحتوى إلى ما لا نهاية: ضعه في تدفّق الصفحة، أو تأكّد أنه يمكن إغلاقه قبل الوصول إلى أي شيء آخر.

\n\n

صار بالإمكان عبور Ticketly من أعلاه إلى أسفله بلوحة المفاتيح. يتناول الدرس التالي الحالات الأصعب، حيث يجب على كودك أن ينقل التركيز بنفسه: نوافذ الحوار والتنقّل في التطبيقات أحادية الصفحة.

\n","toc":[{"id":"sec-1","text":"المفاتيح التي يستخدمها الناس","level":2},{"id":"sec-2","text":"ترتيب التركيز يتبع الـ DOM","level":2},{"id":"sec-3","text":"اجعل التركيز مرئيًا","level":2},{"id":"sec-4","text":"روابط التخطّي والأشرطة الثابتة","level":2}],"takeaways":["ترتيب التركيز يتبع ترتيب الـ DOM، فضع الكود بالترتيب الذي يجب أن يقابله الناس به، ولا تعاكسه بإعادة الترتيب عبر CSS.","استخدم tabindex=“0” لإضافة عنصر تحكّم مخصّص إلى ترتيب Tab، وtabindex=“-1” للعناصر التي تنقل إليها التركيز من السكربت؛ ولا تستخدم أبدًا tabindex موجبًا.","لا تحذف إطار التركيز أبدًا دون بديل؛ نسّق :focus-visible بمؤشّر لا يقلّ تباينه عن 3:1.","رابط التخطّي كأول عنصر قابل للتركيز يتيح لمستخدمي لوحة المفاتيح تجاوز التنقّل المتكرّر، وscroll-padding يمنع الأشرطة الثابتة من إخفاء التركيز."],"further":[{"title":"MDN: :focus-visible","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"},{"title":"MDN: tabindex","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex"},{"title":"W3C: Understanding 2.4.7 Focus Visible","url":"https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html"},{"title":"W3C APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"quiz":[{"q":"

بأيّ ترتيب يزور مفتاح Tab هذه الأزرار؟

\n
HTML
<button>Friday</button>\n<button tabindex=\"2\">Saturday</button>\n<button tabindex=\"1\">Sunday</button>\n<button>Weekend</button>
\n","options":[{"text":"Friday، Saturday، Sunday، Weekend","why":"هذا ترتيب الـ DOM، وهو ما تحصل عليه حين لا يكون لأي عنصر tabindex موجب. أما القيم الموجبة فتتخطّى الطابور."},{"text":"Sunday، Saturday، Friday، Weekend","why":"صحيح. العناصر ذات الـ tabindex الموجب تأتي أولًا بترتيب تصاعدي، ثم كل ما سواها بترتيب الـ DOM. ولهذا تسبّب القيم الموجبة الفوضى."},{"text":"Saturday، Sunday، Friday، Weekend","why":"قيم الـ tabindex الموجبة تُزار بترتيب تصاعدي، فالقيمة 1 ‏(Sunday) تأتي قبل 2 ‏(Saturday)."},{"text":"Friday، Weekend، Sunday، Saturday","why":"عناصر الـ tabindex الموجب تُزار قبل العناصر ذات tabindex 0، لا بعدها."}],"answer":1},{"q":"

تجد مصمّمة أن حلقة التركيز الافتراضية قبيحة. أيّ CSS هو أفضل ردّ؟

","options":[{"text":":focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }","why":"صحيح. يستبدل المؤشّر الافتراضي بمؤشّر قوي بألوان العلامة التجارية يراه مستخدمو لوحة المفاتيح، بينما لا يظهر عند نقر الأزرار بالفأرة."},{"text":"*:focus { outline: none; }","why":"هذا يحذف المؤشّر عن الجميع، فيفقد مستخدمو لوحة المفاتيح معرفة مكانهم. ويخالف معيار 2.4.7 Focus Visible."},{"text":":focus { outline: 1px dotted #ddd; }","why":"الخط الرمادي الفاتح الرفيع على صفحة بيضاء يكاد لا يُرى. المؤشّرات تحتاج إلى تباين لا يقلّ عن 3:1 مع ما يحيط بها."}],"answer":0},{"q":"

متى يجب أن يحصل عنصر على tabindex="-1"؟

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

ارتفاع الترويسة الثابتة في Ticketly ‏80px. حين يتنقّل مستخدم لوحة المفاتيح إلى الخلف صعودًا في الصفحة، تنزلق الروابط التي عليها التركيز تحتها. أيّ إصلاح يعالج معيار 2.4.11 Focus Not Obscured؟

","options":[{"text":"إعطاء الترويسة z-index: -1 حين يكون أي عنصر عليه التركيز","why":"إرسال الترويسة خلف المحتوى سيجعلها تتداخل بصريًا بطرق غريبة، ولا يُبقي التركيز في مجال الرؤية بشكل موثوق."},{"text":"إضافة html { scroll-padding-block-start: 96px; } ليمرّر المتصفّح العناصر التي عليها التركيز بعيدًا عن الترويسة","why":"صحيح. يخبر scroll-padding المتصفّح بالجزء المغطّى من الـ viewport، فيترك التمرير مساحة للترويسة الثابتة."},{"text":"إضافة aria-hidden="true" إلى الترويسة","why":"aria-hidden تؤثّر في التقنيات المساعدة فقط. ستظلّ الترويسة تغطّي الرابط الذي عليه التركيز بصريًا، وستختفي روابطها من الشجرة."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n Ticketly\n \n
\n
\n

Harbour Lights 2026

\n
\n \n \n \n
\n
","css":".site-header { display: flex; gap: 16px; align-items: center; }\nnav { display: flex; gap: 12px; }\n.passes { display: flex; flex-wrap: wrap; gap: 8px; }\nbutton { font: inherit; padding: 8px 14px; border: 0; border-radius: 8px; background: #5b3cc4; color: #fff; }\n\n/* \"Remove the ugly blue box\" (2019) */\n*:focus { outline: none; }\n","js":""},"solution":{"html":"Skip to main content\n
\n Ticketly\n \n
\n
\n

Harbour Lights 2026

\n
\n \n \n \n
\n
","css":".site-header { display: flex; gap: 16px; align-items: center; }\nnav { display: flex; gap: 12px; }\n.passes { display: flex; flex-wrap: wrap; gap: 8px; }\nbutton { font: inherit; padding: 8px 14px; border: 0; border-radius: 8px; background: #5b3cc4; color: #fff; }\n\n:focus-visible {\n outline: 3px solid #1b1830;\n outline-offset: 2px;\n}\n\n.skip-link {\n position: absolute;\n inset-block-start: 8px;\n inset-inline-start: 8px;\n padding: 8px 12px;\n background: #fff;\n color: #1b1830;\n transform: translateY(-150%);\n}\n.skip-link:focus {\n transform: none;\n}\n","js":""},"checks":[{"id":"no-positive","test":"return $$('[tabindex]').every((el) => Number(el.getAttribute('tabindex')) <= 0);"},{"id":"skip-first","test":"const focusable = $$('a[href], button, input, select, textarea, [tabindex]').filter((el) => el.tabIndex >= 0 && !el.disabled && getComputedStyle(el).display !== 'none' && getComputedStyle(el).visibility !== 'hidden'); const first = focusable[0]; return !!first && first.tagName === 'A' && /skip/i.test(first.textContent) && first.getAttribute('href') === '#' + $('main').id;"},{"id":"skip-visible","test":"const link = $$('a').find((a) => /skip/i.test(a.textContent)); if (!link) return false; link.focus(); await tick(50); const r = link.getBoundingClientRect(); return document.activeElement === link && r.width > 1 && r.height > 1 && r.bottom > 0 && r.top < window.innerHeight;"},{"id":"focus-ring","test":"const ok = (el) => { el.focus(); const cs = getComputedStyle(el); const outline = cs.outlineStyle !== 'none' && parseFloat(cs.outlineWidth) >= 2; return outline; }; const items = [...$$('main button'), ...$$('nav a')]; const result = items.every(ok); document.activeElement.blur(); return result;"}],"title":"اجعل Ticketly صديقًا للوحة المفاتيح","prompt":"

ثلاث مشكلات في لوحة المفاتيح على صفحة صغيرة واحدة:

\n
    \n
  1. أزرار التذاكر تستخدم قيم tabindex موجبة، فيقفز ترتيب التركيز هنا وهناك. احذفها؛ فترتيب الـ DOM صحيح أصلًا.
    2. \n
  2. قاعدة من عام 2019 تُخفي كل مؤشّرات التركيز. استبدلها بـ outline مرئي عبر :focus-visible لا يقلّ عرضه عن 2px.
    3. \n
  3. لا توجد طريقة لتجاوز الترويسة. أضِف رابط تخطٍّ يكون أول عنصر قابل للتركيز، نصه يحتوي “Skip” وhref="#main". يمكن أن يكون مخفيًا خارج الشاشة، لكن يجب أن يكون مرئيًا حين يكون عليه التركيز (لا تستخدم display: none).
    4. \n
\n","hints":["احذف خصائص tabindex من الأزرار بالكامل.","استبدل *:focus { outline: none; } بـ :focus-visible { outline: 3px solid …; outline-offset: 2px; }","ضع Skip to main content قبل الترويسة، وارفعه بـ transform: translateY(-150%)، وأعِد الـ transform إلى وضعه في ‎.skip-link:focus."],"explanation":"

من دون قيم tabindex موجبة، يتبع Tab الكود: رابط التخطّي، ثم الشعار، ثم القائمة، ثم التذاكر الثلاث بترتيب ظهورها. صارت قاعدة التركيز تضيف مؤشّرًا بدلًا من أن تحذفه، و:focus-visible تمنعه من الوميض عند النقر بالفأرة. رابط التخطّي هو أول محطة لـ Tab؛ ويبقى قابلًا للوصول لأنه يُنقل خارج الشاشة بدلًا من حذفه، وينزلق إلى مجال الرؤية عند التركيز فيراه مستخدمو لوحة المفاتيح المبصرون أيضًا. وضغط Enter عليه ينقل التركيز إلى #main، متجاوزًا الترويسة.

\n","checkLabels":{"no-positive":"لا يوجد عنصر له tabindex موجب","skip-first":"أول عنصر قابل للتركيز رابط تخطٍّ يشير إلى ‎#main","skip-visible":"رابط التخطّي مرئي على الشاشة حين يكون عليه التركيز","focus-ring":"الروابط والأزرار تُظهر outline لا يقلّ عرضه عن 2px عند التركيز"}},"words":737,"readMinutes":4}