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