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