يهدف هذا الدليل إلى مساعدة المستخدمين الذين يعتمدون بشكل أساسي على التكنولوجيا المساعِدة، مثل برامج قراءة الشاشة في الوصول إلى أدوات مطوري البرامج في Chrome واستخدامها. "أدوات مطوري البرامج في Chrome" هي حزمة من أدوات مطوّري البرامج على الويب مدمَجة في متصفّح Google Chrome. يمكنك الاطّلاع على مرجع تسهيل الاستخدام إذا كنت تبحث عن ميزات أدوات مطوّري البرامج تتعلّق بتحسين إمكانية الوصول إلى صفحة ويب.
لا تزال إمكانية الوصول إلى أدوات مطوّري البرامج قيد التنفيذ. تعمل بعض اللوحات وعلامات التبويب بشكل أفضل مع التكنولوجيا المساعدة من غيرها. يرشدك هذا الدليل إلى اللوحات الأكثر سهولة ويسلط الضوء على مشكلات محددة قد تواجهها طوال العملية.
نظرة عامة
قبل البدء، من المفيد أن يكون لديك نموذج عقلي لكيفية تنظيم واجهة مستخدم أدوات مطوري البرامج. يتم تقسيم أدوات مطوّري البرامج إلى سلسلة من لوحات يتم تنظيمها في ARIA tablist. مثلاً:
- تتيح لك لوحة العناصر عرض عقد DOM أو CSS وتغييرها.
- تتيح لك لوحة Console قراءة سجلات JavaScript وعناصر التعديل المباشر.
داخل منطقة المحتوى في كل لوحة، هناك عدد من الأدوات المختلفة، والتي يُشار إليها غالبًا باسم علامات التبويب أو الأجزاء في المستندات. على سبيل المثال، تحتوي لوحة العناصر على علامات تبويب إضافية لفحص أدوات معالجة الأحداث وشجرة تسهيل الاستخدام وغير ذلك الكثير. يعد التمييز بين علامات التبويب والأجزاء أمرًا عشوائيًا إلى حد ما. السبب الوحيد الذي يظهر لك أو مصطلح آخر هو الحفاظ على الاتساق مع باقي وثائق DevTools الرسمية.
اختصارات لوحة المفاتيح
يمكنك الاستعانة بمرجع اختصارات لوحة المفاتيح في أدوات مطوّري البرامج كورقة مرجعية مفيدة. تأكد من وضع إشارة مرجعية عليها والرجوع إليها أثناء استكشاف اللوحات المختلفة.
فتح "أدوات مطوري البرامج"
للبدء، اطّلع على فتح "أدوات مطوري البرامج في Chrome". هناك عدة طرق لفتح "أدوات مطوري البرامج"، إما من خلال اختصارات لوحة المفاتيح أو عناصر القائمة.
التنقّل بين اللوحات
التنقّل باستخدام لوحة المفاتيح
- مع فتح أدوات مطوري البرامج، اضغط على Control+] أو Command+] (نظام التشغيل Mac) لتركيز اللوحة التالية.
- اضغط على Control+[ أو Command+[ (نظام التشغيل Mac) للتركيز على اللوحة السابقة.
- ومن الممكن أيضًا استخدام Shift+Tab لنقل التركيز إلى
tablistفي اللوحة واستخدام مفاتيح الأسهم لتغيير اللوحات، ولكن قد يكون استخدام الاختصارات المذكورة سابقًا أسرع.
المشاكل المعروفة
- قد تنقل بعض اللوحات، مثل لوحتَي وحدة التحكّم والأداء، التركيز إلى قسم المحتوى فور تفعيلهما. يمكن أن يجعل هذا التنقل باستخدام مفاتيح الأسهم صعبًا.
- يتم الإعلان عن اسم اللوحة المحددة، ولكن فقط بعد قراءة المحتوى محل التركيز في اللوحة. هذا يمكن أن يجعل من السهل جدًا تفويت ذلك.
التنقّل حسب قائمة الأوامر
للتركيز على لوحة معيّنة، يمكنك استخدام قائمة الأوامر:
- بعد فتح "أدوات مطوري البرامج"، اضغط على Control+Shift+P أو Command+Shift+P (نظام التشغيل Mac) لفتح قائمة الأوامر. قائمة الأوامر هي عبارة عن مربّع تحرير وسرد تلقائي ضبابي لنتائج البحث.
- اكتب اسم اللوحة التي تريد فتحها، ثم استخدِم لوحة المفاتيح السهم المتّجه للأسفل للانتقال إلى الخيار الصحيح.
- اضغط على Enter لتشغيل أمر.
على سبيل المثال، لفتح لوحة العناصر:
- افتح قائمة الطلبات.
- اكتب E ثم L. يتم تحديد خيار اللوحة > إظهار العناصر.
- اضغط على Enter لتنفيذ الأمر الذي يؤدي إلى فتح اللوحة.
يؤدي فتح لوحة بهذه الطريقة إلى توجيه التركيز إلى محتوى اللوحة نفسها. في حال لوحة العناصر، ينتقل التركيز إلى شجرة نموذج العناصر.
لوحة العناصر
فحص عنصر على الصفحة
- انتقِل إلى العنصر الذي تريد فحصه باستخدام مؤشر قارئ الشاشة.
- يمكنك محاكاة النقر بالماوس الأيمن على العنصر لفتح قائمة السياقات.
- حدِّد الخيار فحص. يؤدي ذلك إلى فتح لوحة العناصر والتركيز على العنصر في شجرة DOM.
تم تحديد شجرة DOM على أنّها ARIA tree. راجع التنقُّل في شجرة DOM باستخدام
لوحة مفاتيح للاطّلاع على مثال.
نسخ الرمز الخاص بأحد العناصر في شجرة DOM
- مع التركيز على عقدة في شجرة DOM، يمكنك إظهار قائمة السياقات التي تظهر عند النقر بزر الماوس الأيمن.
- وسِّع الخيار نسخ.
- اختَر نسخ outerHTML.
المشاكل المعروفة
- لا يؤدي غالبًا نسخ outerHTML إلى تحديد العقدة الحالية، بل يحدد عُقدتها الرئيسية بدلاً من ذلك. ومع ذلك، يجب أن تظل محتويات العنصر داخل HTML الخارجي المنسوخ.
تعديل سمات عنصر في شجرة نموذج العناصر في المستند
- مع التركيز على عقدة في شجرة DOM، اضغط على Enter لجعلها قابلة للتعديل.
- اضغط على Tab للتنقل بين قيم السمات. عندما تسمع "مسافة" فأنت داخل إدخال نص فارغ ويمكنك كتابة قيمة سمة جديدة.
- اضغط على Control+Enter أو Command+Enter (نظام التشغيل Mac) لقبول التغيير وسماع محتوى العنصر بالكامل.
المشاكل المعروفة
- عند الكتابة في نص الإدخال، لن تتلقّى أي ملاحظات. إذا ارتكبت خطأً إملائيًا واستخدمت مفاتيح الأسهم لاستكشاف إدخالك، فلن تحصل أيضًا على أي ملاحظات. أسهل طريقة للتحقق من عملك هي قبول التغيير، ثم الاستماع إلى الإعلان عن العنصر بأكمله.
تعديل ملف HTML لعنصر في شجرة DOM
- مع التركيز على عقدة في شجرة DOM، اضغط على Enter لجعلها قابلة للتعديل.
- اضغط على Tab للتنقل بين قيم السمات. عندما تسمع اسم العنصر، على سبيل المثال، "h2"، فأنت داخل إدخال نصي وقد تغير نوع العنصر.
- اضغط على Control+Enter أو Command+Enter (نظام التشغيل Mac) لقبول التغيير.
على سبيل المثال، تؤدي كتابة h3 والضغط على Control+Enter أو
Command+Enter (Mac) إلى تغيير علامتَي البداية والنهاية للعنصر إلى h3.
علامات تبويب لوحة العناصر
تحتوي لوحة العناصر على علامات تبويب إضافية لفحص عناصر مثل CSS عند تطبيقها على عنصر أو مكانه في شجرة تسهيل الاستخدام.
- مع التركيز على عقدة في شجرة DOM، اضغط على مفتاح التبويب (Tab) إلى أن تسمع أنه تم اختيار لوحة الأنماط.
- استخدِم السهم المتّجه لليمين لاستكشاف علامات التبويب الأخرى المتاحة.
يحوِّل شجرة DOM العناصر التي تتضمّن سمات href إلى روابط قابلة للتركيز، لذا قد تحتاج إلى
الضغط على مفتاح التبويب (Tab) أكثر من مرة للوصول إلى لوحة "الأنماط".
المشاكل المعروفة
لا يمكن الوصول إلى علامتَي التبويب نقطة إيقاف DOM والخصائص عبر لوحة المفاتيح.
جزء الأنماط
في لوحة الأنماط، ستظهر لك عناصر التحكُّم في أنماط الفلترة وتبديل حالات العناصر (مثل
:active و:focus) وتبديل الفئات وإضافة فئات جديدة. تتوفّر أيضًا أداة فحص أنماط فعّالة لاستكشاف وتعديل الأنماط المطبَّقة حاليًا على العنصر الذي يركّز على شجرة DOM.
إنّ المفهوم الأساسي لفهم لوحة الأنماط هو أنّه لا يعرض سوى أنماط العقدة المحدّدة حاليًا في شجرة DOM. على سبيل المثال، لنفترض أنّك انتهيت من فحص أنماط عقدة <header>، وتريد الآن الاطّلاع على أنماط عقدة <footer>. لإجراء ذلك، عليك أولاً اختيار العقدة <footer> في شجرة DOM. قد تجد أنه من الأسرع استخدام سير عمل
الفحص لفحص عقدة تقع بالقرب من عقدة footer بشكل عام (مثل
رابط داخل التذييل) التي تركّز على شجرة DOM، ثم استخدِم لوحة المفاتيح للانتقال
إلى العقدة المحدّدة التي تهمّك.
التنقل في جزء الأنماط
نظرًا لأنّ جميع أدوات النمط تتصل بطريقة أو بأخرى بلوحة الأنماط، فمن المنطقي أن تصبح خبيرًا في هذه الأداة أولاً.
- عندما يكون التركيز على لوحة الأنماط، اضغط على مفتاح التبويب (Tab) لنقل التركيز إلى الداخل واستكشاف محتواه.
- اضغط على Tab حتى يصبح النمط الأول نشطًا. إذا كنت تستخدم قارئ شاشة، فسيتم الإعلان عن هذا النمط الأول باسم "element.style {}".
- اضغط على السهم المتجه للأسفل للتنقل بين قائمة الأنماط بترتيب الخصوصية. يعلن قارئ الشاشة عن كل نمط بدءًا من اسم ملف CSS ورقم السطر الذي يظهر عليه النمط واسم النمط نفسه. على سبيل المثال: "main.css:233 .card__img {}"
- اضغط على Enter لفحص نمط بمزيد من التفاصيل. يبدأ التركيز على نسخة قابلة للتعديل من اسم النمط.
- اضغط على Tab للتنقل بين الإصدارات القابلة للتعديل لكل خاصية في CSS والقيم المقابلة لها. في نهاية كل كتلة نمط يوجد حقل نصي فارغ قابل للتعديل يمكنك استخدامه لإضافة خصائص CSS إضافية.
- يمكنك الاستمرار في الضغط على Tab للتنقل عبر قائمة الأنماط، أو الضغط على Escape للخروج من هذا الوضع والرجوع إلى التنقل باستخدام مفاتيح الأسهم.
تأكد من قراءة مرجع لوحة المفاتيح لجزء الأنماط للحصول على اختصارات إضافية.
المشاكل المعروفة
- وإذا كنت تستخدم الحقل النصي Filter القابل للتعديل، لن تتمكّن بعد ذلك من التنقّل في قائمة الأنماط.
تبديل حالة العنصر
لتبديل حالة عنصر، مثل :active أو :focus:
- انتقِل إلى لوحة الأنماط واضغط على مفتاح التبويب (Tab) إلى أن يظهر التركيز على الزر تبديل حالة العنصر.
- اضغط على Enter لتوسيع مجموعة حالات العناصر. يتم تقديم حالات العنصر كمجموعة من مربعات الاختيار.
- اضغط على Tab حتى يتم التركيز على الحالة الأولى،
:active. - اضغط على مفتاح المسافة لتفعيله. إذا كان العنصر المحدّد حاليًا في شجرة نموذج العناصر في المستند (DOM) يتضمّن نمط
:active، يتم تطبيقه الآن. - استمر في الضغط على Tab لاستكشاف جميع الحالات المتاحة.
إضافة صف مغادر
بجانب الزر تبديل حالة العنصر، يظهر الزر فئات العناصر. انقل التركيز إليها بالضغط على مفتاح التبويب (Tab) ثم Enter. يتم نقل التركيز إلى حقل نص التعديل بعنوان إضافة فئة جديدة.
يُستخدم زر فئات العناصر بشكل أساسي لإضافة فئات حالية إلى عنصر. على سبيل المثال، إذا كانت ورقة الأنماط تحتوي على فئة مساعد باسم .clearfix، يمكنك الضغط على . داخل حقل التعديل النصي لعرض قائمة اقتراحات للفئات واستخدام السهم المتّجه للأسفل للعثور على اقتراح .clearfix. أو اكتب اسم الفئة بنفسك واضغط على Enter لتطبيقه.
إضافة قاعدة نمط جديدة
بجانب الزر فئات العناصر يوجد الزر قاعدة أنماط جديدة. انقل التركيز إليها من خلال الضغط على Tab والضغط على Enter. ينتقل التركيز إلى حقل نصي قابل للتعديل داخل عارض النمط. المحتوى النصي الأولي للحقل هو اسم علامة العنصر الذي تم اختياره في شجرة DOM. يمكنك كتابة أي اسم فئة تريده في هذا الحقل ثم الضغط على مفتاح التبويب (Tab) لتخصيص خصائص CSS له.
علامة تبويب محسوبة
مع التركيز على علامة التبويب المحتوى المحسوب، اضغط على مفتاح التبويب (Tab) لنقل التركيز إلى الداخل واستكشاف محتواه. ضمن علامة التبويب Computed، تتوفر عناصر تحكم لاستكشاف خصائص CSS التي يتم تطبيقها فعليًا على عنصر بترتيب الدقة.
استكشاف جميع الأنماط المحسوبة
اضغط على Tab حتى تصل إلى مجموعة الأنماط المحسوبة. ويتم تقديمها على أنّها
tree ARIA. يؤدي توسيع مربّع قائمة إلى الكشف عن أدوات اختيار لغة CSS التي تطبّق النمط المحسوب. يتم تنظيم أدوات الاختيار هذه حسب الخصوصية. يعلن قارئ الشاشة عن القيمة المحسوبة، وهي أداة اختيار لغة CSS المطابقة حاليًا، واسم ملف ورقة الأنماط التي تحتوي على أداة الاختيار، ورقم السطر لأداة الاختيار.
المشاكل المعروفة
- وإذا كنت تستخدم حقل النص فلترة، لن تتمكّن من فحص الأنماط.
علامة تبويب أدوات معالجة الأحداث
من داخل لوحة العناصر، يمكنك فحص أدوات معالجة الحدث التي تم تطبيقها على عنصر باستخدام علامة التبويب أدوات معالجة الأحداث. عندما يكون التركيز على لوحة الأنماط، اضغط على السهم المتّجه لليمين للانتقال إلى علامة التبويب أدوات معالجة الأحداث.
الاطّلاع على أدوات معالجة الأحداث
يتم تقديم أدوات معالجة الأحداث في صورة tree ARIA. يمكنك استخدام مفاتيح الأسهم للتنقّل بينها. يعلن قارئ الشاشة عن اسم كائن DOM الذي يتم إرفاق أداة معالجة الحدث به، بالإضافة إلى اسم الملف الذي يتم فيه تحديد أداة معالجة الحدث ورقم السطر الموجودة فيه.
جزء إمكانية الوصول
مع التركيز على لوحة تسهيل الاستخدام، اضغط على مفتاح التبويب (Tab) لنقل التركيز إلى الداخل واستكشاف محتواه. ضمن لوحة تسهيل الاستخدام، تظهر عناصر تحكّم لاستكشاف شجرة تسهيل الاستخدام وسمات ARIA المطبَّقة على العنصر ومواقع تسهيل الاستخدام المحسوبة له.
شجرة تسهيل الاستخدام
يتم عرض شجرة تسهيل الاستخدام على شكل ARIA tree حيث يقابل كل treeitem عنصرًا في DOM. تعلن الشجرة عن الدور المحسوب للعقدة المحددة. يتم الإعلان عن العناصر العامة مثل div وspan على أنها "GeneralContainer" في العرض التدرّجي. استخدم مفاتيح الأسهم لاجتياز الشجرة
واستكشاف العلاقات بين الأصل والفرع.
المشاكل المعروفة
- قد لا يتم عرض نوع شجرة ARIA الذي تستخدمه لوحة تسهيل الاستخدام بشكل صحيح في Chrome لأجهزة قراءة الشاشة في نظام التشغيل macOS مثل VoiceOver. يُرجى الاشتراك في مشكلة Chromium رقم 868480 لتلقّي إشعارات بمدى التقدّم في حل هذه المشكلة.
- يتم ترميز القسمين سمات ARIA والخصائص المحسوبة كشجرتَي ARIA، إلا أنّهما لا يتضمنان حاليًا إدارة التركيز، لذا لا يمكن تشغيلهما من خلال لوحة المفاتيح.
لوحة التدقيق
تتيح لك لوحة عمليات التدقيق إجراء سلسلة من الاختبارات على موقع إلكتروني للتحقّق من المشاكل الشائعة المتعلّقة بالأداء وتسهيل الاستخدام وتحسين محرّكات البحث وعدد من الفئات الأخرى.
ضبط عملية التدقيق وتنفيذها
- عند فتح لوحة عمليات التدقيق لأول مرة، يتم التركيز على الزر تشغيل التدقيق في نهاية النموذج. يتم ضبط النموذج تلقائيًا لإجراء عمليات تدقيق لكل فئة باستخدام محاكاة الأجهزة الجوّالة على محاكاة اتصال شبكة الجيل الثالث.
- استخدِم Shift+Tab أو انتقِل مرة أخرى في وضع "التصفُّح" لتغيير إعدادات التدقيق.
- عندما تكون مستعدًا لإجراء التدقيق، انتقِل مرّة أخرى إلى الزر Run Audit (تشغيل التدقيق) واضغط على Enter.
- يتم نقل التركيز إلى نافذة نمطية مع الزر إلغاء الذي يسمح لك بالخروج من التدقيق. قد تسمع سلسلة من الرموز الصوتية أثناء إجراء التدقيق وإعادة تحميل الصفحة عدة مرات.
المشاكل المعروفة
- لا يتم حاليًا ترميز الأقسام المختلفة من نموذج الإعداد باستخدام عنصر
fieldset. وقد يكون من الأسهل التنقّل بينها في وضع "التصفُّح" لمعرفة عناصر التحكُّم المرتبطة بكل قسم. - لا يتوفّر أي رمز صوتي أو إشعار بمنطقة مباشرة عند انتهاء التدقيق. يستغرق الأمر بشكل عام 30 ثانية تقريبًا، وبعدها ستتمكن من الانتقال إلى النتائج. قد يكون استخدام "وضع التصفّح" أسهل طريقة للوصول إلى النتائج.
التنقّل في تقرير التدقيق
يتم تنظيم تقرير التدقيق في أقسام تتوافق مع كل فئة من فئات التدقيق. يفتح التقرير قائمة بالدرجات لكل فئة. هذه النتائج هي أيضًا روابط يمكن
استخدامها للتخطي إلى الأقسام ذات الصلة. وتتوفر عناصر details قابلة للتوسيع داخل كل قسم، وتحتوي على معلومات ذات صلة بعمليات التدقيق التي تم اجتيازها أو التي تعذّر إتمامها. وفقًا للإعدادات التلقائية، يتم عرض عمليات التدقيق غير الناجحة فقط.
ينتهي كل قسم بعنصر details أخير يحتوي على جميع عمليات التدقيق التي تم اجتيازها.
لإجراء تدقيق جديد، استخدِم Shift+Tab للخروج من التقرير والبحث عن زر إجراء تدقيق.