{"id":"l-a11y-4-2","courseId":"web-accessibility","lang":"ar","kind":"lesson","summary":"حافظ على قابلية استخدام Ticketly عند تكبير 400% ومع تباعد نصي مخصّص، واضبط أحجام أهداف اللمس كما ينبغي، واحترم المستخدمين الذين يحتاجون إلى حركة أقل باستخدام prefers-reduced-motion وأزرار الإيقاف المؤقت.","html":"

تقرأ مها Ticketly بتكبير 400% على حاسوب محمول بشاشة 13 بوصة. عند هذا التكبير، يصبح عرض نافذة متصفّحها فعليًا 320 بكسل CSS. بطاقات المهرجان، المصفوفة في ثلاثة أعمدة ثابتة بعرض 320px، تجبرها على التمرير أفقيًا مع كل سطر نص، وهذا يعني عند ذلك التكبير أنها تفقد موضعها باستمرار. وفي الوقت نفسه يمرّر الشريط المتحرّك في الصفحة الرئيسية أسماء الفنانين إلى ما لا نهاية، فيصاب زميلها توم، الذي يعاني اضطرابًا دهليزيًا (vestibular disorder) يؤثّر في التوازن، بصداع خلال دقيقة.

\n

يتناول هذا الدرس ما يحدث حين يغيّر الناس حجم صفحتك، وحين تتحرّك صفحتك من تلقاء نفسها.

\n

التكبير وإعادة التدفّق

\n

ثلاثة معايير تعمل معًا:

\n\n

إن كنت تبني بأسلوب متجاوب، فقد قطعت معظم الطريق. والمتّهمان المعتادان هما العروض الثابتة والارتفاعات الثابتة. شبكة البطاقات في Ticketly:

\n
before.css
.cards {\n  display: grid;\n  grid-template-columns: repeat(3, 320px);\n  gap: 16px;\n}\n.card h3 {\n  height: 24px;      /* clips the title when text spacing grows */\n  font-size: 18px;   /* doesn't follow the user's default font size */\n}
\n
after.css
.cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));\n  gap: 1rem;\n}\n.card h3 {\n  font-size: 1.125rem;\n}
\n

الجزء min(100%, 16rem) مهم: في viewport عرضه 320px قد يظلّ عمود بعرض 16rem ‏(256px يُضاف إليها الحشو) يفيض، وmin() تسمح للعمود بالانكماش إلى عرض الحاوية. وضبط النص بوحدة rem يعني أنه يكبر حين يضبط المستخدم حجم خط افتراضيًا أكبر في متصفّحه، وهي حالة لا يغطّيها التكبير وحده.

\n\n

لاختبار إعادة التدفّق، اضبط نافذة المتصفّح على عرض 1280px وكبّر إلى 400%، أو استخدم الوضع المتجاوب في أدوات المطوّر بعرض 320px. مرّر عموديًا عبر الصفحة كلها. أي شريط تمرير أفقي، أو نص متداخل، أو زر مقطوع، خطأ.

\n

حجم الهدف من جديد

\n

قابلت معيار 2.5.8 Target Size (Minimum) في درس WCAG 2.2 ومبادئ POUR والقانون: أهداف المؤشّر لا تقلّ عن 24 × 24 بكسل CSS، أو تكون حول الأهداف الأصغر مسافة كافية. كان عدّاد الكمية في Ticketly يستخدم أزرار أيقونات بحجم 16px متلاصقة. والإصلاح بالحشو، لا بتكبير الأيقونات:

\n
CSS
.stepper button {\n  min-inline-size: 2.75rem; /* 44px, comfortably above the 24px minimum */\n  min-block-size: 2.75rem;\n}
\n

واطمح إلى ما هو أعلى من الحدّ الأدنى للأفعال الرئيسية على شاشات اللمس. إرشادات منصّتي Apple وGoogle تقترح نحو 44 إلى 48 بكسل، وسيشكرك المصابون بالرعاش.

\n

الحركة: أوقفها مؤقتًا، واحترم التفضيل

\n

الحركة تسبّب مشكلتين مختلفتين. المحتوى الذي يتحرّك من تلقاء نفسه ينافس على الانتباه، وهذا عائق حقيقي لذوي اضطرابات الانتباه ولأي شخص يقرأ ببطء. والحركة الكبيرة، مثل الـ parallax أو الانتقالات المكبِّرة أو اللوحات المنزلقة، قد تثير الدوار والغثيان لدى المصابين باضطرابات دهليزية.

\n

تعالج WCAG المشكلة الأولى بمعيار 2.2.2 Pause, Stop, Hide ‏(A): كل ما يبدأ تلقائيًا، ويتحرّك (أو يومض أو يتمرّر) أكثر من خمس ثوانٍ، ويظهر إلى جانب محتوى آخر، يحتاج إلى طريقة لإيقافه مؤقتًا أو إيقافه أو إخفائه. ويمنع معيار 2.3.1 Three Flashes or Below Threshold ‏(A) المحتوى الذي يومض أكثر من ثلاث مرات في أي ثانية واحدة، إلا إن كانت الومضات صغيرة وخافتة بما يكفي لتبقى دون عتبات الوميض، لأن الوميض قد يثير نوبات صرع.

\n

وللمشكلة الثانية، تتيح أنظمة التشغيل للمستخدمين طلب تقليل الحركة (في macOS: ‏Accessibility ثم Display ثم Reduce motion؛ وفي Windows: ‏Accessibility ثم Visual effects ثم إيقاف Animation effects)، ويستطيع CSS قراءة هذا الإعداد:

\n
ticketly/motion.css
.marquee__track {\n  animation: scroll-names 20s linear infinite;\n}\n.marquee--paused .marquee__track {\n  animation-play-state: paused;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .marquee__track {\n    animation: none;\n  }\n  .card {\n    transition: opacity 0.2s; /* a fade instead of a slide */\n  }\n}
\n
HTML
<button type=\"button\" class=\"marquee-toggle\" aria-pressed=\"false\">Pause animation</button>
\n

زر الإيقاف المؤقت ما زال ضروريًا: كثيرون ممّن تزعجهم الحركة لا يجدون إعداد النظام أبدًا، ومعيار 2.2.2 يشترط عنصر تحكّم في الصفحة. و«تقليل» الحركة لا يعني بالضرورة «انعدامها». التلاشي القصير أو تغيّر اللون نادرًا ما يسبّب مشكلة؛ الحركة الكبيرة عبر الشاشة هي التي تسبّبها.

\n
\n يمرّ إعداد تقليل الحركة في نظام التشغيل عبر الـ media query ‏prefers-reduced-motion ليحذف الحركات الكبيرة افتراضيًا، بينما يتيح زر إيقاف مؤقت في الصفحة لأي شخص إيقاف الشريط المتحرّك؛ ومعًا يغطّيان من ضبطوا التفضيل ومن لم يضبطوه.\n \n النظام: تقليل الحركة\n \n \n prefers-reduced-motion\n \n زر الإيقاف المؤقت\n \n \n animation-play-state\n \n \n \n صفحة هادئة\n
طبقتان للتحكّم في الحركة
\n

الحركات التي تديرها JavaScript تحتاج إلى الفحص نفسه. تخبرك window.matchMedia('(prefers-reduced-motion: reduce)').matches بالتفضيل الحالي، ويمكنك الاستماع إلى حدث change الخاص بها لتستجيب إن غيّره المستخدم والصفحة مفتوحة.

\n\n

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

\n","toc":[{"id":"sec-1","text":"التكبير وإعادة التدفّق","level":2},{"id":"sec-2","text":"حجم الهدف من جديد","level":2},{"id":"sec-3","text":"الحركة: أوقفها مؤقتًا، واحترم التفضيل","level":2}],"takeaways":["يجب أن يُعاد تدفّق المحتوى داخل viewport عرضه 320 بكسل CSS، وهو عرض نافذة بعرض 1280px عند تكبير 400%، دون تمرير أفقي.","اضبط أحجام النصوص بوحدة rem، وتجنّب الارتفاعات الثابتة لحاويات النص، ولا تعطّل أبدًا التكبير باللمس (pinch zoom) في وسم viewport.","كل ما يتحرّك من تلقاء نفسه لأكثر من خمس ثوانٍ يحتاج إلى طريقة لإيقافه مؤقتًا أو إيقافه أو إخفائه (2.2.2).","ضع الحركة غير الضرورية داخل فحص prefers-reduced-motion، واستبدل الحركة الكبيرة بتلاشٍ أو بلا شيء."],"further":[{"title":"W3C: Understanding 1.4.10 Reflow","url":"https://www.w3.org/WAI/WCAG22/Understanding/reflow.html"},{"title":"MDN: prefers-reduced-motion","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"},{"title":"W3C: Understanding 2.2.2 Pause, Stop, Hide","url":"https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html"},{"title":"W3C: Understanding 1.4.12 Text Spacing","url":"https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html"}],"quiz":[{"q":"

لماذا يُختبر معيار 1.4.10 Reflow عند عرض 320 بكسل CSS؟

","options":[{"text":"لأنه عرض أصغر هاتف ما زال يُباع","why":"الهواتف فائدة جانبية. الرقم مصدره التكبير على أجهزة سطح المكتب، لا قائمة بالأجهزة."},{"text":"لأن نافذة متصفّح بعرض 1280px مكبّرة إلى 400% يكون الـ viewport فيها 320 بكسل CSS","why":"صحيح. ضعيف البصر الذي يستخدم تكبير 400% على حاسوب محمول يحصل على التخطيط نفسه الذي يحصل عليه هاتف ضيّق، فالتخطيط المتجاوب يخدم الاثنين."},{"text":"لأنه العرض الأدنى الافتراضي في CSS grid","why":"ليس في CSS grid قيمة افتراضية كهذه. القيمة مصدرها حساب التكبير في وثيقة Understanding."}],"answer":1},{"q":"

أيّ وسم viewport يخالف معيار WCAG ‏1.4.4 Resize Text؟

\n
HTML
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">
\n","options":[{"text":"ينجح، لأنه يضبط مقياس البداية بشكل صحيح","why":"القيمتان الأوليان سليمتان. أما الأخيرتان فتمنعان الناس من التكبير باللمس على الهاتف، وهذا بالضبط ما يعتمد عليه ضعاف البصر."},{"text":"يفشل على متصفّحات سطح المكتب فقط","why":"متصفّحات سطح المكتب تتجاهل وسم viewport. مستخدمو الهواتف هم من يفقدون القدرة على التكبير."},{"text":"يفشل، لأن maximum-scale=1 وuser-scalable=no تمنعان التكبير باللمس","why":"صحيح. احذفهما كلتيهما. بعض متصفّحات الهاتف تتجاوزهما لأسباب تتعلّق بإمكانية الوصول، لكن لا يمكنك الاعتماد على ذلك."}],"answer":2},{"q":"

يمرّر الشريط الرئيسي في Ticketly أسماء الفنانين تلقائيًا في شريط متحرّك (marquee) إلى ما لا نهاية. ماذا تشترط WCAG 2.2 في المستوى A؟

","options":[{"text":"عنصر تحكّم مرئيًا لإيقافه مؤقتًا أو إيقافه أو إخفائه، لأنه يتحرّك أكثر من خمس ثوانٍ","why":"صحيح. ينطبق معيار 2.2.2 Pause, Stop, Hide على المحتوى المتحرّك الذي يبدأ تلقائيًا ويستمر أكثر من خمس ثوانٍ ويقع إلى جانب محتوى آخر."},{"text":"لا شيء، ما دام يتوقّف حين يكون prefers-reduced-motion مضبوطًا","why":"احترام هذا التفضيل ممارسة جيدة، لكن كثيرين ممّن تشتّتهم الحركة لا يضبطونه أبدًا. ومعيار 2.2.2 يشترط عنصر تحكّم في الصفحة."},{"text":"live region عبر aria-live لتُعلن قارئات الشاشة كل اسم جديد","why":"هذا سيُغرق مستخدمي قارئ الشاشة بالإعلانات. المشكلة في الحركة نفسها، لا في غياب الإعلانات."}],"answer":0},{"q":"

أيّ CSS يحترم إعداد تقليل الحركة لدى المستخدم في البطاقات المنزلقة في Ticketly؟

","options":[{"text":"@media (prefers-reduced-motion: no-preference) { .card { transition: none; } }","why":"هذا يحذف الحركة عن المستخدمين الذين لم يطلبوا حركة أقل، ويُبقيها لمن طلبوا ذلك. الشرط معكوس."},{"text":".card { transition: transform 0.4s; } @media (prefers-reduced-motion: reduce) { .card { transition: opacity 0.2s; } }","why":"صحيح. الوضع الافتراضي يُبقي الانزلاق، والـ media query تستبدله بتلاشٍ قصير حين يطلب المستخدم تقليل الحركة."},{"text":"@media (motion: reduce) { .card { transition: none; } }","why":"لا توجد media feature اسمها motion. اسمها prefers-reduced-motion."},{"text":".card[aria-reduced-motion] { transition: none; }","why":"لا توجد خاصية ARIA كهذه. يضبط المستخدمون التفضيل في نظام التشغيل، ويقرؤه CSS عبر prefers-reduced-motion."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
Nour Quartet · The Saltmarsh Band · Layla & the Tides · Harbour Brass · DJ Marwa
\n
\n\n
\n
\n

Friday pass

\n

SAR 180

\n
\n \n 1\n \n
\n
\n

Saturday pass

SAR 180

\n

Weekend pass

SAR 320

\n
","css":".marquee { overflow: hidden; background: #f1eefb; padding: 8px 0; margin-block-end: 16px; }\n.marquee__track { white-space: nowrap; animation: scroll-names 12s linear infinite; }\n@keyframes scroll-names { from { transform: translateX(100%); } to { transform: translateX(-100%); } }\n\n.cards { display: grid; grid-template-columns: repeat(3, 320px); gap: 16px; }\n.card { border: 1px solid #c9c4dc; border-radius: 12px; padding: 12px 16px; }\n.card h3 { margin: 0; font-size: 18px; }\n.stepper { display: flex; align-items: center; gap: 0; }\n.stepper button { width: 16px; height: 16px; padding: 0; font-size: 12px; line-height: 1; border: 1px solid #5b3cc4; background: #fff; }\n.stepper span { padding-inline: 8px; }\n","js":""},"solution":{"html":"
\n \n
Nour Quartet · The Saltmarsh Band · Layla & the Tides · Harbour Brass · DJ Marwa
\n
\n\n
\n
\n

Friday pass

\n

SAR 180

\n
\n \n 1\n \n
\n
\n

Saturday pass

SAR 180

\n

Weekend pass

SAR 320

\n
","css":".marquee { overflow: hidden; background: #f1eefb; padding: 8px 0; margin-block-end: 16px; }\n.marquee__track { white-space: nowrap; animation: scroll-names 12s linear infinite; }\n.marquee--paused .marquee__track { animation-play-state: paused; }\n@keyframes scroll-names { from { transform: translateX(100%); } to { transform: translateX(-100%); } }\n\n@media (prefers-reduced-motion: reduce) {\n .marquee__track { animation: none; }\n}\n\n.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }\n.card { border: 1px solid #c9c4dc; border-radius: 12px; padding: 12px 16px; }\n.card h3 { margin: 0; font-size: 1.125rem; }\n.stepper { display: flex; align-items: center; gap: 4px; }\n.stepper button { min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0; font-size: 1.25rem; line-height: 1; border: 1px solid #5b3cc4; background: #fff; }\n.stepper span { padding-inline: 8px; }\n","js":"const marquee = document.querySelector('.marquee');\nconst toggle = document.querySelector('.marquee-toggle');\n\ntoggle.addEventListener('click', () => {\n const paused = toggle.getAttribute('aria-pressed') === 'true';\n toggle.setAttribute('aria-pressed', String(!paused));\n marquee.classList.toggle('marquee--paused', !paused);\n});\n"},"checks":[{"id":"reduced-motion","test":"const track = $('.marquee__track'); const rules = []; const walk = (list) => { for (const r of list) { if (r.media && r.conditionText && /prefers-reduced-motion\\s*:\\s*reduce/.test(r.conditionText)) rules.push(...r.cssRules); else if (r.cssRules) walk(r.cssRules); } }; for (const s of document.styleSheets) walk(s.cssRules); return rules.some((r) => r.selectorText && track.matches(r.selectorText) && (r.style.animationName === 'none' || /(^|\\s)none(\\s|$)/.test(r.style.animation) || r.style.animationPlayState === 'paused' || /^0(s|ms)?$/.test(r.style.animationDuration) || r.style.animationIterationCount === '1'));"},{"id":"pause-control","test":"const btn = $$('button').find((b) => /pause|stop/i.test(b.textContent + ' ' + (b.getAttribute('aria-label') || ''))); if (!btn) return false; const track = $('.marquee__track'); if (getComputedStyle(track).animationPlayState === 'paused') return false; await click(btn); const cs = getComputedStyle(track); return cs.animationPlayState === 'paused' || cs.animationName === 'none';"},{"id":"reflow","test":"const doc = document.documentElement; const cards = $('.cards'); return doc.scrollWidth <= doc.clientWidth && cards.scrollWidth <= cards.clientWidth + 1;"},{"id":"target-size","test":"const bs = $$('.stepper button'); return bs.length === 2 && bs.every((b) => { const r = b.getBoundingClientRect(); return r.width >= 24 && r.height >= 24; });"}],"title":"هدّئ الصفحة الرئيسية وامنحها مرونة","prompt":"

تمرّر الصفحة الرئيسية في Ticketly أسماء الفنانين إلى ما لا نهاية، وتفرض شبكة من ثلاثة أعمدة لبطاقات ثابتة العرض 320px، وتستخدم أزرار عدّاد بحجم 16px. أصلحها:

\n
    \n
  1. أضِف كتلة @media (prefers-reduced-motion: reduce) توقف حركة .marquee__track.
    2. \n
  2. أضِف زرًّا يحتوي نصه “Pause” يوقف الشريط المتحرّك مؤقتًا عند نقره (مثلًا باستخدام animation-play-state: paused).
    3. \n
  3. اجعل شبكة .cards يُعاد تدفّقها فلا يتمرّر شيء أفقيًا في viewport ضيّق (عرض المعاينة نحو 300px فقط).
    4. \n
  4. اجعل زرّي .stepper كليهما لا يقلّان عن 24 × 24 بكسل CSS.
    5. \n
\n","hints":["داخل الـ media query: ‎.marquee__track { animation: none; }","بدّل كلاسًا مثل ‎.marquee–paused على القسم عند نقر الزر، واضبط animation-play-state: paused على المسار داخله. وaria-pressed تجعله زر تبديل حقيقيًا.","grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) تسمح للشبكة بالنزول إلى عمود واحد. ولزرّي العدّاد، min-inline-size وmin-block-size بقيمة 2.75rem تعطيان 44px مريحة."],"explanation":"

تحذف الـ media query حركة الشريط عن كل من طلب من نظام تشغيله تقليل الحركة، ويغطّي زر الإيقاف المؤقت كل من سواهم، وهذا ما يشترطه معيار 2.2.2 Pause, Stop, Hide. وتسمح auto-fit مع minmax(min(100%, 16rem), 1fr) للشبكة بالعودة إلى عمود واحد، فلا يحتاج تكبير 400% (أو هاتف) إلى تمرير أفقي أبدًا. ويكبر زرّا العدّاد إلى 44px، أعلى بكثير من حدّ 24px في معيار 2.5.8، دون تكبير الأيقونات نفسها.

\n","checkLabels":{"reduced-motion":"كتلة prefers-reduced-motion: reduce توقف حركة الشريط المتحرّك","pause-control":"زر Pause يوقف الشريط المتحرّك مؤقتًا","reflow":"لا تتمرّر الصفحة ولا شبكة البطاقات أفقيًا","target-size":"زرّا العدّاد كلاهما لا يقلّان عن 24 × 24 بكسل"}},"words":724,"readMinutes":4}