يخسر Ticketly ربع عملائه في صفحة الدفع، والتحليلات لا تستطيع أن تقول لماذا. جرّب النموذج بقارئ شاشة فيتّضح السبب: الحقول تُعلن “edit text, edit text, edit text”، وأزرار نوع التذكرة تُعلن “Standing, radio button” بلا سؤال، وحين يفشل الدفع يظهر إطار أحمر لا يدركه من لا يرى الشاشة. النماذج هي المكان الذي تتحوّل فيه إمكانية الوصول مباشرة إلى مال.
\nعنصر <label> المرتبط بحقل إدخال يفعل ثلاثة أشياء: يمنح الحقل اسمه المتاح، ويُظهر للمبصرين ما يجب أن يكتبوه حتى بعد أن يبدؤوا الكتابة، ويجعل نص الـ label قابلًا للنقر، فيكبر الهدف.
<label for=\"full-name\">Full name</label>\n<input id=\"full-name\" name=\"fullName\" autocomplete=\"name\">\n\n<label>\n Email\n <input type=\"email\" name=\"email\" autocomplete=\"email\" required>\n</label>الطريقتان تعملان: for تشير إلى id، أو حقل الإدخال متداخل داخل الـ label. ويمكنك التأكّد من الربط في الـ console: يجب أن تكون قيمة document.querySelector('#full-name').labels.length هي 1.
لأزرار الـ radio ومربّعات الاختيار طبقتان من المعنى: كل خيار وحده، والسؤال الذي تجيب عنه معًا. يحمل <fieldset> و<legend> السؤال:
<fieldset>\n <legend>Ticket type</legend>\n <label><input type=\"radio\" name=\"ticket\" value=\"standing\"> Standing</label>\n <label><input type=\"radio\" name=\"ticket\" value=\"seated\"> Seated</label>\n <label><input type=\"radio\" name=\"ticket\" value=\"vip\"> VIP lounge</label>\n</fieldset>حين يدخل التركيز المجموعة، يقرأ NVDA: “Ticket type, grouping, Standing, radio button, not checked, 1 of 3”. استخدم النمط نفسه لكتلة عنوان الفوترة أو لمجموعة مربّعات «أبلغني عبر».
\nخاصيتان توفّران كثيرًا من الكتابة، وهذا أهمّ ما يكون لذوي الإعاقات الحركية أو صعوبات الذاكرة.
\nالـ type الصحيح يُظهر لوحة المفاتيح المناسبة على الهواتف ويوفّر تحقّقًا أساسيًا: type="email"، وtype="tel"، وinputmode="numeric" لرقم البطاقة.
والخاصية autocomplete تعلن الغرض من الحقل، فيستطيع المتصفّح تعبئته من البيانات المحفوظة. يشترطها معيار WCAG 1.3.5 Identify Input Purpose (AA) للحقول التي تخصّ المستخدم. من القيم الشائعة: name، given-name، family-name، email، tel، street-address، postal-code، country، cc-name، cc-number، cc-exp، cc-csc، username، current-password، new-password.
علِّم الحقول المطلوبة بخاصية required، التي تُعلنها قارئات الشاشة، وبنص مرئي مثل “(required)”، لا بنجمة فقط. ولا تسأل مرتين: إن كتب المستخدم بريده في الخطوة 1، فاملأه مسبقًا في الخطوة 3 (3.3.7 Redundant Entry).
هنا تفشل معظم النماذج. للخطأ الجيد أربعة أجزاء، ويوضّح الرسم كيف تترابط:
\naria-invalid="true" على الحقل وaria-describedby تشير إلى الرسالة.<label for=\"email\">Email</label>\n<input id=\"email\" type=\"email\" autocomplete=\"email\" required>\n<p id=\"email-error\" class=\"error\" hidden></p>const form = document.querySelector('#checkout');\nconst email = form.querySelector('#email');\nconst error = form.querySelector('#email-error');\n\nform.addEventListener('submit', (event) => {\n if (email.value.includes('@')) {\n email.removeAttribute('aria-invalid');\n email.removeAttribute('aria-describedby');\n error.hidden = true;\n return;\n }\n event.preventDefault();\n error.textContent = 'Enter an email address like name@example.com';\n error.hidden = false;\n email.setAttribute('aria-invalid', 'true');\n email.setAttribute('aria-describedby', 'email-error');\n email.focus();\n});يستخدم النموذج novalidate في كود Ticketly (<form id="checkout" novalidate>) لتحلّ هذه الرسالة المخصّصة محلّ الفقاعة المدمجة في المتصفّح، التي تختلف من متصفّح لآخر وتختفي بسرعة. هذا اختيار شائع؛ والإبقاء على التحقّق الأصلي مقبول أيضًا إن كانت رسائله ترضيك.
وفي النموذج الطويل الذي فيه عدة أخطاء، أضف ملخّص أخطاء في الأعلى: عنوانًا مثل “There are 2 problems”، تتبعه قائمة روابط، كلٌّ منها يشير إلى الحقل الذي يصفه (<a href="#email">Enter an email address</a>). وانقل التركيز إلى الملخّص بعد إرسال فاشل. يسمع المستخدمون عدد المشكلات، ويأخذهم كل رابط مباشرة إلى حقل.
تحقّق من صحة المدخلات عند الإرسال أو حين يغادر المستخدم الحقل، لا مع كل ضغطة مفتاح. الصراخ بـ «بريد غير صالح» بينما لا يزال الشخص يكتب الحروف الأولى ضجيج للجميع، وسيل من الإعلانات لمستخدمي قارئ الشاشة.
\nصارت نماذج Ticketly تتكلّم بوضوح. والجزء الأخير من القسم 2 يتناول محتوى ليس نصًا على الإطلاق: الصور والأيقونات وجداول البيانات في صفحة الأسعار.
\n","toc":[{"id":"sec-1","text":"لكل حقل label","level":2},{"id":"sec-2","text":"اجمع الخيارات المترابطة","level":2},{"id":"sec-3","text":"ساعد الناس والمتصفّحات على التعبئة","level":2},{"id":"sec-4","text":"أخطاء يستطيع الناس العثور عليها وإصلاحها","level":2}],"takeaways":["كل حقل إدخال يحتاج إلى label برمجي؛ والـ placeholder يختفي عند الكتابة وليس اسمًا يمكن الاعتماد عليه.","اجمع أزرار الاختيار (radio) ومربّعات الاختيار (checkbox) في fieldset يطرح الـ legend فيه السؤال.","قيم autocomplete مثل name وemail وcc-number تتيح للمتصفّحات تعبئة الحقول وتحقّق معيار 1.3.5 Identify Input Purpose.","عند الخطأ، اضبط aria-invalid، واربط الرسالة بـ aria-describedby، واشرح كيف يُصلَح الخطأ، وانقل التركيز إلى أول حقل غير صالح."],"further":[{"title":"W3C WAI: Forms Tutorial","url":"https://www.w3.org/WAI/tutorials/forms/"},{"title":"MDN: HTML autocomplete attribute","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete"},{"title":"MDN: The Fieldset element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset"}],"quiz":[{"q":"ماذا يُعلن قارئ الشاشة حين يصل التركيز إلى هذا الحقل؟
\n<input type=\"email\" id=\"email\" placeholder=\"Email\">يسأل Ticketly عن «نوع التذكرة» بثلاثة أزرار radio. كيف يجب أن يُكتب السؤال؟
","options":[{"text":"فقرة فيها نص السؤال فوق أزرار الـ radio","why":"الفقرة غير مرتبطة برمجيًا بأزرار الـ radio، فالدخول إلى المجموعة لا يُعلن السؤال."},{"text":"عنصر fieldset يضمّ أزرار الـ radio، مع legend يقول “Ticket type”","why":"صحيح. تُعلن قارئات الشاشة الـ legend حين يدخل التركيز المجموعة، فيسمع المستخدمون “Ticket type, grouping, Standing, radio button, 1 of 3”."},{"text":"خاصية aria-label=“Ticket type” على كل زر radio","why":"هذا يحلّ محلّ اسم كل خيار، فيُعلَن كل زر radio على أنه “Ticket type” ولا يستطيع المستخدمون التمييز بينها."}],"answer":1},{"q":"بعد محاولة إرسال فاشلة، أيّ تغيير يفيد مستخدم قارئ الشاشة أكثر من غيره؟
","options":[{"text":"تحويل إطار الحقل غير الصالح إلى الأحمر","why":"اللون وحده لا يدركه مستخدمو قارئ الشاشة ولا كثير من المصابين بعمى الألوان، وهو يخالف معيار 1.4.1 Use of Color."},{"text":"عرض إشعار منبثق «في النموذج أخطاء» لثلاث ثوانٍ","why":"الإشعار القصير البعيد عن الحقل يسهل أن يفوت، ولا يقول أيّ حقل خاطئ ولا كيف يُصلَح."},{"text":"ضبط aria-invalid على الحقل، وربط الرسالة بـ aria-describedby، ونقل التركيز إلى الحقل","why":"صحيح. يصل التركيز إلى المشكلة، ويقرأ قارئ الشاشة “Email, invalid entry, Enter an email address like name@example.com”."}],"answer":2},{"q":"أيّ قيمة autocomplete صحيحة لاسم حامل البطاقة في خطوة الدفع في Ticketly؟
","options":[{"text":"autocomplete="name"","why":"القيمة name مخصّصة لاسم المستخدم الكامل. قد تُعبّأ بشكل صحيح بالصدفة، لكن القيمة الخاصة بالاسم على البطاقة أكثر تحديدًا."},{"text":"autocomplete="cc-name"","why":"صحيح. cc-name هي القيمة الخاصة بالاسم المطبوع على بطاقة الدفع، إلى جانب cc-number وcc-exp وcc-csc."},{"text":"autocomplete="on"","why":"القيمة on تسمح للمتصفّح بالتخمين لكنها لا تعلن أي غرض، فلا تحقّق معيار 1.3.5 Identify Input Purpose."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"","css":"form { display: grid; gap: 6px; max-width: 320px; }\ninput:not([type=\"radio\"]) { font: inherit; padding: 6px 8px; border: 1px solid #77708f; border-radius: 6px; }\nfieldset { border: 1px solid #c9c4dc; border-radius: 8px; padding: 8px 12px; }\n.error { color: #b3261e; margin: 0; }\n[aria-invalid=\"true\"] { border-color: #b3261e; border-width: 2px; }\nbutton { justify-self: start; font: inherit; padding: 8px 16px; border-radius: 8px; border: 0; background: #5b3cc4; color: #fff; }\n","js":"const email = document.querySelector('#email');\nconst error = document.querySelector('#email-error');\n\n// The playground blocks real form submission, so validation runs on the\n// submit button's click. That click also fires when Enter is pressed in a field.\ndocument.querySelector('#pay').addEventListener('click', (event) => {\n event.preventDefault();\n if (email.value.includes('@')) {\n error.hidden = true;\n return;\n }\n error.textContent = 'Enter an email address like name@example.com';\n error.hidden = false;\n});\n"},"solution":{"html":"","css":"form { display: grid; gap: 6px; max-width: 320px; }\ninput:not([type=\"radio\"]) { font: inherit; padding: 6px 8px; border: 1px solid #77708f; border-radius: 6px; }\nfieldset { border: 1px solid #c9c4dc; border-radius: 8px; padding: 8px 12px; }\n.error { color: #b3261e; margin: 0; }\n[aria-invalid=\"true\"] { border-color: #b3261e; border-width: 2px; }\nbutton { justify-self: start; font: inherit; padding: 8px 16px; border-radius: 8px; border: 0; background: #5b3cc4; color: #fff; }\n","js":"const email = document.querySelector('#email');\nconst error = document.querySelector('#email-error');\n\n// The playground blocks real form submission, so validation runs on the\n// submit button's click. That click also fires when Enter is pressed in a field.\ndocument.querySelector('#pay').addEventListener('click', (event) => {\n event.preventDefault();\n if (email.value.includes('@')) {\n error.hidden = true;\n email.removeAttribute('aria-invalid');\n email.removeAttribute('aria-describedby');\n return;\n }\n error.textContent = 'Enter an email address like name@example.com';\n error.hidden = false;\n email.setAttribute('aria-invalid', 'true');\n email.setAttribute('aria-describedby', 'email-error');\n email.focus();\n});\n"},"checks":[{"id":"labels","test":"const lbl = (el) => [...(el.labels || [])].map((l) => l.textContent).join(' ').replace(/\\s+/g, ' ').trim(); const fields = $$('input'); return fields.length === 4 && fields.every((f) => lbl(f).length > 0) && /full name/i.test(lbl($('#full-name'))) && /email/i.test(lbl($('#email'))) && /standing/i.test(lbl($('#t-standing'))) && /seated/i.test(lbl($('#t-seated')));"},{"id":"fieldset","test":"const radios = $$('input[type=\"radio\"]'); const fs = radios[0] && radios[0].closest('fieldset'); if (!fs || !radios.every((r) => fs.contains(r))) return false; const lg = fs.querySelector('legend'); return !!lg && fs.firstElementChild === lg && /ticket type/i.test(lg.textContent);"},{"id":"autocomplete","test":"return $('#full-name').getAttribute('autocomplete') === 'name' && $('#email').getAttribute('autocomplete') === 'email' && $('#email').type === 'email';"},{"id":"error-linked","test":"const email = $('#email'); await input(email, 'samir.example.com'); await click('#pay'); if (email.getAttribute('aria-invalid') !== 'true') return false; const ids = (email.getAttribute('aria-describedby') || '').split(/\\s+/).filter(Boolean); return ids.some((id) => { const el = document.getElementById(id); return el && !el.hidden && /enter an email/i.test(el.textContent); });"},{"id":"error-focus","test":"return document.activeElement === $('#email');"},{"id":"error-clears","test":"const email = $('#email'); await input(email, 'samir@example.com'); await click('#pay'); if (email.getAttribute('aria-invalid') === 'true') return false; const ids = (email.getAttribute('aria-describedby') || '').split(/\\s+/).filter(Boolean); return !ids.some((id) => { const el = document.getElementById(id); return el && /enter an email/i.test(el.textContent) && !el.hidden; }) && $('#email-error').hidden;"}],"title":"أصلح نموذج الدفع في Ticketly","prompt":"يعتمد نموذج الدفع على الـ placeholders، ويضع سؤالًا عائمًا فوق أزرار radio بلا labels، ويعرض خطأ البريد الإلكتروني بطريقة لا يلاحظها إلا المبصرون. أصلحه:
\n#full-name و#email وزرّي الـ radio عنصر <label> حقيقيًا (“Full name”، “Email”، “Standing”، “Seated”).<fieldset> يكون الـ <legend> فيه “Ticket type”.autocomplete="name" وautocomplete="email"، واجعل حقل البريد type="email".aria-invalid="true"، واجعل aria-describedby تشير إلى #email-error، وانقل التركيز إلى حقل البريد. وحين يصبح صالحًا، احذف الخاصيتين.الـ labels تمنح كل حقل اسمًا يبقى بعد الكتابة، والـ fieldset يتيح لقارئات الشاشة أن تُعلن “Ticket type, grouping” قبل الخيارات. وقيم autocomplete تتيح للمتصفّحات ومديري كلمات المرور تعبئة النموذج، وهذا ما يطلبه معيار 1.3.5. صار السكربت يربط الخطأ بثلاث طرق: aria-invalid تقول إن الحقل خاطئ، وaria-describedby تجعل الرسالة وصفًا له، وfocus() تأخذ المستخدم إليه مباشرة، فيقرأ NVDA: “Email, edit text, invalid entry, Enter an email address like name@example.com”. وحذف الخاصيتين عند النجاح يمنع قراءة الخطأ القديم مرة أخرى، لأن العنصر المُشار إليه يُعلَن حتى وهو مخفي.