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