تقدّم هذه الصفحة مرجعًا شاملاً لميزات تسهيل الاستخدام في "أدوات مطوري البرامج في Chrome". وهو مخصَّص لمطوّري الويب الذين:
- أن تكون على دراية أساسية بأدوات مطوري البرامج، مثل كيفية فتحها.
- على دراية بالمبادئ وأفضل الممارسات المتعلّقة بتسهيل الاستخدام
والغرض من هذا المرجع هو مساعدتك في اكتشاف جميع الأدوات المتوفرة في "أدوات مطوري البرامج" والتي يمكن أن تساعدك في فحص إمكانية الوصول إلى الصفحة.
راجِع استخدام أدوات مطوّري البرامج في Chrome باستخدام التكنولوجيا المساعِدة إذا كنت تبحث عن مساعدة في استخدام أدوات مطوّري البرامج باستخدام تكنولوجيا مساعِدة، مثل قارئ الشاشة.
راجع تعرّف على إمكانية الوصول إذا كنت ترغب في التعرّف على كيفية تطوير مواقع ويب يمكن الوصول إليها.
نظرة عامة على ميزات تسهيل الاستخدام في "أدوات مطوري البرامج في Chrome"
يوضّح هذا القسم مدى ملاءمة أدوات مطوّري البرامج لمجموعة أدوات تسهيل الاستخدام الشاملة.
عند تحديد ما إذا كان من الممكن الوصول إلى الصفحة أم لا، ينبغي أن تضع في اعتبارك سؤالين عامين:
- هل يمكنني التنقّل في الصفحة باستخدام لوحة مفاتيح أو قارئ شاشة؟
- هل تم ترميز عناصر الصفحة بشكل صحيح لبرامج قراءة الشاشة؟
بشكل عام، يمكن أن تساعدك أدوات مطوّري البرامج في إصلاح الأخطاء المتعلقة بالسؤال رقم 2، لأنّه من السهل رصد هذه الأخطاء بطريقة مبرمَجة. إنّ السؤال رقم 1 مهم بنفس القدر، ولكن للأسف لا يمكن أن تساعدك "أدوات مطوري البرامج" في الإجابة عن هذا السؤال. الطريقة الوحيدة للعثور على الأخطاء المتعلقة بالسؤال رقم 1 هي محاولة استخدام صفحة بلوحة مفاتيح أو قارئ شاشة بنفسك. تعرّف على كيفية إجراء مراجعة لإمكانية الوصول لمعرفة المزيد.
التدقيق في إمكانية الوصول إلى إحدى الصفحات
بشكل عام، يمكنك استخدام عمليات التحقّق من إمكانية الوصول ضمن لوحة Lighthouse لتحديد ما إذا:
- تم ترميز الصفحة بشكل صحيح لبرامج قراءة الشاشة.
- العناصر النصية على الصفحة بها نِسب تباين كافية. يمكنك أيضًا الاطّلاع على تسهيل قراءة موقعك الإلكتروني.
للتدقيق في صفحة:
- انتقِل إلى عنوان URL الذي تريد تدقيقه.
في "أدوات مطوري البرامج"، انقر على علامة التبويب Lighthouse. يعرض لك "أدوات مطوري البرامج" خيارات ضبط مختلفة.
بالنسبة إلى الجهاز، اختَر الجهاز الجوّال إذا كنت تريد محاكاة جهاز جوّال. يؤدي هذا الخيار إلى تغيير سلسلة وكيل المستخدم بشكل مختلف وتغيير حجم إطار العرض. إذا تم عرض إصدار الصفحة المخصص للأجهزة الجوّالة بشكل مختلف عن إصدار الموقع الإلكتروني المخصّص لأجهزة الكمبيوتر، قد يكون لهذا الخيار تأثير كبير في نتائج التدقيق.
في القسم Lighthouse، تأكَّد من تفعيل تسهيل الاستخدام. عطّل الفئات الأخرى إذا كنت تريد استبعادها من التقرير واتركها مفعّلة إذا كنت تريد اكتشاف طرق أخرى لتحسين جودة صفحتك.
يتيح لك قسم التقييد التحكّم في الشبكة ووحدة المعالجة المركزية، وهو أمر مفيد عند تحليل أداء التحميل. يجب أن يكون هذا الخيار غير مرتبط بنتيجة إمكانية الوصول، لذا يمكنك استخدام ما تفضله.
يتيح لك مربّع الاختيار محو مساحة التخزين محو كل مساحة التخزين قبل تحميل الصفحة أو الاحتفاظ بمساحة التخزين بين عمليات تحميل الصفحات. ومن المحتمل أيضًا ألا يكون هذا الخيار ذا صلة بنتيجة إمكانية الوصول، لذا يمكنك استخدام ما تفضله.
انقر على إنشاء التقرير. وبعد مرور 10 إلى 30 ثانية، ستقدّم "أدوات مطوّري البرامج" تقريرًا. يقدم لك تقريرك نصائح مختلفة حول كيفية تحسين إمكانية الوصول إلى الصفحة.
انقر على عملية تدقيق لمعرفة المزيد من المعلومات عنها.
انقر على مزيد من المعلومات للاطّلاع على مستندات التدقيق.
راجع أيضًا: إضافة aXe
قد تفضِّل استخدام إضافة aXe أو إضافة Lighthouse بدلاً من لوحة Lighthouse المتوفرة تلقائيًا في Chrome. وهي تقدّم المعلومات نفسها بشكل عام، لأنّ aXe هو المحرّك الأساسي الذي يشغِّل لوحة Lighthouse. تحتوي إضافة aXe على واجهة مستخدم مختلفة وتصف عمليات التدقيق بشكل مختلف قليلاً.
تتمثل إحدى ميزات إضافة aXe على لوحة التدقيق في أنها تتيح لك فحص العُقد التي تعذّر تنفيذها وإبرازها.
جزء إمكانية الوصول
يمكنك من خلال لوحة "تسهيل الاستخدام" عرض شجرة تسهيل الاستخدام وسمات ARIA وخصائص إمكانية الوصول المحسوبة لعُقد DOM.
لفتح لوحة "إمكانية الوصول":
- انقر على علامة التبويب العناصر.
- في شجرة DOM، اختَر العنصر الذي تريد فحصه.
- انقر على علامة التبويب Accessibility (تسهيل الاستخدام). قد تكون علامة التبويب هذه مخفية خلف زر المزيد من علامات التبويب
.
عرض موضع عنصر في شجرة تسهيل الاستخدام
شجرة تسهيل الاستخدام هي مجموعة فرعية من شجرة نموذج العناصر في المستند. فهي تحتوي فقط على عناصر من شجرة DOM ذات صلة ومفيدة لعرض محتويات الصفحة في قارئ الشاشة.
افحص موضع عنصر في شجرة تسهيل الاستخدام من لوحة تسهيل الاستخدام.
يتيح لك طريقة العرض هذه استكشاف عقدة واحدة فقط وما يتبعها. لاستكشاف شجرة تسهيل الاستخدام بالكامل، اتّبِع الخطوات التالية.
(معاينة) استكشاف شجرة تسهيل الاستخدام بملء الصفحة
يتيح لك عرض الصفحة الكاملة لشجرة تسهيل الاستخدام استكشاف الشجرة الكاملة ويساعدك في فهم كيفية تعرُّض محتوى الويب للتكنولوجيا المساعِدة بشكل أفضل.
لاستكشاف شجرة تسهيل الاستخدام:
- ضَع علامة في المربّع
تفعيل شجرة تسهيل الاستخدام بملء الصفحة. في شريط الإجراءات في أعلى الصفحة، انقر على إعادة تحميل أدوات مطوّري البرامج.
في أعلى يسار لوحة العناصر، يمكنك تفعيل زر
التبديل إلى العرض التدرّجي لتسهيل الاستخدام.
تصفُّح شجرة تسهيل الاستخدام يمكنك توسيع العُقد أو النقر للاطّلاع على التفاصيل ضمن المواقع المحسوبة.
اختَر عقدة وانقر على زرّ
التبديل إلى عرض شجرة نموذج العناصر في المستند (DOM) للعودة إلى شجرة نموذج العناصر في المستند (DOM).تم الآن اختيار عقدة DOM المناظرة. وهذه طريقة رائعة لفهم التعيين بين عقدة DOM وعقدة شجرة إمكانية الوصول الخاصة بها.
عرض سمات ARIA للعنصر
تضمن سمات ARIA حصول برامج قراءة الشاشة على جميع المعلومات التي تحتاجها لتمثيل محتوى الصفحة بشكل صحيح.
يمكنك الاطّلاع على سمات ARIA للعنصر في جزء "تسهيل الاستخدام".
عرض ترتيب المصدر للعناصر على الشاشة
لا تظهر العناصر على الصفحة دائمًا بالترتيب الذي تظهر به في المصدر. قد يربك هذا المستخدمين الذين يعتمدون على التكنولوجيا المساعدة للتنقل عبر الويب.
للاطّلاع على ترتيب المصدر وتصحيح أخطائه على موقعك الإلكتروني:
- افحص عنصرًا في الصفحة.
- في العناصر > تسهيل الاستخدام > عارض ترتيب المصادر، ضَع علامة في المربّع
عرض ترتيب المصدر.
في إطار العرض، تحدّد DevTools العناصر المتداخلة مع الحدود وتميّزها بأرقام متوافقة مع ترتيب المصدر.
عرض خصائص إمكانية الوصول المحسوبة لأحد العناصر
يحتسب المتصفّح بعض خصائص تسهيل الاستخدام ديناميكيًا. ويمكن عرض هذه الخصائص في قسم الخصائص المحسوبة ضمن لوحة إمكانية الوصول.
يمكنك عرض خصائص تسهيل الاستخدام المحسوبة لأحد العناصر في لوحة تسهيل الاستخدام.
الاطّلاع على النص المنخفض التباين وحلّ المشاكل فيه
يمكن أن تعثر أدوات مطوّري البرامج تلقائيًا على المشاكل ذات التباين المنخفض وتقترح ألوانًا أفضل لمساعدتك على حلّها. راجع جعل موقعك الإلكتروني أكثر قابلية للقراءة لمزيد من المعلومات.