هذه الصفحة هي مرجع شامل لميزات تسهيل الاستخدام في "أدوات مطوّري البرامج في Chrome". وهي مخصّصة لمطوّري الويب الذين:
- لديهم فهم أساسي لأدوات مطوري البرامج، مثل كيفية فتحها
- على دراية بـ مبادئ تسهيل الاستخدام وأفضل الممارسات.
الغرض من هذا المرجع هو مساعدتك في اكتشاف جميع الأدوات المتاحة في "أدوات مطوّري البرامج" التي يمكن أن تساعدك في فحص إمكانية الوصول إلى صفحة.
إذا كنت تبحث عن مساعدة بشأن التنقّل في "أدوات مطوّري البرامج" باستخدام تكنولوجيا مساعِدة، مثل قارئ شاشة، يمكنك الاطّلاع على مقالة التنقّل في "أدوات مطوّري البرامج في Chrome" باستخدام تكنولوجيا مساعِدة.
إذا أردت التعرّف على كيفية تطوير مواقع إلكترونية تسهل قراءتها، يمكنك الاطّلاع على مقالة التعرّف على تسهيل الاستخدام.
نظرة عامة على ميزات تسهيل الاستخدام في "أدوات مطوّري البرامج في Chrome"
يوضّح هذا القسم كيف تتناسب "أدوات مطوّري البرامج" مع مجموعة أدوات تسهيل الاستخدام الشاملة.
عند تحديد ما إذا كانت الصفحة تسهل قراءتها، يجب أن تضع في اعتبارك سؤالَين عامّين:
- هل يمكنني التنقّل في الصفحة باستخدام لوحة مفاتيح أو قارئ شاشة؟
- هل تم وضع علامات على عناصر الصفحة بشكل صحيح لبرامج قراءة الشاشة؟
بشكل عام، يمكن أن تساعدك "أدوات مطوّري البرامج" في إصلاح الأخطاء المتعلّقة بالسؤال رقم 2، لأنّه من السهل رصد هذه الأخطاء بطريقة تلقائية. السؤال رقم 1 لا يقل أهمية، ولكن لسوء الحظ، لا يمكن أن تساعدك "أدوات مطوّري البرامج" في ذلك. الطريقة الوحيدة للعثور على الأخطاء المتعلّقة بالسؤال رقم 1 هي تجربة استخدام صفحة باستخدام لوحة مفاتيح أو قارئ شاشة بنفسك. لمزيد من المعلومات، يمكنك الاطّلاع على مقالة كيفية إجراء مراجعة لتسهيل الاستخدام.
تدقيق إمكانية الوصول إلى صفحة
بشكل عام، استخدِم عمليات التحقّق من تسهيل الاستخدام ضِمن لوحة Lighthouse لتحديد ما إذا كان:
- تم وضع علامات على صفحة بشكل صحيح لبرامج قراءة الشاشة
- تحتوي العناصر النصية في الصفحة على نسب تباين كافية يمكنك أيضًا الاطّلاع على مقالة تسهيل قراءة موقعك الإلكتروني.
لتدقيق صفحة، اتّبِع الخطوات التالية:
- انتقِل إلى عنوان URL الذي تريد تدقيقه.
في "أدوات مطوّري البرامج"، انقر على لوحة Lighthouse. تعرض لك "أدوات مطوّري البرامج" خيارات إعداد مختلفة.
بالنسبة إلى الجهاز، اختَر الجهاز الجوّال إذا كنت تريد محاكاة جهاز جوّال. يغيّر هذا الخيار سلسلة وكيل المستخدم ويغيّر حجم إطار العرض. إذا كانت نسخة الموقع الإلكتروني المخصّصة للأجهزة الجوّالة من الصفحة تظهر بشكل مختلف عن نسخة الموقع الإلكتروني المخصّصة لأجهزة الكمبيوتر، فقد يكون لهذا الخيار تأثير كبير في نتائج التدقيق.
في قسم Lighthouse ، تأكَّد من تفعيل تسهيل الاستخدام. يمكنك إيقاف الفئات الأخرى إذا كنت تريد استبعادها من تقريرك. اتركها مفعّلة إذا كنت تريد اكتشاف طرق أخرى لتحسين جودة صفحتك.
يتيح لك قسم تقليل سرعة نقل البيانات تقليل سرعة الشبكة ووحدة المعالجة المركزية، ما يكون مفيدًا عند تحليل أداء التحميل. من المفترض ألا يكون لهذا الخيار أي تأثير في نتيجة تسهيل الاستخدام، لذا يمكنك استخدام أي خيار تفضّله.
يتيح لك مربّع الاختيار محو مساحة التخزين محو جميع مساحة التخزين قبل تحميل الصفحة، أو الاحتفاظ بمساحة التخزين بين عمليات تحميل الصفحة. من المحتمل أيضًا ألا يكون لهذا الخيار أي تأثير في نتيجة تسهيل الاستخدام، لذا يمكنك استخدام أي خيار تفضّله.
انقر على إنشاء التقرير. بعد 10 إلى 30 ثانية، تقدّم لك "أدوات مطوّري البرامج" تقريرًا. يقدّم لك التقرير نصائح مختلفة حول كيفية تحسين إمكانية الوصول إلى الصفحة.
انقر على عملية تدقيق لمعرفة المزيد عنها.
انقر على مزيد من المعلومات لعرض مستندات عملية التدقيق هذه.
يمكنك أيضًا الاطّلاع على: إضافة aXe
قد تفضّل استخدام إضافة aXe أو إضافة Lighthouse بدلاً من لوحة Lighthouse المتاحة تلقائيًا في Chrome. تقدّم هاتان الإضافتان بشكل عام المعلومات نفسها، لأنّ aXe هو المحرّك الأساسي الذي يشغّل لوحة Lighthouse. تتضمّن إضافة aXe واجهة مستخدم مختلفة وتصف عمليات التدقيق بشكل مختلف قليلاً.
إحدى الميزات التي تتميّز بها إضافة aXe عن لوحة عمليات التدقيق هي أنّها تتيح لك فحص العُقد التي تعذّر اجتيازها وتمييزها.
اختبار إعادة تدفّق المحتوى باستخدام "شريط أدوات الجهاز"
تنصّ إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) على أن يظل محتوى الويب قابلاً للعرض بدون فقدان المعلومات حتى عند تغيير حجم إطار العرض أو تغيير اتجاهه. من خلال محاذاة المحتوى في عمود واحد، يتم دعم المستخدمين الذين يستخدمون نصًا مكبّرًا. لاختبار كيفية إعادة تدفّق المحتوى، يمكنك تغيير حجم إطار العرض ديناميكيًا باستخدام شريط أدوات الجهاز في لوحة Lighthouse.
لتغيير حجم إطار العرض، اسحب المقابض إلى أي أبعاد تحتاج إليها. بالنسبة إلى الأبعاد المحدّدة التي يجب اختبارها، يمكنك الاطّلاع على معيار النجاح لإعادة تدفّق المحتوى في إرشادات WCAG.
علامة التبويب "تسهيل الاستخدام"
علامة التبويب تسهيل الاستخدام هي المكان الذي يمكنك فيه عرض شجرة تسهيل الاستخدام وسمات ARIA وخصائص تسهيل الاستخدام المحسوبة لعُقد نموذج العناصر في المستند.
لفتح علامة التبويب تسهيل الاستخدام ، اتّبِع الخطوات التالية:
- انقر على لوحة العناصر.
- في شجرة نموذج العناصر في المستند، اختَر العنصر الذي تريد فحصه.
- انقر على علامة التبويب تسهيل الاستخدام. قد تكون علامة التبويب هذه مخفية خلف زر علامات تبويب إضافية keyboard_double_arrow_right .
يمكنك سحب علامة التبويب تسهيل الاستخدام إلى المقدمة للوصول إليها بسرعة أكبر في المستقبل.
عرض موضع عنصر في شجرة تسهيل الاستخدام
شجرة تسهيل الاستخدام هي مجموعة فرعية من شجرة نموذج العناصر في المستند. لا تحتوي إلا على العناصر من شجرة نموذج العناصر في المستند التي تكون ذات صلة ومفيدة لعرض محتويات الصفحة في قارئ شاشة.
لفحص موضع عنصر في شجرة تسهيل الاستخدام من علامة التبويب تسهيل الاستخدام، يمكنك تفعيل خيار عرض شجرة تسهيل الاست3خدام.
يستبدل هذا الخيار شجرة نموذج العناصر في المستند في لوحة العناصر بشجرة تسهيل استخدام كاملة للصفحة. تساعدك هذه الشجرة في فهم كيفية عرض محتوى الويب للتكنولوجيا المساعِدة بشكل أفضل.
لتصفّح شجرة تسهيل الاستخدام، يمكنك توسيع العُقد واختيارها للاطّلاع على تفاصيلها ضِمن الخصائص المحسوبة.
في أي وقت، يمكنك التبديل مرة أخرى إلى شجرة نموذج العناصر في المستند. ستظل عُقدة نموذج العناصر في المستند المقابلة محدّدة. هذه طريقة رائعة لفهم عملية الربط بين عُقدة نموذج العناصر في المستند وعُقدة شجرة تسهيل الاستخدام.
عرض سمات ARIA لعنصر
تضمن سمات ARIA حصول برامج قراءة الشاشة على جميع المعلومات التي تحتاج إليها لتمثيل محتويات الصفحة بشكل صحيح.
يمكنك عرض سمات ARIA لعنصر في علامة التبويب "تسهيل الاستخدام".
عرض ترتيب العناصر على الشاشة حسب المصدر
لا تظهر العناصر على الصفحة دائمًا بالترتيب الذي تظهر به في المصدر. قد يؤدي ذلك إلى إرباك المستخدمين الذين يعتمدون على التكنولوجيا المساعِدة للتنقّل على الويب.
لعرض ترتيب المصدر وتصحيح أخطائه على موقعك الإلكتروني، اتّبِع الخطوات التالية:
- افحص عنصرًا على الصفحة.
- في العناصر > تسهيل الاستخدام > عارض ترتيب المصدر، ضَع علامة في check_box عرض ترتيب المصدر.
في إطار العرض، تحدّد "أدوات مطوّري البرامج" العناصر المتداخلة بحدود وتضع عليها أرقامًا تتوافق مع ترتيبها في المصدر.
عرض خصائص تسهيل الاستخدام المحسوبة لعنصر
يحسب المتصفّح بعض خصائص تسهيل الاستخدام ديناميكيًا. يمكن عرض هذه الخصائص في قسم الخصائص المحسوبة في علامة التبويب تسهيل الاستخدام.
يمكنك عرض خصائص تسهيل الاستخدام المحسوبة لعنصر في علامة التبويب "تسهيل الاستخدام".
علامة التبويب "العرض"
استخدِم علامة التبويب العرض لمحاكاة ميزات وسائط CSS معيّنة بدون تحديدها يدويًا في الرمز أو بيئة الاختبار. تغيّر ميزات الوسائط هذه مظهر صفحة الويب استنادًا إلى الإعدادات المفضّلة لجهاز المستخدم. لاختبار إمكانية الوصول إلى صفحتك من الناحية المرئية، افتح علامة التبويب العرض واستكشِف الخيارات التالية:
- محاكاة ضعف البصر لعرض صفحتك من خلال عدة حالات مختلفة لمحاكاة ضعف البصر
- محاكاة ميزة
prefers-color-schemeلوسائط CSS لمعرفة شكل صفحتك عند تفعيل الوضع الداكن أو الوضع الفاتح يعتبر الكثيرون أنّ الوضع الداكن هو خيار جمالي، ولكنّ الوضع الداكن كأداة لتسهيل الاستخدام يوضّح مدى فائدته في حالات أخرى. - محاكاة نوع وسائط CSS لعرض صفحتك بنمط وسائط الطباعة أو الشاشة
- محاكاة ميزة وسائط CSS
forced-colorsلمعرفة شكل صفحتك إذا فعّل وكيل المستخدم وضع الألوان المفروضة - محاكاة ميزة
prefers-contrastلوسائط CSS لعرض محتوى الويب بقيمة تباين أعلى أو أقل أو بقيمة محدّدة - محاكاة ميزة
prefers-reduced-motionلوسائط CSS لعرض محتوى الويب مع تقليل الحركة قد يشعر بعض المستخدمين بالانزعاج أو الغثيان من المحتوى المتحرّك. استخدِم هذا الخيار لمعرفة شكل صفحتك بدون الرسوم المتحرّكة أو ميزات مثل التمرير السلس. - محاكاة ميزة
prefers-reduced-transparencyلوسائط CSS لمعرفة شكل محتوى الويب إذا طلب المستخدم تقليل تأثيرات الطبقة الشفافة أو الشفافة جزئيًا المستخدَمة على الجهاز
اكتشاف النص المنخفض التباين وإصلاحه
يمكن أن تعثر "أدوات مطوّري البرامج" تلقائيًا على المشاكل المتعلّقة بالتباين المنخفض وتقترح ألوانًا أفضل لمساعدتك في إصلاحها. لمزيد من المعلومات، يمكنك الاطّلاع على مقالة تسهيل قراءة موقعك الإلكتروني.