Friday pass
\nSAR 180, standing.
\nAdd to basket
\n Remove one\n See the Friday line-up\nيبدو عنصر “Add to basket” في Ticketly كأنه زر: زوايا مستديرة، ولون العلامة التجارية، ومؤشّر يد عند التمرير فوقه. لكنه div عليه onclick. انقره بالفأرة فيعمل بإتقان، ولهذا بالضبط لم ينتبه أحد في الفريق الأصلي. اضغط Tab فيقفز التركيز متجاوزًا إياه. يقرؤه قارئ شاشة سمير كنص عادي. ومستخدم جهاز التبديل لا يستطيع الوصول إليه أصلًا.
الاختيار بين عنصري التحكّم الأصليين يعود إلى سؤال واحد: هل يأخذ المستخدم إلى مكان ما؟
\n<a href="…">) ينقلك: إلى صفحة أخرى، أو جزء آخر من هذه الصفحة (#lineup)، أو ملف، أو عنوان بريد إلكتروني. تُعلنه قارئات الشاشة على أنه “link”. ويتوقّع المستخدمون أن يفتحوه في تبويب جديد، وأن ينسخوا عنوانه، وأن يروه في سجلّ التصفّح. ويُفعَّل بمفتاح Enter.<button>) ينفّذ فعلًا في الصفحة الحالية: إضافة إلى السلة، أو فتح نافذة حوار، أو إرسال نموذج، أو تشغيل فلتر وإيقافه. تُعلنه قارئات الشاشة على أنه “button”. ويُفعَّل بمفتاحي Enter وSpace.التنسيق لا علاقة له بالاختيار. يمكن أن يبدو الرابط كزر دعوة كبير، ويمكن أن يبدو الزر كرابط نصي؛ CSS يتولّى المظهر، والعنصر يتولّى السلوك.
\nلتفهم لماذا يتفوّق العنصر الأصلي، عُدّ ما ينقص الـ div. هذا الحدّ الأدنى لإعادة بناء زر يدويًا:
<div class=\"btn\" role=\"button\" tabindex=\"0\">Add to basket</div>const fake = document.querySelector('.btn');\nfake.addEventListener('click', addToBasket);\nfake.addEventListener('keydown', (event) => {\n if (event.key === 'Enter') addToBasket();\n if (event.key === ' ') event.preventDefault(); // stop the page scrolling\n});\nfake.addEventListener('keyup', (event) => {\n if (event.key === ' ') addToBasket(); // native buttons fire on Space release\n});هذا دور، وتركيز، وEnter، وSpace، ومنع للتمرير، ومع ذلك ما زالت تنقصه حالة التعطيل، وإرسال النموذج، والطريقة التي تنسّق بها سمات التباين في Windows (وضع forced colors) الأزرار. قارن ذلك بـ:
\n<button type=\"button\" class=\"btn\" onclick=\"addToBasket()\">Add to basket</button>عنصر واحد، وكل سلوك صحيح في كل متصفّح وكل قارئ شاشة. هذا هو النمط الذي ستراه على طول الدورة: HTML الأصلي أولًا، لأن المتصفّح أنجز العمل الصعب سلفًا.
\n\nداخل <form>، يكون <button> افتراضيًا type="submit". في صفحة الدفع في Ticketly زر “Apply promo code” كان يُرسل النموذج كله مرة بعد مرة. والإصلاح خاصية واحدة:
<button type=\"button\" onclick=\"applyPromo()\">Apply promo code</button>الخاصية disabled تُخرج الزر من ترتيب التنقّل بمفتاح Tab، فيتخطّاه مستخدمو لوحة المفاتيح وهم يتنقّلون في النموذج، ولا يُخبَر أحد لماذا هو غير متاح. صحيح أن قارئ الشاشة في وضع التصفّح (browse mode) يجده ويُعلنه “unavailable”، لكن دون أي سبب. لزر “Pay now” الذي ينتظر بطاقة صالحة، فكّر في إبقائه مفعّلًا وشرح المشكلة حين يُضغط، وهو ما ستبنيه في درس نماذج سهلة الوصول.
كثيرًا ما يستدعي مستخدمو قارئ الشاشة قائمة بكل الروابط أو الأزرار في الصفحة، ومستخدمو التحكّم الصوتي ينطقون النص المرئي لينقروه. “Read more” و"Click here" و"Details" بلا معنى في تلك القائمة. يطلب معيار WCAG 2.4.4 أن يكون غرض الرابط واضحًا من نصه، أو من نصه مع الجملة أو عنصر القائمة المحيط به. واطمح إلى ما هو أعلى من الحدّ الأدنى: اكتب “Friday line-up and set times” لا “Read more”. وإن أصرّ التصميم على نص مرئي قصير، فستتعلّم في درس الأسماء والأوصاف المتاحة كيف توسّع الاسم دون أن تكسر التحكّم الصوتي.
\nوعادة أخرى مع الروابط: إن كان الرابط يفتح تبويبًا جديدًا أو يُنزّل ملفًا، فقل ذلك في نصه، مثل “Venue guide (PDF, 2 MB)” أو “Seating plan (opens in a new tab)”. التبويب الجديد غير المتوقّع يكسر زر الرجوع لمستخدمي قارئ الشاشة وبرامج التكبير، الذين كثيرًا ما لا يلاحظون أن النافذة تغيّرت فيتساءلون لماذا لا يستطيعون العودة.
\n\nالأزرار والروابط الحقيقية تُصلح عناصر التحكّم التي تفعل شيئًا. وبعدها تأتي العناصر التي تجمع المعلومات، والمكان الذي تخسر فيه معظم المواقع غير سهلة الوصول عملاءها: النماذج.
\n","toc":[{"id":"sec-1","text":"الروابط تنقلك، والأزرار تفعل","level":2},{"id":"sec-2","text":"ما الذي ينقص الـ div القابل للنقر","level":2},{"id":"sec-3","text":"الأزرار في النماذج، والأزرار المعطّلة","level":2},{"id":"sec-4","text":"نص مفهوم وحده","level":2}],"takeaways":["الرابط يأخذ المستخدم إلى مكان ما (عنوان URL جديد أو جزء من الصفحة)؛ أما الزر فيفعل شيئًا في الصفحة الحالية.","الأزرار الأصلية قابلة للتركيز، وتُعلَن على أنها أزرار، وتُفعَّل بمفتاحي Enter وSpace، وكل ذلك مجانًا.","الـ div الذي عليه معالج نقر ليس له دور ولا تركيز ولا دعم للوحة المفاتيح؛ وإعادة بناء ذلك يدويًا تتطلّب أربعة إصلاحات منفصلة ويسهل أن تخطئ فيها.","داخل النماذج، أعطِ الأزرار التي لا تُرسل النموذج type=“button”، واكتب نصوصًا للروابط والأزرار تبقى مفهومة خارج سياقها."],"further":[{"title":"MDN: The Button element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button"},{"title":"MDN: The Anchor element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"},{"title":"W3C: Understanding 2.4.4 Link Purpose (In Context)","url":"https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html"}],"quiz":[{"q":"أيّ هذه العناصر يجب أن يكون رابطًا لا زرًّا؟
","options":[{"text":"“Add to basket”، الذي يحدّث عدّادًا في الصفحة","why":"هذا يغيّر الحالة في الصفحة الحالية دون انتقال، فهو زر."},{"text":"“Show more dates”، الذي يوسّع قائمة مخفية","why":"توسيع المحتوى في مكانه فعلٌ، وهذا يجعله زرًّا (زر disclosure، وسنتناوله لاحقًا في الدورة)."},{"text":"“Friday line-up”، الذي ينتقل إلى/events/friday","why":"صحيح. إنه يأخذ المستخدم إلى عنوان URL جديد، فيجب أن يكون عنصر a له href. وبذلك يستطيع المستخدمون فتحه في تبويب جديد أو نسخ عنوانه."}],"answer":2},{"q":"«أصلح» أحد المطوّرين هذا الزر المزيّف. ما الذي ما زال ناقصًا؟
\n<div role=\"button\" tabindex=\"0\" onclick=\"addToBasket()\">Add to basket</div>داخل نموذج الدفع في Ticketly، يُرسل زر «طبّق رمز الخصم» النموذج كله ويعرض «رقم البطاقة مطلوب». لماذا؟
","options":[{"text":"الزر داخل النموذج يكون افتراضيًا type=“submit”","why":"صحيح. أضفtype="button" إلى الأزرار التي تشغّل JavaScript بدلًا من إرسال النموذج."},{"text":"الزر يحتاج إلى خاصية aria-controls تشير إلى الحقل","why":"الخاصية aria-controls تصف علاقة للتقنيات المساعدة فقط؛ ولا تغيّر أبدًا ما يفعله الزر."},{"text":"لا يمكن استخدام الأزرار داخل النماذج، فيجب أن يكون رابطًا","why":"الأزرار هي عناصر التحكّم الطبيعية داخل النماذج. والرابط سيكون الدور الخاطئ لفعلٍ ما."}],"answer":0},{"q":"يستدعي مستخدم قارئ شاشة قائمة الروابط في Ticketly فيسمع “Read more, Read more, Read more”. ما أفضل إصلاح؟
","options":[{"text":"أضفtitle="Read more about Friday" إلى كل رابط","why":"لا تُعلَن الـ title بشكل موثوق، وهي غير مرئية لمستخدمي لوحة المفاتيح واللمس، فهي إصلاح ضعيف."},{"text":"احذف الروابط واعتمد على العناوين بدلًا منها","why":"الروابط ما زالت مفيدة. المشكلة أن نصّها لا يحدّد وجهتها."},{"text":"اجعل نص الرابط يقول إلى أين يذهب، مثل “Friday line-up and set times”","why":"صحيح. نص الرابط الوصفي يعمل في قائمة الروابط، ولمستخدمي التحكّم الصوتي، وللمبصرين الذين يتصفّحون الصفحة بسرعة."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Basket: 0 tickets
\nSAR 180, standing.
\nNour Quartet, The Saltmarsh Band.
","css":".pass { border: 1px solid #c9c4dc; border-radius: 12px; padding: 12px 16px; display: grid; gap: 8px; justify-items: start; }\n.pass h2 { margin: 0; font-size: 1.2rem; }\n.pass p { margin: 0; }\n.btn { background: #5b3cc4; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font: inherit; cursor: pointer; }\n.text-btn { background: none; border: 0; padding: 0; font: inherit; color: #5b3cc4; text-decoration: underline; cursor: pointer; }\n.link { color: #5b3cc4; text-decoration: underline; cursor: pointer; }\n","js":"let count = 0;\nfunction addToBasket() {\n count += 1;\n document.querySelector('#basket-count').textContent = String(count);\n}\nfunction removeFromBasket() {\n count = Math.max(0, count - 1);\n document.querySelector('#basket-count').textContent = String(count);\n}\n"},"solution":{"html":"Basket: 0 tickets
\nSAR 180, standing.
\n \n \n See the Friday line-up\nNour Quartet, The Saltmarsh Band.
","css":".pass { border: 1px solid #c9c4dc; border-radius: 12px; padding: 12px 16px; display: grid; gap: 8px; justify-items: start; }\n.pass h2 { margin: 0; font-size: 1.2rem; }\n.pass p { margin: 0; }\n.btn { background: #5b3cc4; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font: inherit; cursor: pointer; }\n.text-btn { background: none; border: 0; padding: 0; font: inherit; color: #5b3cc4; text-decoration: underline; cursor: pointer; }\n.link { color: #5b3cc4; text-decoration: underline; cursor: pointer; }\n","js":"let count = 0;\nfunction addToBasket() {\n count += 1;\n document.querySelector('#basket-count').textContent = String(count);\n}\nfunction removeFromBasket() {\n count = Math.max(0, count - 1);\n document.querySelector('#basket-count').textContent = String(count);\n}\n"},"checks":[{"id":"add-is-button","test":"const find = (t) => $$('body *').filter((el) => el.children.length === 0 || el.matches('button, a')).find((el) => el.textContent.trim() === t); const el = find('Add to basket'); return !!el && !!el.closest('button');"},{"id":"add-works","test":"const b = $$('button').find((x) => x.textContent.trim() === 'Add to basket'); if (!b) return false; const before = Number(text('#basket-count')); await click(b); return Number(text('#basket-count')) === before + 1;"},{"id":"remove-is-button","test":"const find = (t) => $$('body *').filter((el) => el.children.length === 0 || el.matches('button, a')).find((el) => el.textContent.trim() === t); const el = find('Remove one'); const b = el && el.closest('button'); if (!b) return false; const before = Number(text('#basket-count')); await click(b); return Number(text('#basket-count')) === Math.max(0, before - 1);"},{"id":"lineup-is-link","test":"const find = (t) => $$('body *').filter((el) => el.children.length === 0 || el.matches('button, a')).find((el) => el.textContent.trim() === t); const el = find('See the Friday line-up'); const a = el && el.closest('a[href]'); return !!a && a.getAttribute('href').endsWith('#lineup');"},{"id":"no-fakes","test":"return $$('div[onclick], span[onclick], a[href=\"#\"], a:not([href])').length === 0;"}],"title":"استبدل عناصر التحكّم المزيّفة في Ticketly","prompt":"في بطاقة تذكرة الجمعة ثلاثة عناصر تحكّم، وليس أيٌّ منها العنصر الصحيح:
\ndiv عليه onclick. يشغّل addToBasket().<a href="#"> يشغّل removeFromBasket().span يغيّر الـ hash في عنوان URL إلى #lineup.أعد بناء كلٍّ منها بالعنصر الأصلي الصحيح، مع إبقاء النص المرئي كما هو تمامًا. يجب أن يظلّ الفعلان يحدّثان عدد التذاكر في السلة. ويمكنك الإبقاء على أسماء الكلاسات ليبقى التنسيق كما هو.
\n","hints":["اسأل عن كل عنصر: هل يأخذ المستخدم إلى مكان ما، أم يفعل شيئًا هنا؟","فعلا السلة زرّان. أعطِهما type=“button”.","الانتقال إلى #lineup هو ما يفعله رابط href=“#lineup” وحده؛ ولا يحتاج إلى JavaScript."],"explanation":"Add to basket وRemove one يغيّران الحالة في الصفحة، فهما عنصرا <button type="button">: قابلان للتركيز، ويُعلَنان على أنهما أزرار، ويُفعَّلان بـ Enter وSpace دون أي كود إضافي. أما See the Friday line-up فينقل المستخدم إلى مكان آخر، فهو <a href="#lineup">، ويعمل أيضًا دون JavaScript، ويُظهر وجهته عند التمرير فوقه، ويمكن نسخه. لاحظ أن الحلّ فيه كود أقل من نقطة البداية: اختفى return false واختفى السكربت الذي يضبط الـ hash، لأن العناصر الأصلية تتصرّف بشكل صحيح أصلًا.