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