ستطلق أدوات مطوّري البرامج في 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. ومع ذلك، فإن معظم هذه العقد تحدث فقط في الشجرة الداخلية ولا تتعرض للتكنولوجيا المساعدة. بما أنّ أدوات مطوّري البرامج تجمع معلومات تسهيل الاستخدام مباشرةً من عملية عرض الصفحة، هذا هو تمثيل الشجرة الذي تتعامل معه أدوات المطوّرين.
شجرة تسهيل الاستخدام الكاملة في "أدوات مطوّري البرامج"
شجرة جديدة لتسهيل الاستخدام متزامنة مع شجرة نموذج العناصر في المستند (DOM) حتى يتمكّن المطوّرون من التبديل بين الشجرتين نأمل أن تكون الشجرة الجديدة أكثر قابلية للاستكشاف وفائدة وسهولة في الاستخدام.
بعد أن تعرّفت على آلية عمل شجرة تسهيل الاستخدام، يمكنك استخدام أدوات مطوّري البرامج للاطّلاع على شكل طريقة العرض الجديدة على شكل شجرة. يتم استخدام مستند HTML التالي الذي يتضمّن عنوانًا وعنوانًا رئيسيًا وزرين لعرض الشجرة.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
لن تتيح لك طريقة العرض السابقة في شكل شجرة استكشاف سوى عقدة واحدة وأصولها.
الآن، عند تبديل الشجرة الجديدة، ستحلّ محل طريقة عرض شجرة نموذج عناصر المستند وتسمح لك بالاطّلاع على شجرة تسهيل الاستخدام الكاملة للصفحة:
إنشاء شجرة بطيئة
لتحسين أداء الشجرة حتى في المواقع الأكبر حجمًا، يتم إنشاء الشجرة بكسر على الواجهة الأمامية أثناء استكشافها. بعد توسيع عُقدة في الشجرة، يتم استرجاع العناصر الثانوية للعُقد من خلال بروتوكول أدوات مطوري البرامج في Chrome (CDP) وتتم إعادة إنشاء الشجرة.
مباشر
يكون العرض التدرّجي الجديد متاحًا ويتم تحديثه ديناميكيًا في حال تغيُّر شجرة تسهيل الاستخدام في أداة الربط. ويتّصِل بالآليات نفسها التي ترسل إشعارًا إلى التكنولوجيا المساعِدة بالتغييرات التي تطرأ على الشجرة، ويستخدم ذلك لإرسال أحداث إلى الواجهة الأمامية في "أدوات مطوري البرامج" تتضمّن عُقدًا معدّلة. من الناحية العملية، تستجيب الواجهة الخلفية لـ CDP إلى التحديثات المتعلّقة بالشجرة، وتتتبّع العُقد التي تمّ طلبها من قبل، وترسل الأحداث إلى الواجهة الأمامية في "أدوات مطوري البرامج" في حال تغيّر أيّ من هذه العُقد.
حكاية العديد من الأشجار
في وصف ما هي شجرة تسهيل الاستخدام، تعرّفت على كيفية إنشاء Blink لشجرة تسهيل الاستخدام لنموذج DOM الذي يعرضه، وكيفية جلب DevTools لهذه الشجرة من خلال CDP. على الرغم من أنّ هذا صحيح، إلا أنّنا أغفلنا بعض التعقيدات في هذا الوصف. في الواقع، هناك الكثير من الطرق المختلفة للاطّلاع على شجرة تسهيل الاستخدام في Chromium. عند تصميم طريقة العرض الشجرية الجديدة لواجهة أدوات المطوّرين، اتّخذنا بعض الخيارات بشأن الجزء الذي أردنا عرضه من العناصر الداخلية لميزة تسهيل الاستخدام في Chromium.
الأنظمة الأساسية
لكل نظام أساسي واجهة برمجة تطبيقات مختلفة لإمكانية الاستخدام، ومع أنّ شكل الشجرة هو نفسه على جميع الأنظمة الأساسية، تختلف واجهة برمجة التطبيقات للتفاعل مع الشجرة، ويمكن أن تختلف أسماء السمات. تعرِض "أدوات المطوّرين" الشجرة الداخلية لواجهة Chromium حيث تميل الأدوار والسمات إلى مطابقة تلك المحدّدة في مواصفات ARIA.
إطارات متعدّدة وميزة "عزل المواقع الإلكترونية"
وبما أنّ Chromium لا يضع محتوى كل علامة تبويب في عمليات العرض المختلفة فقط، بل يعزل أيضًا المستندات التي تتم على عدة مواقع إلكترونية من خلال عمليات عارض مختلفة، فعلينا الاتصال بكل مستند فرعي خارج المعالجة بشكل منفصل من خلال CDP واسترجاع شجرة تسهيل الاستخدام الخاصة به. بعد ذلك، نجمع هذه الأشجار الفرعية معًا في الواجهة الأمامية لإظهار شجرة متسقة واحدة، على الرغم من أنّها موجودة في عمليات عرض مختلفة في Chromium.
العقد التي تم تجاهلها وغير المثيرة للاهتمام
نخفي بعض العقد تلقائيًا: العقد التي تم تجاهلها والعقد التي لها الدور "عام" بدون اسم. لا تحمل هذه العقد أي معنى دلالي، وفي حال العقد التي تم تجاهلها، لا يتم عرضها على التكنولوجيا المساعِدة. نخفي هذه العُقد لتجنّب اكتظاظ العرض التدرّجي للحساب. وفي حال عدم إجراء ذلك، ستبدو شجرة تسهيل الاستخدام لمعظم صفحات الويب على النحو التالي:
يُرجى العِلم أنّ هذا يعني بشكل أساسي أنّنا بحاجة إلى إنشاء شجرة أخرى غير تلك المتوفّرة في الخلفية. لنفترض مثلاً أنّ لدينا العقد أ وب وج وx، حيث تحتوي العقدة أ على العقدتين x وb، وتحتوي العقدة x على العقدة ج. إذا كانت X عقدة تم تجاهلها، سنزيلها من الشجرة وننشئ بدلاً من ذلك شجرة يكون فيها C فرعًا من A.
في الواجهة الأمامية، ننشئ الشجرة الكاملة بما في ذلك العقد التي تم تجاهلها، ولا نزيل هذه العقد إلا قبل عرضها مباشرةً. نفعل ذلك لسببَين:
- يسهّل ذلك التعامل مع تعديلات العقد من الخلفية، لأنّنا نمتلك بنية الشجرة نفسها في كلتا النقطتَين الطرفيتَين. على سبيل المثال، إذا تمت إزالة العقدة B في المثال، فسنحصل على تحديث للعقدة X (بسبب تغيير عناصرها الثانوية)، ولكن إذا قمنا بتنقيح تلك العقدة، فسنجد صعوبة في اكتشاف ما يجب تحديثه.
- يضمن ذلك أنّ جميع عقد نموذج كائن المستند (DOM) تتضمّن عقدة سهولة وصول مقابلة. عند تبديل الشجرة، نختار العقدة المقابلة للعقدة المحدّدة حاليًا في شجرة نموذج DOM. في المثال السابق، إذا بدّل المستخدم الشجرة أثناء تحديد عقدة DOM المقابلة لـ X، ندخل X بين العُقدتَين A وB ونختار X في الشجرة. ويسمح ذلك للمستخدم بفحص عقدة تسهيل الاستخدام لجميع عقد DOM والمساعدة في تحديد سبب تجاهل العقدة.
أفكار مستقبلية
ولا يمثل إطلاق شجرة تسهيل الاستخدام الجديدة سوى البداية. لدينا بعض الأفكار لمشاريع مستقبلية يمكننا إنشاؤها استنادًا إلى طريقة العرض الجديدة، ولكننا نتطلّع أيضًا إلى معرفة ملاحظاتك.
فلاتر بديلة
كما أوضحنا أعلاه، نستبعد حاليًا العقد التي نرى أنّها غير مثيرة للاهتمام. يمكننا توفير طريقة لإيقاف هذا السلوك وعرض جميع العقد، أو توفير فلاتر بديلة مثل عرض العقد المميّزة أو عرض العناوين.
تمييز مشاكل إمكانية الوصول
يمكننا دمج تحليل "أفضل الممارسات المتعلقة بتسهيل الاستخدام" مع الشجرة وتسليط الضوء على مشاكل تسهيل الاستخدام مباشرةً في العقد المعنيّة.
عرض إجراءات تسهيل الاستخدام في "أدوات مطوري البرامج"
إنّ الشجرة التي نعرضها حاليًا هي أحادية الاتجاه تمامًا: فهي تتيح لنا الحصول على فكرة عن المعلومات التي سيتم تقديمها إلى التكنولوجيا المساعِدة عند تصفّح صفحة ويب معيّنة. تمثّل إجراءات تسهيل الاستخدام عملية التواصل في الاتجاه الآخر: فهي تسمح للتكنولوجيا المساعِدة بالتصرّف في واجهة المستخدم المعروضة. يمكننا عرض مثل هذه الإجراءات في "أدوات مطوري البرامج" للسماح بإجراءات مثل "النقر أو التمرير" أو تغيير القيم على الصفحة باستخدام واجهة برمجة التطبيقات المتاحة للتكنولوجيا المساعِدة.