اللغة البسيطة واللغة والاتجاه

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

اللغة البسيطة

ذوو الإعاقات الذهنية وصعوبات التعلّم، وعُسر القراءة، وإصابات الدماغ، وضعف الذاكرة، ومعهم كل من يقرأ بلغة ثانية أو في نهاية يوم طويل، يستفيدون من نص سهل المتابعة. المعيار الرسمي الوحيد في WCAG بشأن مستوى القراءة، 3.1.5، من المستوى AAA، لكن اللغة البسيطة تبقى من أكثر تحسينات إمكانية الوصول فاعلية.

قارن سياسة الاسترداد في Ticketly قبل التعديل وبعده:

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

بعد: يمكنك استرداد ثمن التذكرة كاملًا حتى 14 يومًا قبل المهرجان. بعد ذلك، لا نردّ المبلغ إلا إذا أُلغيت الفعالية.

التقنيات سهلة الذكر وتحتاج إلى تمرين لتطبيقها:

• ضع أهمّ نقطة أولًا، في العنوان وفي الجملة الأولى.
• استخدم كلمات شائعة وجملًا قصيرة. فكرة واحدة في كل جملة.
• استخدم الاسم نفسه للشيء نفسه في كل مكان: إن كانت «تذكرة» على البطاقة، فلا تصبح «باقة دخول» في صفحة الدفع (3.2.4 Consistent Identification).
• اكتب تعليمات تعمل دون حاجة إلى البصر. «اضغط الزر الأخضر على اليمين» تعتمد على اللون والموضع؛ أما «اضغط Continue» فتعمل للجميع (1.3.3 Sensory Characteristics).
• اشرح الاختصارات في أول مرة: «صالة VIP (المنطقة المسقوفة بجانب المسرح)».

لغة الصفحة ولغة أجزائها

تستخدم قارئات الشاشة خاصية lang لاختيار الصوت وقواعد النطق. وتستخدمها المتصفّحات أيضًا في تقسيم الكلمات عند نهاية السطر، واختيار الخط، والتدقيق الإملائي، والترجمة. ينطبق هنا معياران:

• 3.1.1 Language of Page ‏(A): ‏<html lang="en"> (أو ar أو fr وهكذا). وغياب لغة الصفحة من الإخفاقات الستة الأكثر شيوعًا على الويب.
• 3.1.2 Language of Parts ‏(AA): كل مقطع بلغة مختلفة يحصل على lang خاصة به.

هذه هي البطاقة العربية في الصفحة الإنجليزية، والعنوان «ليالي الطرب» معلَّم بأنه عربي:

<html lang="en">
…
<article class="card">
  <h3 lang="ar" dir="rtl">…</h3> <!-- the Arabic title -->
  <p>An evening of classic Arabic music at the old harbour.</p>
</article>

صار NVDA يتحوّل إلى صوت عربي عند العنوان ثم يعود إلى الإنجليزية عند الوصف. ولا تحتاج إلى lang لأسماء العلم أو للكلمات التي دخلت الإنجليزية واستقرّت فيها مثل “café”؛ فهي مخصّصة للمقاطع التي سينطقها القارئ باللغة الأخرى.

الاتجاه: rtl وauto وbdi

العربية والعبرية والفارسية والأردية تُكتب من اليمين إلى اليسار. وخاصية dir تخبر المتصفّح بالاتجاه الأساسي لكتلة النص، وهو ما يتحكّم في الجهة التي يبدأ منها النص، والجهة التي تقع عليها علامات الترقيم، وترتيب النص حين تختلط فيه الاتجاهات.

• dir="rtl" على <html> لصفحة عربية، أو على عنصر لجزء عربي داخل صفحة إنجليزية.
• dir="auto" حين لا تعرف الاتجاه مسبقًا، كأسماء المستخدمين والمراجعات وحقول البحث. ينظر المتصفّح إلى أول حرف ذي اتجاه قوي.
• <bdi> يعزل جزءًا قصيرًا من نص كتبه مستخدم داخل جملة، فلا يعيد اسم مستخدم عربي ترتيب النص الإنجليزي المحيط به: Review by <bdi>سارة</bdi>, 5 stars.

تخطيط ينعكس من تلقاء نفسه

في التخطيط من اليمين إلى اليسار، ينقلب كل ما هو أفقي: الأيقونة التي كانت على يسار العنوان مكانها على يمينه، والحشو الذي كان يُبعد النص عن الحافة اليسرى يجب أن يُبعده عن اليمنى. الخصائص الفيزيائية مثل margin-left وtext-align: left لا تنقلب. أما الخصائص المنطقية (logical properties) فتنقلب:

.card {
  padding-inline: 1rem;
  border-inline-start: 4px solid #5b3cc4;
  text-align: start;
}
.badge {
  margin-inline-end: 0.5rem; /* the gap after the icon, on whichever side that is */
}

ليس كل شيء يجب أن ينعكس. الشعارات والصور وأزرار مشغّل الوسائط (زر التشغيل يشير إلى اليمين دائمًا) والأرقام تبقى كما هي. أما الأسهم التي تعني «التالي» أو «رجوع» فيجب أن تنقلب؛ والـ pseudo-class ‏:dir(rtl) تتيح لك استهدافها دون كلاسات إضافية.

بهذا يكتمل القسم 4. صار Ticketly منظّمًا، وقابلًا للتشغيل، ومقروءًا، ويُنطق بشكل صحيح. وينتقل القسم 5 إلى إثبات ذلك: الاختبار الآلي، والاختبار اليدوي بقارئات الشاشة، وتدقيق شامل.