{"id":"l-a11y-1-2","courseId":"web-accessibility","lang":"ar","kind":"lesson","summary":"اشرح كيف تشغّل قارئات الشاشة وبرامج التكبير وأجهزة التبديل والتحكّم الصوتي صفحة الويب، واقرأ شجرة إمكانية الوصول التي يبنيها المتصفّح لها.","html":"

افتح Ticketly وشاشتك مطفأة. قد يبدو هذا استعراضًا، لكنه ما يفعله سمير كل يوم عمل، وهو أسرع طريقة لتفهم ما يرسله كودك فعلًا إلى من يستخدمونه. قبل أن تُصلح أي شيء، تحتاج إلى صورة واضحة عن كيف تستخرج التقنيات المساعدة (assistive technology، وتُختصر AT) المعلومات من صفحة الويب.

\n

شجرة إمكانية الوصول

\n

لا تنظر التقنيات المساعدة إلى البكسلات. يأخذ المتصفّح الـ DOM، ويدمجه مع CSS، ويبني شجرة ثانية أبسط: شجرة إمكانية الوصول (accessibility tree). لكل عقدة فيها بضع خصائص:

\n\n

يسلّم المتصفّح هذه الشجرة إلى واجهة إمكانية الوصول البرمجية في نظام التشغيل، ومن هناك يقرؤها قارئ الشاشة أو برنامج التكبير أو برنامج التحكّم الصوتي.

\n
\n يغذّي الـ DOM وCSS المتصفّحَ الذي يبني شجرة إمكانية الوصول؛ وتُكشَف الشجرة عبر واجهة إمكانية الوصول في نظام التشغيل لقارئات الشاشة وبرامج التكبير وبرامج التبديل والتحكّم الصوتي.\n \n DOM + CSS\n كودك\n \n \n شجرة\n إمكانية الوصول\n دور، اسم، حالة\n \n \n واجهة النظام\n UIA, AX, AT-SPI\n \n \n \n قارئ الشاشة\n برنامج التكبير\n الصوت، التبديل\n
من الكود الذي تكتبه إلى أذن المستخدم
\n

هذا جزء من بطاقة الفعالية في Ticketly، وما تحتويه الشجرة له:

\n
ticketly/index.html
<h3>Harbour Lights: Friday</h3>\n<div class=\"btn\" onclick=\"book('fri')\">Book now</div>\n<button type=\"button\" onclick=\"book('sat')\">Book now</button>
\n
Text
heading "Harbour Lights: Friday" (level 3)\ngeneric\n  text "Book now"\nbutton "Book now"
\n

يعرض الـ div النص نفسه، لكن دوره عامّ (generic). يقرأ قارئ الشاشة “Book now” كجملة عادية، بلا أي إشارة إلى أنه يفعل شيئًا، ولا يمكن الوصول إليه بمفتاح Tab. يمكنك فحص هذا بنفسك: في أدوات المطوّر في Chrome أو Edge، حدّد عنصرًا وافتح لوحة Accessibility؛ وفي Firefox تبويب مخصّص اسمه Accessibility Inspector.

\n

أربع طرق يشغّل بها الناس Ticketly

\n

قارئات الشاشة (NVDA وJAWS على Windows، وVoiceOver على أجهزة Apple، وTalkBack على Android) تحوّل الشجرة إلى كلام منطوق أو إلى طريقة برايل. نادرًا ما يستمع المستخدمون إلى الصفحة من أعلاها إلى أسفلها. في استطلاع WebAIM لعام 2026، قال 67.8% من مستخدمي قارئ الشاشة إن أول ما يفعلونه في صفحة طويلة هو القفز بين العناوين. ويستدعون أيضًا قوائم بالروابط والـ landmarks وحقول النماذج. البنية التي تكتبها هي فهرس المحتويات بالنسبة لهم.

\n

برامج تكبير الشاشة (Windows Magnifier وZoom في macOS وZoomText) تكبّر منطقة صغيرة تتبع التركيز أو المؤشّر. مها، مصمّمة في فريقي، تعمل بتكبير 400%: ترى نحو جزء من ستة عشر جزءًا من الشاشة في المرة الواحدة. أي شيء يحدث بعيدًا عن تركيزها، مثل إشعار منبثق في الزاوية المقابلة، لم يحدث أصلًا بالنسبة لها.

\n

أجهزة التبديل (switch access): يضغط مستخدموها مفتاحًا ماديًا واحدًا أو اثنين. ينتقل البرنامج بين العناصر القابلة للتركيز واحدًا تلو الآخر، وضغطة المفتاح تفعّل العنصر الحالي. إن لم يكن العنصر قابلًا للتركيز، فلا سبيل إلى الوصول إليه إطلاقًا. يعتمد مستخدمو أجهزة التبديل على قابلية التشغيل نفسها بلوحة المفاتيح التي ستبنيها في القسم 3.

\n

التحكّم الصوتي (Voice Control في macOS وiOS، وDragon على Windows) يتيح للناس أن يقولوا “click Book now” أو “show numbers”. يطابق البرنامج الكلمات المنطوقة مع الأسماء المتاحة (accessible names). حين يظهر على الزر “Book seats” لكن عليه aria-label="cta-primary"، لا تطابق الكلمات التي تقولها دينا الاسم، فلا يحدث شيء. تسمّي WCAG هذا المعيار Label in Name: يجب أن يحتوي الاسم المتاح النص المرئي.

\n\n

أن تُظهره للشجرة لا للعين

\n

نمطان يغطّيان معظم الحالات في Ticketly.

\n

حين تحمل إشارة بصرية معنى ليس له نص، أضف نصًا لا تراه إلا الشجرة. يُعلِّم Ticketly الموعد الذي نفدت تذاكره بخطّ يشطب السعر ولون رمادي. فيُعلن قارئ الشاشة “SAR 180” ويحاول سمير بكل سرور أن يشتريه. أضف ملاحظة مخفية بصريًا:

\n
ticketly/styles.css
.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}
\n
HTML
<p class=\"price sold\">SAR 180 <span class=\"visually-hidden\">(sold out)</span></p>
\n

وحين يكون العنصر زخرفيًا، أخفِه عن الشجرة. يضع Ticketly أيقونة تقويم صغيرة قبل كل تاريخ. قد تُعلَن عناصر SVG المضمّنة على أنها “image” أو “graphic”، وهذا ضجيج. وتزيلها aria-hidden="true":

\n
HTML
<p class=\"date\"><svg class=\"icon\" aria-hidden=\"true\" viewBox=\"0 0 16 16\">…</svg> 12 June, 8 pm</p>
\n\n

الشجرة هي العقد بين كودك وبين كل تقنية مساعدة. في الدرس التالي سترى المعيار الذي يحدّد ما يجب أن يتضمّنه هذا العقد: WCAG 2.2.

\n","toc":[{"id":"sec-1","text":"شجرة إمكانية الوصول","level":2},{"id":"sec-2","text":"أربع طرق يشغّل بها الناس Ticketly","level":2},{"id":"sec-3","text":"أن تُظهره للشجرة لا للعين","level":2}],"takeaways":["التقنيات المساعدة لا تقرأ البكسلات؛ بل تقرأ شجرة إمكانية الوصول، حيث لكل عقدة دور (role) واسم وحالات أو قيمة.","يتنقّل مستخدمو قارئ الشاشة بين العناوين والـ landmarks والروابط وحقول النماذج، فالبنية هي فهرس المحتويات بالنسبة لهم.","يعتمد مستخدمو برامج التكبير وأجهزة التبديل والتحكّم الصوتي على تركيز مرئي، وتشغيل كامل بلوحة المفاتيح، وتسميات مرئية تطابق الأسماء المتاحة.","تزيل display none وخاصية hidden وaria-hidden المحتوى من الشجرة؛ أما كلاس visually-hidden فيخفيه عن العين ويُبقيه لقارئات الشاشة."],"further":[{"title":"MDN: Accessibility tree","url":"https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree"},{"title":"W3C WAI: Tools and Techniques used by people with disabilities","url":"https://www.w3.org/WAI/people-use-web/tools-techniques/"},{"title":"MDN: aria-hidden","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden"}],"quiz":[{"q":"

يصل مستخدم قارئ شاشة إلى هذا العنصر. ماذا تعطي شجرة إمكانية الوصول لقارئ الشاشة ليُعلنه؟

\n
HTML
<div class=\"btn\" onclick=\"book()\">Book now</div>
\n","options":[{"text":"الدور “button” والاسم “Book now”","why":"لا يستنتج المتصفّح دور الزر من اسم الكلاس أو من معالج النقر. وحده عنصر button حقيقي (أو دور صريح) يُنتج ذلك."},{"text":"النص العادي “Book now” بلا دور وبلا طريقة لتفعيله","why":"صحيح. دور الـ div عامّ (generic)، فيقرأ قارئ الشاشة النص كمحتوى ثابت، ولا يجد المستخدم أي إشارة إلى أنه يفعل شيئًا."},{"text":"لا شيء على الإطلاق، لأن عناصر div ليست في شجرة إمكانية الوصول","why":"عناصر div التي تحتوي نصًا تظهر فعلًا، كحاويات عامة يمكن قراءة نصها. المشكلة هي غياب الدور، لا غياب العقدة."}],"answer":1},{"q":"

تستخدم مها تكبير الشاشة بنسبة 400%، فلا ترى إلا نحو جزء من ستة عشر جزءًا من الصفحة في كل مرة. يعرض Ticketly رسالة «أُضيف إلى السلة» في إشعار منبثق (toast) في الزاوية العليا اليمنى بينما تنقر هي زرًا في الأسفل يسارًا. ما العائق الرئيسي؟

","options":[{"text":"الإشعار المنبثق ليس له دور ARIA","why":"الدور يساعد مستخدمي قارئ الشاشة، لكن مها تقرأ بعينيها. حتى الإشعار المُعلَّم بإتقان يبقى غير مرئي لها إن ظهر بعيدًا عن الجزء الذي تراه من الشاشة."},{"text":"نص الإشعار قصير جدًا","why":"الطول ليس المشكلة هنا. الرسالة تظهر في جزء من الشاشة لا تنظر إليه."},{"text":"الرسالة تظهر بعيدًا عن موضع انتباهها وتركيزها","why":"صحيح. يرى مستخدمو برامج التكبير نافذة صغيرة حول التركيز أو المؤشّر، لذلك يجب أن تظهر الاستجابة قرب عنصر التحكّم الذي سبّبها."}],"answer":2},{"q":"

تتحكّم دينا في حاسوبها بالصوت. يعرض الزر النص “Book seats” لكن عليه aria-label="cta-primary". ماذا يحدث حين تقول “click Book seats”؟

","options":[{"text":"يفشل الأمر، لأن الاسم المتاح “cta-primary” لا يحتوي الكلمات التي تراها","why":"صحيح. هذا يخالف معيار WCAG ‏2.5.3 Label in Name. احذف الـ aria-label ليأتي الاسم من النص المرئي."},{"text":"ينجح، لأن التحكّم الصوتي يقرأ النص المرئي","why":"برامج التحكّم الصوتي تطابق الكلمات المنطوقة مع الاسم المتاح، والـ aria-label يحلّ محلّ النص المرئي بوصفه الاسم."},{"text":"ينجح فقط إن كان للزر أيضًا خاصية title","why":"تُتجاهَل الـ title حين يوجد aria-label، ولن تساعد على أي حال اسمًا لا يطابق الكلمات المرئية."}],"answer":0},{"q":"

أيّ CSS يُخفي ملاحظة «نفدت التذاكر» عن المستخدمين المبصرين لكنه يُبقيها في شجرة إمكانية الوصول؟

","options":[{"text":"display: none","why":"تزيل display none العنصر من شجرة إمكانية الوصول ومن الشاشة معًا، فلا تسمعه قارئات الشاشة أبدًا."},{"text":"visibility: hidden","why":"visibility hidden تزيل المحتوى من شجرة إمكانية الوصول أيضًا."},{"text":"opacity: 0 على البطاقة الأم","why":"هذا يُخفي البطاقة كلها عن المبصرين، وهو عكس ما تريده تمامًا، ولا يساعد مستخدمي قارئ الشاشة أيضًا."},{"text":"كلاس visually-hidden يقصّ العنصر إلى مربع بحجم 1px مع position: absolute","why":"صحيح. العنصر ما زال يُرسَم، فيبقى في الشجرة، لكنه لا يشغل أي مساحة مرئية."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"

Harbour Lights dates

\n
\n

Friday

\n

12 June, 8 pm

\n

SAR 180

\n
\n
\n

Saturday

\n

13 June, 8 pm

\n

SAR 180

\n
","css":".event { border: 1px solid #c9c4dc; border-radius: 12px; padding: 12px 16px; margin-block-end: 12px; }\n.event h3 { margin: 0 0 4px; }\n.event p { margin: 4px 0; display: flex; align-items: center; gap: 6px; }\n.icon { width: 16px; height: 16px; fill: #5b5670; }\n.sold { text-decoration: line-through; color: #6b6680; }\n\n/* Add a .visually-hidden class here if you need one */\n","js":""},"solution":{"html":"

Harbour Lights dates

\n
\n

Friday

\n

12 June, 8 pm

\n

SAR 180 (sold out)

\n
\n
\n

Saturday

\n

13 June, 8 pm

\n

SAR 180

\n
","css":".event { border: 1px solid #c9c4dc; border-radius: 12px; padding: 12px 16px; margin-block-end: 12px; }\n.event h3 { margin: 0 0 4px; }\n.event p { margin: 4px 0; display: flex; align-items: center; gap: 6px; }\n.icon { width: 16px; height: 16px; fill: #5b5670; }\n.sold { text-decoration: line-through; color: #6b6680; }\n\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n","js":""},"checks":[{"id":"sold-out-text","test":"return /sold out/i.test($('#fri-price').textContent);"},{"id":"sold-out-in-tree","test":"const p = $('#fri-price'); const walker = document.createTreeWalker(p, NodeFilter.SHOW_TEXT); let n; while ((n = walker.nextNode())) { if (!/sold out/i.test(n.textContent)) continue; let el = n.parentElement; let ok = true; while (el) { const cs = getComputedStyle(el); if (cs.display === 'none' || cs.visibility === 'hidden' || el.getAttribute('aria-hidden') === 'true' || el.hidden) ok = false; if (el === p) break; el = el.parentElement; } if (ok && !p.closest('[aria-hidden=\"true\"]')) return true; } return false;"},{"id":"icons-hidden","test":"const icons = $$('svg'); return icons.length === 4 && icons.every((s) => s.closest('[aria-hidden=\"true\"]'));"},{"id":"saturday-available","test":"return !/sold out/i.test($('#sat-price').textContent) && /SAR 180/.test($('#sat-price').textContent);"}],"title":"أخبر الشجرة بما تراه العين","prompt":"

سعر يوم الجمعة في Ticketly (#fri-price) مشطوب وباهت اللون لأن تذاكر ذلك الموعد نفدت، لكن قارئ الشاشة لا يسمع إلا “SAR 180”. وفي الوقت نفسه قد تُعلَن كل أيقونة SVG زخرفية على أنها رسم بلا تسمية.

\n
    \n
  1. أضف الكلمتين sold out إلى #fri-price لتصلا إلى شجرة إمكانية الوصول. يمكنك إظهارهما، أو إخفاؤهما بصريًا باستخدام كلاس .visually-hidden (لا display: none).
    2. \n
  2. أخفِ أيقونات <svg> الزخرفية الأربع كلها عن التقنيات المساعدة.
    3. \n
  3. اترك موعد السبت (#sat-price) متاحًا.
    4. \n
\n","hints":["النص الذي عليه display: none أو visibility: hidden يُزال من شجرة إمكانية الوصول أيضًا، فلن يُعلَن.","كلاس visually-hidden يقصّ العنصر إلى 1px باستخدام position: absolute وoverflow: hidden وclip-path: inset(50%).","تحصل الأيقونات الزخرفية على aria-hidden=“true” على عنصر نفسه."],"explanation":"

الخطّ المشطوب بصري بحت، لذلك يحتاج المعنى إلى نص. العنصر <span class="visually-hidden">(sold out)</span> يُبقي الكلمات في شجرة إمكانية الوصول بينما يبقى التصميم كما هو؛ والنص المرئي العادي صحيح بالقدر نفسه، وربما أفضل للمبصرين الذين قد يفوّتون الخطّ المشطوب. الأيقونات لا تضيف شيئًا لا يقوله النص أصلًا، لذلك تزيلها aria-hidden="true" من الشجرة وتُبقي الإعلان قصيرًا: “Friday, heading level 3. 12 June, 8 pm. SAR 180 (sold out)”.

\n","checkLabels":{"sold-out-text":"سعر الجمعة يحتوي الكلمتين “sold out”","sold-out-in-tree":"نص “sold out” ليس مخفيًا عن التقنيات المساعدة","icons-hidden":"الأيقونات الزخرفية الأربع كلها مخفية باستخدام aria-hidden=“true”","saturday-available":"السبت ما زال يعرض SAR 180 وغير مُعلَّم بأن تذاكره نفدت"}},"words":667,"readMinutes":4}