ستطلق أدوات مطوّري البرامج في 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 DevTools (CDP) ويتم إعادة إنشاء الشجرة.
مباشر
يكون العرض التدرّجي الجديد متاحًا ويتم تحديثه ديناميكيًا في حال تغيُّر شجرة تسهيل الاستخدام في أداة الربط. ويتم ربطها بالآليات نفسها التي من شأنها إرسال إشعارات إلى التكنولوجيا المساعِدة بشأن التغييرات في الشجرة، ويتم استخدامها لبث الأحداث إلى واجهة أدوات المطوّرين التي تتضمّن العقد المعدَّلة. في الممارسة العملية، تستمع الخلفية في "إدارة العملاء بالاستناد إلى البيانات" إلى التعديلات التي تطرأ على الشجرة وتتتبّع العقد التي تمّ طلبها من قبل وتُرسِل الأحداث إلى الواجهة الأمامية لواجهة ��لمطوّرين في حال تغيّر أيّ من هذه العقد.
حكاية العديد من الأشجار
في وصف ما هي شجرة تسهيل الاستخدام، تعرّفت على كيفية إنشاء Blink لشجرة تسهيل الاستخدام لنموذج DOM الذي يعرضه، وكيفية جلب DevTools لهذه الشجرة من خلال CDP. على الرغم من أنّ هذا صحيح، إلا أنّنا أغفلنا بعض التعقيدات في هذا الوصف. في الواقع، هناك العديد من الطرق المختلفة لتجربة شجرة تسهيل الاستخدام في Chromium. عند تصميم طريقة العرض الشجرية الجديدة لواجهة أدوات المطوّرين، اتّخذنا بعض الخيارات بشأن الجزء الذي أردنا عرضه من العناصر الداخلية لميزة تسهيل الاستخدام في Chromium.
الأنظمة الأساسية
لكل نظام أساسي واجهة برمجة تطبيقات مختلفة لإمكانية الاستخدام، ومع أنّ شكل الشجرة هو نفسه على جميع الأنظمة الأساسية، تختلف واجهة برمجة التطبيقات للتفاعل مع الشجرة، ويمكن أن تختلف أسماء السمات. تعرِض "أدوات المطوّرين" الشجرة الداخلية لواجهة Chromium حيث تميل الأدوار والسمات إلى مطابقة تلك المحدّدة في مواصفات ARIA.
إطارات متعدّدة وميزة "عزل المواقع الإلكترونية"
بما أنّ Chromium لا يضع محتوى كل علامة تبويب في عمليات عرض مختلفة فحسب، بل يعزل المستندات على مستوى الموقع الإلكتروني في عمليات عرض مختلفة، علينا الاتصال بكل مستند فرعي خارج العملية بشكل منفصل عبر CDP واسترداد شجرة تسهيل الاستخدام الخاصة به. وبعد ذلك، ندمج هذه الأشجار الفرعية معًا في الواجهة الأمامية ليبدو لنا ظهور شجرة واحدة متماسكة، على الرغم من أنها تعيش في عمليات عارض مختلفة في Chromium.
العقد التي تم تجاهلها وغير المثيرة للاهتمام
نخفي بعض العقد تلقائيًا: العقد التي تم تجاهلها والعقد التي لها الدور "عام" بدون اسم. لا تحمل هذه العقد أي معنى دلالي، وفي حال العقد التي تم تجاهلها، لا يتم عرضها على التكنولوجيا المساعِدة. نخفي هذه العقد لتجنُّب تشويش عرض الشجرة. وفي حال عدم إجراء ذلك، ستبدو شجرة تسهيل الاستخدام لمعظم صفحات الويب على النحو التالي:
يُرجى العِلم أنّ هذا يعني بشكل أساسي أنّنا بحاجة إلى إنشاء شجرة أخرى غير تلك المتوفّرة في الخلفية. لنفترض مثلاً أنّ لدينا العقد أ وب وج وx، حيث تحتوي العقدة أ على العقدتين x وb، وتحتوي العقدة x على العقدة ج. إذا كانت X عقدة يتم تجاهلها، فإننا نُزيل X من الشجرة وننشئ بدلاً من ذلك شجرة حيث C هي فرع من A إلى A.
في الواجهة الأمامية، ننشئ الشجرة الكاملة بما في ذلك العقد التي تم تجاهلها، ولا نزيل هذه العقد إلا قبل عرضها مباشرةً. ونحن نفعل ذلك لسببين:
- يسهّل ذلك التعامل مع تحديثات العُقد من الخلفية، وذلك لأنّ لدينا بنية العرض التدرّجي نفسها في نقطتَي النهاية. على سبيل المثال، إذا تمت إزالة العقدة "ب" في المثال، سنتلقّى تعديلاً على العقدة "س" (لأنّ العقد الفرعية قد تغيّرت)، ولكن إذا أزلنا هذه العقدة، سنواجه صعوبة في تحديد ما يجب تعديله.
- يضمن أنّ جميع عُقد DOM تحتوي على عُقدة تسهيل استخدام مقابلة. عند تبديل العرض التدرّجي، نختار العُقدة المقابلة للعقدة المحدّدة حاليًا في شجرة نموذج العناصر في المستند. في المثال السابق، إذا بدّل المستخدم الشجرة أثناء اختيار عقدة نموذج DOM المقابلة لـ X، سنُدخل X بين العقدتَين A وB ونختار X في الشجرة. ويسمح ذلك للمستخدم بفحص عقدة تسهيل الاستخدام لجميع عقد DOM والمساعدة في تحديد سبب تجاهل العقدة.
الأفكار المستقبلية
إنّ إطلاق شجرة تسهيل الاستخدام الجديدة هو مجرد البداية. لدينا بعض الأفكار لمشاريع مستقبلية يمكننا إنشاؤها استنادًا إلى طريقة العرض الجديدة، ولكننا نتطلّع أيضًا إلى معرفة ملاحظاتك.
فلاتر بديلة
��ما هو موضح أعلاه، نعمل حاليًا على تصفية العُقد التي تُعتبر غير مثيرة للاهتمام. يمكننا توفير طريقة لإيقاف هذا السلوك وعرض جميع العقد، أو توفير فلاتر بديلة مثل عرض العقد المميّزة أو عرض العناوين.
تمييز مشاكل إمكانية الوصول
يمكننا دمج تحليل "أفضل الممارسات المتعلقة بإمكانية الوصول" مع الشجرة وتسليط الضوء على مشكلات إمكانية الوصول مباشرةً على النقاط المخالفة.
عرض إجراءات تسهيل الاستخدام في "أدوات مطوّري البرامج"
إنّ الشجرة التي نعرضها حاليًا هي أحادية الاتجاه تمامًا: فهي تتيح لنا الحصول على فكرة عن المعلومات التي سيتم تقديمها إلى التكنولوجيا المساعِدة عند تصفّح صفحة ويب معيّنة. تمثل إجراءات إمكانية الوصول الاتصال في الاتجاه الآخر: فهي تسمح للتكنولوجيا المساعدة بالعمل على واجهة المستخدم المعروضة. يمكننا عرض مثل هذه الإجراءات في "أدوات مطوري البرامج" للسماح بإجراءات مثل "النقر أو التمرير" أو تغيير القيم على الصفحة باستخدام واجهة برمجة التطبيقات المتاحة للتكنولوجيا المساعِدة.