ستطلق أدوات مطوّري البرامج في Chrome شجرة كاملة لإمكانية الوصول، ما يسهّل على المطوّرين الحصول على نظرة عامة على الشجرة بأكملها. في هذه المشاركة، يمكنك التعرّف على كيفية إنشاء هذه الشجرة وكيفية استخدامها في عملك.
ما هي شجرة تسهيل الاستخدام؟
تستخدم التكنولوجيا المساعِدة، مثل برامج قراءة الشاشة، واجهة برمجة التطبيقات Chromium Accessibility API للتفاعل مع محتوى الويب. النموذج الأساسي لواجهة برمجة التطبيقات هذه هو شجرة تسهيل الاستخدام: شجرة لكائنات تسهيل الاستخدام يمكن للتكنولوجيا المساعِدة البحث فيها عن السمات والخصائص وتنفيذ الإجراءات. يُشكّل مطوّرو الويب شجرة تسهيل الاستخدام ويُعدّلونها بشكل أساسي من خلال سمات DOM، مثل سمات ARIA لصفحات HTML.
في أدوات مطوّري البرامج في Chrome، نوفّر لوحة تسهيل الاستخدام لمساعدة المطوّرين في فهم كيفية ظهور المحتوى الخاص بهم للتكنولوجيا المساعِدة. على وجه التحديد، عند اختيار عقدة في أداة عرض شجرة DOM، يتم عرض سمات عقدة تسهيل الاستخدام المقابلة في اللوحة مع عرض لأسلاف العقدة وعناصرها الفرعية المباشرة.
كيف يتم إنشاء الشجرة؟
قبل الاطّلاع على شكل العرض التدرّجي الكامل الجديد هذا في أدوات مطوّري البرامج، لنطّلِع على تعريف شجرة تسهيل الاستخدام بمصطلحات أكثر وضوحًا. شجرة تسهيل الاستخدام هي مشتقة من شجرة نموذج عناصر المستند. إنّ بنيته متماثلة تقريبًا، ولكن تم تبسيطها لإزالة العقد التي لا تحتوي على محتوى دلالي، مثل عنصر <div> المستخدَم فقط لتنسيق المحتوى. ولكل عقدة في الشجرة دور مثل Button أو Heading، وغالبًا ما يكون لها اسم يمكن أن يكون من سمات ARIA أو مشتقًا من محتوى العقدة. إذا نظرنا إلى مستند HTML:
<html>
<head>
<title>How old are you?</title>
</head>
<body>
<label for="age">Age</label>
<input id="age" type="number" name="age" value="42">
<div>
<button>Back</button>
<button>Next</button>
</div>
</body>
</html>
ينشئ مُنشئ العرض في Chromium، المُسمى Blink، شجرة تسهيل الاستخدام الداخلية على النحو التالي تقريبًا.
role='rootWebArea' focusable name='How old are you?'
role='genericContainer' ignored
role='genericContainer' ignored
role='labelText'
role='staticText' name='Age'
role='spinButton' editable focusable name='Age' value='42'
role='genericContainer' editable
role='staticText' editable name='42'
role='genericContainer'
role='button' focusable name='Back'
role='staticText' name='Back'
role='button' focusable name='Next'
role='staticText' name='Next'
يُرجى العِلم أنّ هذا التمثيل يحتوي على عدّة عقد زائدة لها الدور genericContainer، ما يبدو أنّه يتناقض مع العبارة أعلاه التي تنص على أنّ شجرة تسهيل الاستخدام هي مشتقّة مبسّطة من شجرة نموذج عناصر المستند. ومع ذلك، لا تظهر معظم هذه العقد إلا في الشجرة الداخلية ولن تظهر للتكنولوجيا المساعِدة. بما أنّ أدوات مطوّري البرامج تجمع معلومات تسهيل الاستخدام مباشرةً من عملية عرض الصفحة، هذا هو تمثيل الشجرة الذي تتعامل معه أدوات المطوّرين.
شجرة تسهيل الاستخدام الكاملة في "أدوات مطوّري البرامج"
تمّت مزامنة شجرة تسهيل الاستخدام الجديدة الكاملة مع شجرة نموذج DOM ليتمكّن المطوّرون من التبديل بين الشجرتَين. نأمل أن تكون الشجرة الجديدة أكثر قابلية للاستكشاف وفائدة وسهولة في الاستخدام.
بعد أن تعرّفت على آلية عمل شجرة تسهيل الاستخدام، يمكنك استخدام أدوات مطوّري البرامج للاطّلاع على شكل طريقة العرض الجديدة على شكل شجرة. يتم استخدام مستند HTML التالي الذي يتضمّن عنوانًا وعنوانًا رئيسيًا وزرين لعرض الشجرة.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
لن تتيح لك طريقة العرض السابقة في شكل شجرة استكشاف سوى عقدة واحدة وأصولها.
الآن، عند تفعيل الشجرة الجديدة، ستحلّ محل طريقة عرض شجرة نموذج العناصر في المستند وتسمح لك بالاطّلاع على شجرة تسهيل الاستخدام الكاملة للصفحة:
إنشاء شجرة بطيئة
لتحسين أداء الشجرة حتى في المواقع الإلكترونية الأكبر حجمًا، يتمّ إنشاؤها بشكلٍ بطيء في الواجهة الأمامية أثناء استكشافها. بعد توسيع عقدة في الشجرة، يتم جلب العناصر الفرعية للعقد من خلال بروتوكول Chrome DevTools (CDP) ويتم إعادة إنشاء الشجرة.
مباشر
يكون العرض التدرّجي الجديد متاحًا ويتم تحديثه ديناميكيًا في حال تغيُّر شجرة تسهيل الاستخدام في أداة الربط. ويتم ربطها بالآليات نفسها التي تُرسِل إشعارات إلى التكنولوجيا المساعِدة بشأن التغييرات في الشجرة، وتستخدم ذلك لبثّ الأحداث إلى واجهة أدوات المطوّرين التي تتضمّن العقد المعدّلة. في الممارسة العملية، تستمع الخلفية في "إدارة العملاء بالاستناد إلى البيانات" إلى التعديلات التي تطرأ على الشجرة وتتتبّع العقد التي تمّ طلبها من قبل وتُرسِل الأحداث إلى الواجهة الأمامية لواجهة المطوّرين في حال تغيّر أيّ من هذه العقد.
قصة الأشجار الكثيرة
في وصف ما هي شجرة تسهيل الاستخدام، تعرّفت على كيفية إنشاء Blink لشجرة تسهيل الاستخدام لنموذج DOM الذي يعرضه، وكيفية جلب DevTools لهذه الشجرة من خلال CDP. على الرغم من أنّ هذا صحيح، إلا أنّنا أغفلنا بعض التعقيدات في هذا الوصف. في الواقع، هناك الكثير من الطرق المختلفة للاطّلاع على شجرة تسهيل الاستخدام في Chromium. عند تصميم طريقة العرض الشجرية الجديدة لواجهة أدوات المطوّرين، اتّخذنا بعض الخيارات بشأن الجزء الذي أردنا عرضه من العناصر الداخلية لميزة تسهيل الاستخدام في Chromium.
الأنظمة الأساسية
لكل نظام أساسي واجهة برمجة تطبيقات مختلفة لإمكانية الاستخدام، ومع أنّ شكل الشجرة هو نفسه على جميع الأنظمة الأساسية، تختلف واجهة برمجة التطبيقات للتفاعل مع الشجرة، ويمكن أن تختلف أسماء السمات. تعرِض "أدوات مطوّري البرامج" الشجرة الداخلية لواجهة Chromium حيث تميل الأدوار والسمات إلى مطابقة تلك المحدّدة في مواصفات ARIA.
إطارات متعددة وعزل المواقع الإلكترونية
بما أنّ Chromium لا يضع محتوى كل علامة تبويب في عمليات عرض مختلفة فحسب، بل يعزل المستندات على مستوى الموقع الإلكتروني في عمليات عرض مختلفة، علينا الاتصال بكل مستند فرعي خارج العملية بشكل منفصل عبر CDP واسترداد شجرة تسهيل الاستخدام الخاصة به. بعد ذلك، نجمع هذه الأشجار الفرعية معًا في الواجهة الأمامية لإظهار شجرة متّسقة واحدة، على الرغم من أنّها موجودة في عمليات عرض مختلفة في Chromium.
العقد التي تم تجاهلها وغير المثيرة للاهتمام
نخفي بعض العقد تلقائيًا: العقد التي تم تجاهلها والعقد التي لها الدور "عام" بدون اسم. لا تحمل هذه العقد أي معنى دلالي، وفي حال العقد التي تم تجاهلها، لا يتم عرضها على التكنولوجيا المساعِدة. نخفي هذه العقد لتجنُّب تشويش عرض الشجرة. وفي حال عدم إجراء ذلك، ستبدو شجرة تسهيل الاستخدام لمعظم صفحات الويب على النحو التالي:
يُرجى العِلم أنّ هذا يعني بشكل أساسي أنّنا بحاجة إلى إنشاء شجرة أخرى غير تلك المتوفّرة في الخلفية. لنفترض مثلاً أنّ لدينا العقد "أ" و"ب" و"ج" و"س"، حيث تتضمّن العقدة "أ" العقدتين "س" و"ب"، وتتضمّن العقدة "س" العقدة "ج". إذا كانت X عقدة تم تجاهلها، سنزيلها من الشجرة وننشئ بدلاً من ذلك شجرة يكون فيها C فرعًا من A.
في الواجهة الأمامية، ننشئ الشجرة الكاملة بما في ذلك العقد التي تم تجاهلها، ولا نزيل هذه العقد إلا قبل عرضها مباشرةً. نفعل ذلك لسببَين:
- يسهّل ذلك التعامل مع تعديلات العقد من الخلفية، لأنّنا نمتلك بنية الشجرة نفسها في كلتا النقطتَين الطرفيتَين. على سبيل المثال، إذا تمت إزالة العقدة "ب" في المثال، سنتلقّى تعديلاً على العقدة "س" (لأنّ العقد الفرعية قد تغيّرت)، ولكن إذا أزلنا تلك العقدة، سنواجه صعوبة في تحديد ما يجب تعديله.
- يضمن ذلك أنّ جميع عقد نموذج كائن المستند (DOM) تتضمّن عقدة سهولة وصول مقابلة. عند تبديل الشجرة، نختار العقدة المقابلة للعقدة المحدّدة حاليًا في شجرة نموذج DOM. في المثال السابق، إذا بدّل المستخدم الشجرة أثناء اختيار عقدة نموذج DOM المقابلة لـ X، سنُدخل X بين العقدتَين A وB ونختار X في الشجرة. ويسمح ذلك للمستخدم بفحص عقدة تسهيل الاستخدام لجميع عقد DOM والمساعدة في تحديد سبب تجاهل العقدة.
أفكار مستقبلية
إنّ إطلاق شجرة تسهيل الاستخدام الجديدة هو مجرد البداية. لدينا بعض الأفكار لمشاريع مستقبلية يمكننا إنشاؤها استنادًا إلى طريقة العرض الجديدة، ولكننا نتطلّع أيضًا إلى معرفة ملاحظاتك.
الفلترة البديلة
كما أوضحنا أعلاه، نستبعد حاليًا العقد التي نرى أنّها غير مثيرة للاهتمام. يمكننا توفير طريقة لإيقاف هذا السلوك وعرض جميع العقد، أو توفير فلاتر بديلة مثل عرض العقد المميّزة أو عرض العناوين.
تمييز مشاكل إمكانية الوصول
يمكننا دمج تحليل "أفضل الممارسات المتعلقة بتسهيل الاستخدام" مع الشجرة وتسليط الضوء على مشاكل تسهيل الاستخدام مباشرةً في العقد المعنيّة.
عرض إجراءات تسهيل الاستخدام في "أدوات مطوّري البرامج"
إنّ الشجرة التي نعرضها حاليًا هي أحادية الاتجاه تمامًا: فهي تتيح لنا الحصول على فكرة عن المعلومات التي سيتم إرسالها إلى التكنولوجيا المساعِدة عند تصفّح صفحة ويب معيّنة. تمثّل إجراءات تسهيل الاستخدام عملية التواصل في الاتجاه الآخر: فهي تسمح للتكنولوجيا المساعِدة بالتصرّف في واجهة المستخدم المعروضة. يمكننا عرض هذه الإجراءات في DevTools للسماح بإجراءات مثل "النقر" أو الانتقال للأعلى أو للأسفل أو تغيير القيم على الصفحة باستخدام واجهة برمجة التطبيقات المتاحة للتكنولوجيا المساعِدة.