★Harbour Lights
\nTwo nights of music on the old harbour wall.
\nيضيف Ticketly هذا العام فعالية عربية: ليالي الطرب، باسم المكان ووصفه بالعربية داخل صفحة إنجليزية في ما عدا ذلك. كان الاختبار الأول مع NVDA كارثة: حاول الصوت الإنجليزي أن ينطق الحروف العربية حرفًا حرفًا. وكانت أيقونة البطاقة العربية وحشوها ومحاذاة نصها كلها في الجهة الخطأ. للكلمات أهمية في إمكانية الوصول من ناحيتين: مدى سهولة فهمها، ومدى قدرة البرمجيات على معالجتها بشكل صحيح.
\nذوو الإعاقات الذهنية وصعوبات التعلّم، وعُسر القراءة، وإصابات الدماغ، وضعف الذاكرة، ومعهم كل من يقرأ بلغة ثانية أو في نهاية يوم طويل، يستفيدون من نص سهل المتابعة. المعيار الرسمي الوحيد في WCAG بشأن مستوى القراءة، 3.1.5، من المستوى AAA، لكن اللغة البسيطة تبقى من أكثر تحسينات إمكانية الوصول فاعلية.
\nقارن سياسة الاسترداد في Ticketly قبل التعديل وبعده:
\n\n\nقبل: بصرف النظر عمّا سبق ذكره، فإن حاملي التذاكر ممّن يرتؤون التقدّم بطلب استرداد المبالغ المدفوعة بعد انقضاء المهلة المحدّدة بأربعة عشر يومًا سابقة لموعد الفعالية لا يحقّ لهم التعويض إلا في الظروف الاستثنائية.
\n
\n\nبعد: يمكنك استرداد ثمن التذكرة كاملًا حتى 14 يومًا قبل المهرجان. بعد ذلك، لا نردّ المبلغ إلا إذا أُلغيت الفعالية.
\n
التقنيات سهلة الذكر وتحتاج إلى تمرين لتطبيقها:
\nتستخدم قارئات الشاشة خاصية lang لاختيار الصوت وقواعد النطق. وتستخدمها المتصفّحات أيضًا في تقسيم الكلمات عند نهاية السطر، واختيار الخط، والتدقيق الإملائي، والترجمة. ينطبق هنا معياران:
<html lang="en"> (أو ar أو fr وهكذا). وغياب لغة الصفحة من الإخفاقات الستة الأكثر شيوعًا على الويب.lang خاصة به.هذه هي البطاقة العربية في الصفحة الإنجليزية، والعنوان «ليالي الطرب» معلَّم بأنه عربي:
\n<html lang=\"en\">\n…\n<article class=\"card\">\n <h3 lang=\"ar\" dir=\"rtl\">…</h3> <!-- the Arabic title -->\n <p>An evening of classic Arabic music at the old harbour.</p>\n</article>صار NVDA يتحوّل إلى صوت عربي عند العنوان ثم يعود إلى الإنجليزية عند الوصف. ولا تحتاج إلى lang لأسماء العلم أو للكلمات التي دخلت الإنجليزية واستقرّت فيها مثل “café”؛ فهي مخصّصة للمقاطع التي سينطقها القارئ باللغة الأخرى.
العربية والعبرية والفارسية والأردية تُكتب من اليمين إلى اليسار. وخاصية dir تخبر المتصفّح بالاتجاه الأساسي لكتلة النص، وهو ما يتحكّم في الجهة التي يبدأ منها النص، والجهة التي تقع عليها علامات الترقيم، وترتيب النص حين تختلط فيه الاتجاهات.
dir="rtl" على <html> لصفحة عربية، أو على عنصر لجزء عربي داخل صفحة إنجليزية.dir="auto" حين لا تعرف الاتجاه مسبقًا، كأسماء المستخدمين والمراجعات وحقول البحث. ينظر المتصفّح إلى أول حرف ذي اتجاه قوي.<bdi> يعزل جزءًا قصيرًا من نص كتبه مستخدم داخل جملة، فلا يعيد اسم مستخدم عربي ترتيب النص الإنجليزي المحيط به: Review by <bdi>سارة</bdi>, 5 stars.في التخطيط من اليمين إلى اليسار، ينقلب كل ما هو أفقي: الأيقونة التي كانت على يسار العنوان مكانها على يمينه، والحشو الذي كان يُبعد النص عن الحافة اليسرى يجب أن يُبعده عن اليمنى. الخصائص الفيزيائية مثل margin-left وtext-align: left لا تنقلب. أما الخصائص المنطقية (logical properties) فتنقلب:
| الفيزيائية | \nالمنطقية | \n
|---|---|
margin-left | \nmargin-inline-start | \n
padding-right | \npadding-inline-end | \n
left: 0 | \ninset-inline-start: 0 | \n
text-align: left | \ntext-align: start | \n
border-left | \nborder-inline-start | \n
.card {\n padding-inline: 1rem;\n border-inline-start: 4px solid #5b3cc4;\n text-align: start;\n}\n.badge {\n margin-inline-end: 0.5rem; /* the gap after the icon, on whichever side that is */\n}ليس كل شيء يجب أن ينعكس. الشعارات والصور وأزرار مشغّل الوسائط (زر التشغيل يشير إلى اليمين دائمًا) والأرقام تبقى كما هي. أما الأسهم التي تعني «التالي» أو «رجوع» فيجب أن تنقلب؛ والـ pseudo-class :dir(rtl) تتيح لك استهدافها دون كلاسات إضافية.
بهذا يكتمل القسم 4. صار Ticketly منظّمًا، وقابلًا للتشغيل، ومقروءًا، ويُنطق بشكل صحيح. وينتقل القسم 5 إلى إثبات ذلك: الاختبار الآلي، والاختبار اليدوي بقارئات الشاشة، وتدقيق شامل.
\n","toc":[{"id":"sec-1","text":"اللغة البسيطة","level":2},{"id":"sec-2","text":"لغة الصفحة ولغة أجزائها","level":2},{"id":"sec-3","text":"الاتجاه: rtl وauto وbdi","level":2},{"id":"sec-4","text":"تخطيط ينعكس من تلقاء نفسه","level":2}],"takeaways":["اللغة البسيطة، والجمل القصيرة، والتعليمات التي لا تعتمد على الشكل أو اللون أو الموضع، تساعد ذوي الإعاقات الإدراكية وكل من يقرأ بلغة ثانية.","اضبط lang على عنصر html للصفحة كلها وعلى أي مقطع بلغة أخرى، لتبدّل قارئات الشاشة الصوت وقواعد النطق.","استخدم dir=“rtl” للمحتوى العربي والعبري، وdir=“auto” للنصوص التي يكتبها المستخدمون ولا يمكنك معرفة اتجاهها مسبقًا.","خصائص CSS المنطقية مثل margin-inline-start وtext-align: start تنعكس تلقائيًا في التخطيطات من اليمين إلى اليسار."],"further":[{"title":"W3C: Understanding 3.1.2 Language of Parts","url":"https://www.w3.org/WAI/WCAG22/Understanding/language-of-parts.html"},{"title":"W3C Internationalization: Structural markup and right-to-left text in HTML","url":"https://www.w3.org/International/questions/qa-html-dir"},{"title":"MDN: CSS logical properties and values","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values"}],"quiz":[{"q":"تعرض صفحة Ticketly الإنجليزية عنوان الفعالية العربي «ليالي الطرب» دون خاصية lang. ماذا يفعل عادةً قارئ شاشة مضبوط على الإنجليزية؟
","options":[{"text":"يكتشف نظام الكتابة ويتحوّل إلى صوت عربي تلقائيًا، في كل قارئات الشاشة","why":"بعض قارئات الشاشة تحاول اكتشاف نظام الكتابة، لكن السلوك يتفاوت كثيرًا ويفشل في أحيان كثيرة. الخاصية lang هي الإشارة الموثوقة التي تشترطها WCAG."},{"text":"يتخطّى النص، لأنه لا يستطيع قراءته","why":"النص ما زال في الشجرة. المشكلة في طريقة نطقه، لا في قراءته من عدمها."},{"text":"يقرؤه بقواعد النطق الإنجليزية أو يتهجّى حروفه، فيصبح غير مفهوم","why":"صحيح. إضافة lang=“ar” (3.1.2 Language of Parts) تتيح لقارئ الشاشة التحوّل إلى صوت عربي لتلك العبارة."},{"text":"يترجمه إلى الإنجليزية قبل قراءته","why":"قارئات الشاشة لا تترجم المحتوى. إنها تختار صوتًا وقواعد نطق فقط."}],"answer":2},{"q":"يتيح Ticketly للحضور نشر مراجعات بالإنجليزية أو بالعربية. أيّ كود يتعامل مع اتجاه نص كل مراجعة بأفضل شكل؟
","options":[{"text":"<p dir="rtl"> على كل مراجعة","why":"هذا سيجعل المراجعات الإنجليزية من اليمين إلى اليسار، فتقع النقاط والأقواس في أماكن خاطئة."},{"text":"<p dir="auto"> على كل مراجعة","why":"صحيح. يضبط dir=“auto” الاتجاه بحسب أول حرف ذي اتجاه قوي، فتصبح المراجعات العربية من اليمين إلى اليسار والإنجليزية من اليسار إلى اليمين."},{"text":"بلا خاصية dir؛ فاتجاه الصفحة يكفي","why":"الصفحة من اليسار إلى اليمين، فستُعرض المراجعات العربية وعلامات الترقيم والأرقام فيها في مواضع خاطئة."}],"answer":1},{"q":"أيّ تعليمة تحقّق معيار 1.3.3 Sensory Characteristics؟
","options":[{"text":"«اضغط الزر الأخضر الدائري على اليمين.»","why":"الشكل واللون والموضع لا معنى لها لمستخدمي قارئ الشاشة، وتتغيّر على الشاشات الصغيرة."},{"text":"«استخدم الزر أدناه للمتابعة.»","why":"كلمة «أدناه» تعتمد على الموضع البصري، الذي يتوقّف على التخطيط ولا يعرفه مستخدمو قارئ الشاشة."},{"text":"«اضغط Continue لاختيار مقاعدك.»","why":"صحيح. إنها تسمّي عنصر التحكّم بتسميته المرئية، وهذا يعمل للجميع، بمن فيهم مستخدمو التحكّم الصوتي."},{"text":"«انقر أيقونة السهم.»","why":"شكل الأيقونة خاصية حسّية، وكلمة «انقر» تستبعد مستخدمي لوحة المفاتيح والصوت."}],"answer":2},{"q":"شارة أيقونة تسبق عنوان بطاقة وعليها margin-right: 8px. في صفحة Ticketly العربية، تظهر المسافة في الجهة الخطأ. ما أنظف إصلاح؟
margin-inline-end: 8px","why":"صحيح. نهاية السطر (inline-end) هي الجهة اليمنى في النص من اليسار إلى اليمين، واليسرى في النص من اليمين إلى اليسار، فقاعدة واحدة تعمل في الحالتين."},{"text":"أضِف قاعدة تجاوز [dir="rtl"] .badge { margin-left: 8px; margin-right: 0; }","why":"هذا يعمل، لكنك ستحتاج إلى قواعد تجاوز كهذه لكل خاصية اتجاهية. الخصائص المنطقية تلغي هذا التكرار."},{"text":"استخدم transform: scaleX(-1) على الصفحة العربية","why":"العكس بالـ transform يعكس النصوص والصور أيضًا، فيجعلها غير مقروءة."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Two nights of music on the old harbour wall.
\nأمسية من الموسيقى العربية الكلاسيكية في الميناء القديم.
\nAn evening of classic Arabic music at the old harbour.
\nTwo nights of music on the old harbour wall.
\nأمسية من الموسيقى العربية الكلاسيكية في الميناء القديم.
\nAn evening of classic Arabic music at the old harbour.
\nالصفحة إنجليزية (<html lang="en"> مضبوطة أصلًا). عنوان البطاقة الثانية ووصفها بالعربية، وقد يكتب المراجعون بأيّ من اللغتين. أصلحها:
lang="ar" وباتجاه من اليمين إلى اليسار..note) إنجليزيةً ومن اليسار إلى اليمين.تجعل lang="ar" قارئات الشاشة تتحوّل إلى صوت عربي للعنوان والوصف (3.1.2 Language of Parts)، وتمنح dir="rtl" تلك الكتلة اتجاهًا أساسيًا من اليمين إلى اليسار، فيبدأ النص من اليمين وتقع علامات الترقيم في مواضعها الصحيحة. وتبقى الملاحظة الإنجليزية خارج العنصر الحاوي فتحتفظ بلغة الصفحة واتجاهها. وتتيح dir="auto" لكل حقل في النموذج أن يتبع أول حرف ذي اتجاه قوي فيه. وأخيرًا، تضع margin-inline-end مسافة الشارة بعد الأيقونة في الاتجاهين، وتعكس بقية الخصائص المنطقية الحدّ الملوّن والمحاذاة أيضًا، وكل ذلك من مجموعة قواعد واحدة.