الأزرار والروابط والـ div القابل للنقر

يبدو عنصر “Add to basket” في Ticketly كأنه زر: زوايا مستديرة، ولون العلامة التجارية، ومؤشّر يد عند التمرير فوقه. لكنه div عليه onclick. انقره بالفأرة فيعمل بإتقان، ولهذا بالضبط لم ينتبه أحد في الفريق الأصلي. اضغط Tab فيقفز التركيز متجاوزًا إياه. يقرؤه قارئ شاشة سمير كنص عادي. ومستخدم جهاز التبديل لا يستطيع الوصول إليه أصلًا.

الروابط تنقلك، والأزرار تفعل

الاختيار بين عنصري التحكّم الأصليين يعود إلى سؤال واحد: هل يأخذ المستخدم إلى مكان ما؟

• الرابط (<a href="…">) ينقلك: إلى صفحة أخرى، أو جزء آخر من هذه الصفحة (#lineup)، أو ملف، أو عنوان بريد إلكتروني. تُعلنه قارئات الشاشة على أنه “link”. ويتوقّع المستخدمون أن يفتحوه في تبويب جديد، وأن ينسخوا عنوانه، وأن يروه في سجلّ التصفّح. ويُفعَّل بمفتاح Enter.
• الزر (<button>) ينفّذ فعلًا في الصفحة الحالية: إضافة إلى السلة، أو فتح نافذة حوار، أو إرسال نموذج، أو تشغيل فلتر وإيقافه. تُعلنه قارئات الشاشة على أنه “button”. ويُفعَّل بمفتاحي Enter وSpace.

التنسيق لا علاقة له بالاختيار. يمكن أن يبدو الرابط كزر دعوة كبير، ويمكن أن يبدو الزر كرابط نصي؛ CSS يتولّى المظهر، والعنصر يتولّى السلوك.

ما الذي ينقص الـ div القابل للنقر

لتفهم لماذا يتفوّق العنصر الأصلي، عُدّ ما ينقص الـ div. هذا الحدّ الأدنى لإعادة بناء زر يدويًا:

<div class="btn" role="button" tabindex="0">Add to basket</div>

const fake = document.querySelector('.btn');
fake.addEventListener('click', addToBasket);
fake.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') addToBasket();
  if (event.key === ' ') event.preventDefault(); // stop the page scrolling
});
fake.addEventListener('keyup', (event) => {
  if (event.key === ' ') addToBasket(); // native buttons fire on Space release
});

هذا دور، وتركيز، وEnter، وSpace، ومنع للتمرير، ومع ذلك ما زالت تنقصه حالة التعطيل، وإرسال النموذج، والطريقة التي تنسّق بها سمات التباين في Windows (وضع forced colors) الأزرار. قارن ذلك بـ:

<button type="button" class="btn" onclick="addToBasket()">Add to basket</button>

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

الأزرار في النماذج، والأزرار المعطّلة

داخل <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”. وإن أصرّ التصميم على نص مرئي قصير، فستتعلّم في درس الأسماء والأوصاف المتاحة كيف توسّع الاسم دون أن تكسر التحكّم الصوتي.

وعادة أخرى مع الروابط: إن كان الرابط يفتح تبويبًا جديدًا أو يُنزّل ملفًا، فقل ذلك في نصه، مثل “Venue guide (PDF, 2 MB)” أو “Seating plan (opens in a new tab)”. التبويب الجديد غير المتوقّع يكسر زر الرجوع لمستخدمي قارئ الشاشة وبرامج التكبير، الذين كثيرًا ما لا يلاحظون أن النافذة تغيّرت فيتساءلون لماذا لا يستطيعون العودة.

الأزرار والروابط الحقيقية تُصلح عناصر التحكّم التي تفعل شيئًا. وبعدها تأتي العناصر التي تجمع المعلومات، والمكان الذي تخسر فيه معظم المواقع غير سهلة الوصول عملاءها: النماذج.