دليل كامل لأدوات الوصول

يمكن أن يكون تعلم إنشاء مواقع ويب يمكن الوصول إليها مهمة شاقة لأولئك الذين بدأوا للتو في تنفيذ ممارسات الوصول. لقد قمنا بتجميع مجموعة واسعة من أدوات الوصول ، بدءًا من الإشارات المرجعية ذات الاستخدام الفردي إلى التطبيقات الكاملة ، من أجل مساعدتك على البدء في إنشاء مواقع ويب يسهل الوصول إليها.

ARIA

وجد استطلاع WebAIM Million أن الصفحات الرئيسية التي تحتوي على ARIA بلغ متوسطها 41٪ أخطاء يمكن اكتشافها أكثر من تلك التي لا تحتوي على ARIA. ARIA هي أداة أساسية لإنشاء تطبيقات ويب معقدة ، ولكن المواصفات صارمة ويمكن أن يكون من الصعب تصحيحها من قبل أولئك الذين لا يستخدمون التكنولوجيا المساعدة بانتظام. يمكن أن تساعدنا الأدوات في التأكد من أننا نستخدم ARIA بشكل صحيح وعدم إدخال المزيد من الأخطاء إلى تطبيقاتنا.

قامت TPGi بإنشاء تطبيق مرجعي WAI-ARIA يقوم بمسح صفحتك للتأكد من أن جميع العناصر والأدوار المحددة وسمات ARIA صالحة. عند تنشيط التطبيق المختصر ، يتم فحص الصفحة بحثًا عن أي أخطاء ، وسيتم فتح علامة تبويب جديدة بالنتائج. تتضمن النتائج العدد الإجمالي للأدوار الصالحة وأي أخطاء تم اكتشافها في ARIA ومقتطفات التعليمات البرمجية الخاصة بمكان العثور على أي أخطاء بحيث يمكنك تصحيح أخطاء صفحتك بسهولة.

هناك شيء واحد لم يتم اختباره بشكل صريح في التطبيق المختصر أعلاه وهو وجود أدوار ARIA مكررة. تحتوي بعض أدوار المعالم على أسماء تبدو كما لو كانت تنطبق على عدة عناصر ، ولكن يجب استخدامها مرة واحدة فقط لكل صفحة ، مثل banner أو contentinfo . ابتكر Adrian Roselli أداة مرجعية بسيطة تستند إلى CSS للتحقق مما إذا كان قد تم تكرار أي من أدوار ARIA هذه. سيؤدي تنشيط التطبيق المختصر إلى إضافة مخطط أحمر لأي عنصر مخالف.

NerdeRegion هو امتداد Chrome يسجل جميع مخرجات أي مناطق تعيش فيها. لا تستطيع معرفة سبب إعلان قارئ الشاشة عن شيء غير متوقع؟ يمكن أن تتيح لك NerdeRegion تتبع الإعلانات ذات الطابع الزمني والعنصر المصدر الذي نشأت منه ، كل ذلك داخل لوحة في DevTools. نظرًا لإمكانية وجود أخطاء وتناقضات مع كيفية الإعلان عن مناطق aria-live بقارئات الشاشة المختلفة ، يمكن أن تكون NerdeRegion أداة رائعة لمعرفة ما إذا كانت المشكلة ناتجة عن الكود أو مجموعة الجهاز.

أدوات الاختبار التلقائي

يمكن للمطور أو المختبِر استخدام هذه الفئة من الأدوات لإجراء اختبارات تلقائية على إخراج التعليمات البرمجية الخاصة بك ، مع اكتشاف الأخطاء التي قد لا تظهر واضحة في التعليمات البرمجية المصدر. هناك العديد من الخدمات المدفوعة عالية الجودة والأدوات الأخرى بخلاف ما ذكرناه هنا ، لكننا ركزنا على الأدوات ذات العروض المجانية الشاملة من أجل تقليل الحواجز أمام الدخول. يمكن تشغيل جميع الأدوات المدرجة على صفحات ليست على الإنترنت العام ، مما يتيح دمجها بسهولة أكبر في تدفق التطوير. من المهم ملاحظة أن اختبار إمكانية الوصول معقد ويتطلب دائمًا اختبارًا يدويًا لفهم السياق الكامل للموقع ، ولكن أدوات الاختبار الآلي هذه يمكن أن تمنحك بداية قوية.

تستخدم الكثير من الأدوات محورًا للفأس تحت الغطاء ، لذلك قد يكون استخدام مجموعة من الأدوات زائدة عن الحاجة. في النهاية ، ما نوع الأداة التي تختارها يتعلق أكثر بنوع واجهة المستخدم التي تفضلها ، ومستوى الشمولية في النتائج. على سبيل المثال ، Lighthouse ، الأداة المضمنة في Google Chrome ، تستخدم مجموعة مختارة جزئية من قواعد ax-core ، لذلك إذا تمكنت من الحصول على فحص نظيف باستخدام ax DevTools ، فلن تحتاج إلى إجراء فحص Lighthouse أيضًا.

يتوفر Ax DevTools كملحق Chrome أو امتداد Firefox ويظهر كلوحة في أدوات المطور. يمكنك اختبار صفحة كاملة أو جزء منها فقط ، ويتم فرز جميع المشكلات المكتشفة حسب درجة الخطورة وتأتي مع مقتطفات التعليمات البرمجية لتسهيل تصحيح الأخطاء. يتيح لك Axe أيضًا اكتشاف أخطاء أكثر من الأدوات الآلية الأخرى من خلال ميزة الاختبارات الموجهة الذكية. تحدد الاختبارات الموجهة الذكية المناطق التي يجب اختبارها والقيام بأكبر قدر ممكن من الرفع الثقيل ، قبل طرح أسئلة المختبِر من أجل الحصول على نتيجة. يتيح لك Axe أيضًا حفظ النتائج وتصديرها ، وهو أمر مفيد للعمل من خلال إصلاح الأخطاء كجزء من عملية تطوير أطول وأكثر تعاونًا.

تعمل Accessibility Insights أيضًا على ax-core ، لكن لديها العديد من الميزات التي تميزها عن ax DevTools. يمكن تشغيله على أنظمة أساسية مختلفة ، بما في ذلك Android أو Windows أو كملحق للمتصفح. تتميز جميع إصدارات Accessibility Insights بأداة تشبه المفتش للبحث عن معلومات العنصر الفردي ، بالإضافة إلى طريقة لإجراء عمليات التحقق التلقائية. يحتوي امتداد الويب أيضًا على ميزة التقييم ، والتي تحتوي على مجموعة من الاختبارات الآلية والموجهة واليدوية للسماح لك بإنشاء تقرير كامل.

لقد كان WAVE by WebAIM جزءًا لا يتجزأ من مجموعة أدواتي. متوفر في شكل امتداد بالإضافة إلى خدمة اختبار جماعي وواجهة برمجة تطبيقات ، أجد هذه الأداة أفضل للتحقق من عملي أثناء تطويره نظرًا لبساطته وسرعته. يتم تحميل كل شيء كلوحة على جانب صفحتك ، ويمكنك الحصول على عرض شامل للأخطاء من خلال التمرير عبر الصفحة. إذا تم عرض خطأ في اللوحة الجانبية ولكنك غير متأكد من مكانه في DOM ، فيمكنك إيقاف تشغيل الأنماط لتحديد موقعه داخل العلامة. تعد ميزة WAVE الخاصة بالعنوان والمعالم أحد الأشياء المفضلة لدي حولها لأنها تضمن صحة دلالات المستندات الخاصة بي أثناء إنشائي.

يحتوي SiteImprove على امتداد Chrome مجاني بالإضافة إلى عروض الخدمات المدفوعة. مثل WAVE ، تقوم بتشغيل الامتداد على صفحة ويسرد الأخطاء في لوحة على جانب الصفحة ، بما في ذلك عوامل التصفية لأشياء مثل مستوى المطابقة والخطورة والمسؤولية. يعتبر عامل تصفية الخطورة مفيدًا بشكل خاص حيث يميل الاختبار التلقائي دائمًا إلى إنتاج بعض الإيجابيات الخاطئة.

هل سبق لك التفكير في أتمتة اختبارات إمكانية الوصول لشفرة المصدر الخاصة بك باستخدام إجراءات GitHub؟ بغض النظر عما إذا لم تكن قد تمكنت من الالتفاف حول إجراءات GitHub حتى الآن أو كنت بحاجة إلى القليل من المساعدة في إعداد سير عمل مناسب ، فإن البرنامج التعليمي الخاص بـ Adrian Bolonio يناسبك. يوضح لك خطوة بخطوة كيفية أتمتة اختبارات إمكانية الوصول الخاصة بك مع مكتبات مثل اختبارات ax و pa11y و Lighthouse و unit مباشرة في مستودع GitHub الخاص بك.

ستتعلم كيفية تكوين المستودع الخاص بك بحيث يتم تنفيذ إجراءات GitHub بمجرد إنشاء طلب سحب أو تحديثه إلى الفرع الرئيسي. إذا عثر أي من إجراءات GitHub على ثغرات في إمكانية الوصول ، فسيتعطل طلب السحب ويعطل الدمج حتى تحل الأخطاء التي تم العثور عليها. تفاصيل صغيرة تحدث فرقًا كبيرًا.

الألوان

تم العثور على أخطاء نصية منخفضة التباين في 86.4٪ من الصفحات الرئيسية العام الماضي. غالبًا ما يكون للمطورين تحكم محدود في لوحة الألوان ، لذلك من المهم محاولة إنشاء لوحة ألوان يمكن الوصول إليها في وقت مبكر من العملية قدر الإمكان.

عندما تبدأ في تصميم لوحة ألوان ، قد تكون أداة انتقاء الألوان في المتصفح مفيدة. Are My Colors Accessible هي أداة يمكن أن تساعدك في اكتشاف لوحة ألوان يمكن الوصول إليها. يحسب الوضع الأساسي نسبة التباين بين أي لونين. يمكن أن يؤثر حجم الخط ووزن الخط في نصك على نسبة التباين المطلوبة بناءً على مستوى التوافق ، وتضع هذه الأداة بشكل مفيد جميع المعايير المختلفة التي تلبيها. كما أنه يتميز بمنزلق نطاق HSL بحيث يمكنك تعديل أي من الألوان ، مع تحديث النتائج تلقائيًا أثناء إجراء التعديلات. يتيح لك وضع لوحة الألوان مقارنة كل لون في لوحة مع بعضها البعض ويعرض نسبة التباين والمعايير المستوفاة ، وهو أمر مفيد في تحديد كيفية دمج الألوان المختلفة معًا. يؤدي إجراء أي تعديلات على الألوان أيضًا إلى تحديث الرابط الثابت ، مما يتيح لك مشاركة مجموعات الألوان بسهولة مع فريقك. إذا كنت تفضل واجهة مختلفة لاختيار الألوان ، فقد صممت Atul Varma أداة مماثلة تستخدم منتقي الألوان بدلاً من منزلقات نطاق HSL.

يحاول Geenes القيام بكل ذلك من خلال إنشاء نطاقات صبغة / ظل كاملة لكل مجموعة ألوان تضيفها ، مما يسمح لك بتصميم نظام ألوان كاملة بدلاً من لوحة محدودة. بالإضافة إلى توفير نسب التباين ، يسمح لك Geenes أيضًا بتطبيق لوح الألوان الخاص بك على نماذج بالأحجام الطبيعية المختلفة ، ومحاكاة أشكال مختلفة من عمى الألوان. يمكنك تجربة معظم الميزات مجانًا ، وفتح لوحات متعددة من خلال التبرع.

يمكن أن تساعدك أدوات معينة في حل مشكلات وصول خاصة متعلقة بالألوان. يمكن أن تكون الأزرار على وجه الخصوص صعبة ، حيث لا داعي للقلق بشأن لون النص مع لون الخلفية فحسب ، بل تحتاج أيضًا إلى مراعاة خلفية الزر مع خلفية الصفحة ولون مخطط التركيز مع كلتا الخلفيات. يشرح مشروع ButtonBuddy من Stephanie Eckles هذه المتطلبات بلغة بسيطة ويساعدك على اختيار الألوان لهذه الأجزاء الفردية.

قد تفي بعض تركيبات الألوان من الناحية الفنية بمتطلبات التباين عند عرضها بواسطة أشخاص غير مصابين بعمى الألوان ، ولكنها قد تسبب مشكلات لأنواع معينة من عمى الألوان وضعف الرؤية. Who Can Use يطبق مرشحًا مرئيًا لمحاكاة أنواع مختلفة من عمى الألوان ثم يحسب نسبة تباين ألوان تقريبية.

إذا كنت ترغب في اختبار مجموعات الألوان الخاصة بك في سياق موقع موجود ، فإن Stark هو امتداد لمنتقي الألوان لمتصفح Chrome يتيح لك محاكاة أنواع معينة من عمى الألوان. بالإضافة إلى ذلك ، أنشأت Anna Monus كتابة مفيدة لأدوات عمى الألوان المضمنة بالفعل في Chrome. في حين أن هذا النوع من المحاكاة لا يمكن أبدًا أن يحل محل الاختبار بمستخدمين حقيقيين ، إلا أنه يمكن أن يساعدنا في اتخاذ خيارات أولية أفضل.

في بعض الأحيان ، كمطورين ، نبدأ العمل في مشروع قد نحتاج فيه إلى التصميم أثناء ذهابنا والبدء في كتابة التعليمات البرمجية بدون لوحة علامات تجارية كاملة ومحددة مسبقًا. بمجرد بدء التطوير ، قد يكون من الممل الاستمرار في استيراد لوحات الألوان ذهابًا وإيابًا إلى الأدوات الخارجية. هناك العديد من الخيارات للتحقق من تباين الألوان داخل بيئة التعليمات البرمجية . قام Alex Clapperton بتطوير أداة CLI حيث تقوم بتمرير لونين وتخرج نسبة التباين وتمرير المعايير مباشرة في الجهاز. نشرت BBC مدقق تباين ألوان JavaScript يأخذ لونين ويحدد ما إذا كان يفي بالمعيار الذي تريده أم لا. يمكن لأداة مثل هذه أن تعيش في قاعدة التعليمات البرمجية الخاصة بك مع اختباراتك ، أو يمكن تنفيذها في مكتبة نظام التصميم الخاص بك مثل Storybook و PatternLab وما إلى ذلك.

تأخذ A11y Color Tokens خطوة إلى الأمام وتتيح لك تلقائيًا إنشاء رموز ألوان تكميلية في CSS أو SASS. تقوم بتمرير اللون والنسبة المرغوبة لإنشاء ظل أو صبغة من ذلك اللون الذي يلبي المتطلبات. إذا كنت بحاجة إلى التحقق بسرعة من نسبة التباين لشيء ما ، فإن Chrome و Firefox يعرضان الآن معلومات تباين الألوان ضمن محددات ألوان أدوات المطور الخاصة بهما أيضًا. إذا لم تتناسب أي من هذه الأدوات مع خيالك ، فقد غطت ستيفاني والتر العديد من خيارات الأدوات الأخرى المتعلقة بالألوان في منشور مدونتها حول إمكانية الوصول إلى الألوان.

التوافق

غالبًا ما يضيف البناء من أجل التكنولوجيا المساعدة مستوى آخر من التعقيد عندما يتعلق الأمر بتصحيح الأخطاء. نظرًا لأن التكنولوجيا المساعدة هي أساسًا طبقة أخرى من الواجهة أعلى المتصفح ، فنحن الآن بحاجة إلى الاهتمام بمجموعات من المستعرضات والتقنيات المساعدة. قد يكون الخطأ موجودًا في المتصفح أو في التقنية المساعدة ، أو قد يكون موجودًا فقط في مجموعة معينة. من الجيد الاحتفاظ بقائمة أدوات تعقب الأخطاء هذه في متناول اليد عند محاولة إصلاح مشكلة معينة. بعض هذه المواقع عامة بحيث يمكنك معرفة ما إذا كان الآخرون يواجهون الخطأ الذي تواجهه ، لكن البعض الآخر يقدم فقط وسيلة للإبلاغ عن الأخطاء على انفراد.

لا تعمل جميع المستعرضات ومجموعات قارئ الشاشة جيدًا معًا ، ولا يتم دعم جميع ميزات إمكانية الوصول بشكل متساوٍ عبر المستعرضات. يمكن أن تساعدك هذه الأدوات في التحقق مما إذا كنت تواجه خطأ في مجموعة معينة من الأجهزة. HTML5 Accessibility هي قائمة بميزات HTML الأحدث وما إذا كان تطبيق المتصفح الافتراضي مدعومًا أم لا. على نفس المنوال ، يوفر دعم إمكانية الوصول قائمة بأدوار ARIA ودعمها في مجموعات المستعرضات وقارئ الشاشة الأكثر شيوعًا.

توثيق إمكانية الوصول

لا تزال إمكانية الوصول فكرة متأخرة في الكثير من فرق تصميم تجربة المستخدم. تأتي إستراتيجية سهلة وفعالة للغاية لمساعدتك على تبني عقلية الوصول من إليز ليفينجستون وفريقها في Qualtrics . بدأوا في إضافة مستندات إمكانية الوصول إلى جميع مستندات التصميم قبل تسليمها إلى الهندسة. ليس فقط لتحسين إمكانية الوصول إلى المنتج ولكن أيضًا لمعرفة مشكلات إمكانية الوصول المحتملة في وقت مبكر جدًا في عملية التصميم.

تقترح إليز معالجة وثائق إمكانية الوصول في خطوتين: أولاً ، تحديد سلوك لوحة المفاتيح ، ثم تحديد التسميات الدلالية التي يمكن فهمها من خلال التكنولوجيا المساعدة. إذا كنت ترغب في تجربته ، فقد لخصت إليز كل ما تحتاج لمعرفته حول النهج في مقال. فرصة رائعة لإعادة التفكير في عمليتك الحالية.

إدارة التركيز

تعد إدارة التركيز جزءًا ضروريًا ولكنه صعب في كثير من الأحيان لتسهيل الوصول إلى التطبيقات المعقدة. نحتاج إلى اعتبار أن ترتيب التركيز منطقي ، وأن التركيز يتم تحريكه بشكل صحيح على أي مكونات مخصصة ، وأن كل عنصر قابل للتفاعل له نمط تركيز واضح.

يقوم هذا التطبيق المختصر من Level Access بتسمية كل عنصر قابل للتركيز على الصفحة ، بحيث يمكنك التحقق من أن ترتيب التركيز يطابق ترتيب القراءة. بالنسبة لمستخدمي Firefox هناك ، أضاف Firefox's Accessibility Inspector هذه الميزة منذ الإصدار 84.

في قواعد التعليمات البرمجية المعقدة ، حيث قد تتحرك المكونات المختلفة أو التعليمات البرمجية لجهة خارجية بالتركيز بشكل غير متوقع ، يمكن أن يساعدك هذا المقتطف الصغير من Scott Vinkle في معرفة العنصر الذي يركز عليه حاليًا. إذا كنت أواجه صعوبة في تحريك التركيز من خلال أجزاء أخرى من تطبيقي ، فأود أحيانًا أيضًا استبدال console.log بـ console.trace لتحديد الوظيفة التي تحرك التركيز حولها بالضبط.

لاختبار جميع أنماط التركيز على صفحة الويب ، يمكننا استخدام سكوت أوهارا النصي كنقطة بداية. يمكن أن يصبح التنقل عبر كل عنصر مرهقًا بعد فترة ، لذلك يمكن أن يساعدنا البرنامج النصي الذي يتم تدويره عبر كل عنصر في التأكد من أن أنماط التركيز لدينا تبدو متسقة وتعمل ضمن سياق الصفحة.

يعد إعداد علامة جدولة إيجابية لمحاولة إصلاح ترتيب التركيز أمرًا شائعًا لإمكانية الوصول. العناصر التي تحتوي على علامة جدولة إيجابية ستجبر المتصفح على الانتقال إليها أولاً. على الرغم من أن هذا قد لا يكون خطأً من الناحية الفنية ، إلا أنه غالبًا ما يكون غير متوقع ويمكن أن يتسبب في مشاكل أكثر مما يحل. تتيح لك علامة التبويب المرجعية tabindex الخاصة بـ Paul J. Adam تمييز جميع العناصر التي تم تطبيق سمة tabindex عليها.

سهولة الاستخدام التخطيط

يمكن أن يكون ترتيب قراءة المستند في بعض الأحيان غير متزامن مع ما قد يتوقعه المشاهد إذا كان التخطيط يعتمد بشدة على شبكة CSS أو خاصية ترتيب Flexbox. قام Adrian Roselli بترميز كتاب مرجعي لتتبع ترتيب القراءة لمساعدتك على التأكد من أن موقعك يمرر إرشادات التسلسل ذات المغزى.

يحتوي WCAG على معيار تباعد النص حيث يجب أن يظل المحتوى يعمل عند تطبيق إعدادات نصية معينة. لاختبار ذلك ، أنشأ Steve Faulkner تطبيقًا مختصرًا يقوم تلقائيًا بتطبيق إعدادات تباعد النص المطلوبة على كل النص في الصفحة. إن تجنب أشياء مثل الارتفاعات الثابتة والسماح بالتدفق الزائد لا يجعل الوصول إلى موقعك أكثر سهولة فحسب ، بل يضمن أيضًا أن أي محتوى تضعه في موقعك لن يكسر التصميم ، وهو أمر سيشكرك محررو المحتوى لديك عليه.

قام Jared Smith ببناء إشارة مرجعية لتحويل المؤشر إلى مربع 44 × 44 بكسل بحيث يمكنك تحريكه فوق عناصر التحكم الخاصة بك للتأكد من أنها تفي بمعيار الحجم المستهدف الموصى به .

لينترز

Linters هي فئة من الأدوات التي تكتشف الأخطاء عن طريق مسح كود المصدر قبل تشغيل التطبيق أو بنائه. باستخدام linters ، يمكننا إصلاح الأخطاء الصغيرة قبل تشغيل أو إنشاء الكود ، مما يوفر وقتًا قيِّمًا لضمان الجودة لاحقًا.

يعرف العديد من المطورين بالفعل ويستخدمون ESLint في بعض القدرات. بدلاً من تعلم أدوات جديدة ، من الممكن أن تبدأ في اختبار إمكانية الوصول عن طريق تضمين مكون إضافي جديد في سير عملك الحالي. Eslint-plugin-jsx-a11y هو ملحق ESLint لعناصر JSX الخاصة بك ، حيث سيتم عرض أي أخطاء أثناء كتابة التعليمات البرمجية الخاصة بك. كتب سكوت فينكل دليلاً مفيدًا حول إعداده.

تم طرح Deque مع ax Linter ، وهو متاح كتطبيق Github أو VS Code Extension. يقوم Ax Linter بفحص ملفات React و Vue و HTML و Markdown مقابل القواعد الأساسية دون أي تكوين لذلك من السهل البدء والتشغيل ، على الرغم من أنه مرحب بك لتمرير الخيارات الخاصة بك. إحدى الميزات المفيدة هي أنه يميز بين WCAG 2 و WCAG 2.1 وهو أمر مفيد إذا كنت تحاول تلبية معيار معين.

وضع علامة على

تم تصميم الويب ليكون مرنًا. في حالة تعطل الترميز ، سيبذل المتصفح قصارى جهده لتصحيح أي خطأ. ومع ذلك ، يمكن أن يكون لهذا آثار جانبية غير مقصودة ، سواء من منظور التصميم أو من وجهة نظر إمكانية الوصول. يمكن أن يساعد تشغيل مخرجاتك من خلال مدقق W3C HTML في التعرف على أشياء مثل العلامات المعطلة والسمات التي يتم تطبيقها على العناصر التي لا ينبغي أن تحتوي عليها وأخطاء HTML الأخرى. أنشأ Deque مرجعية W3C HTML Validator استنادًا إلى نفس المحرك الذي يتيح لك التحقق من العلامات على الصفحات المحلية أو الصفحات المحمية بكلمة مرور والتي لا يستطيع المدقق العادي الوصول إليها.

إذا كنت شخصًا مرئيًا أكثر ، فإن مشروع Gael Poupard a11y.css عبارة عن ورقة أنماط تتحقق من المخاطر المحتملة داخل ترميزك. متاح في كل من تنسيق ملحق أو إشارة مرجعية ، يمكنك تخصيص اللغة وكذلك مستوى المشورة المعروضة. في سياق مماثل ، sa11y هي أداة يمكن تثبيتها كعلامة مرجعية أو دمجها في قاعدة التعليمات البرمجية الخاصة بك. تم تصميم Sa11y خصيصًا للنظر في إخراج محتوى CMS . يعرض أي تحذيرات بلغة غير تقنية بحيث يمكن لمحرري المحتوى فهم وإجراء التصحيحات اللازمة.

مرحله القراءة

يبدأ الموقع الذي يمكن الوصول إليه بمحتوى يمكن الوصول إليه. كانت إمكانية الوصول المعرفي محورًا رئيسيًا لمسودة WCAG 3 الجارية وهي مذكورة حاليًا في معيار النجاح 3.1.5 ، مما يشير إلى أن المؤلفين يهدفون إلى أن يكون المحتوى قابلاً للفهم من خلال مستوى القراءة الإعدادية (الصف 7-9).

يحسب محرر همنغواي مستوى قراءة المحتوى الخاص بك أثناء كتابته ، بحيث يمكنك تحريره للتأكد من سهولة فهمه. تقدم اللوحة الموجودة على الجانب اقتراحات حول كيفية تحسين المحتوى الخاص بك لجعله أكثر قابلية للقراءة. إذا تم نشر موقعك بالفعل ، فقد أنتج Juicy Studio أداة قراءة حيث تقوم بتمرير عنوان URL إلى النموذج المقدم ويتم تحليل محتوى موقعك وتصنيفه باستخدام ثلاث خوارزميات مختلفة لمستوى القراءة. هناك أيضًا شرح مفيد لما تستلزمه كل من هذه الدرجات. ومع ذلك ، فإن أحد قيود هذه الأداة المعينة هو أنها تأخذ في الاعتبار كل النص المعروض على الصفحة ، بما في ذلك أشياء مثل نص التنقل والتذييل ، مما قد يؤدي إلى تحريف النتائج.

مجموعات الاختبار والتكامل المستمر

يتمثل الجانب السلبي لمعظم أدوات الاختبار الآلية في أنها تتطلب من الأشخاص تشغيلها في المتصفح. إذا كنت تعمل على قاعدة بيانات كبيرة واحدة ، فيمكنك دمج اختبار إمكانية الوصول في عملية الاختبار الحالية أو كجزء من تدفق التكامل المستمر. عندما تكتب اختبارات مخصصة ، يكون لديك وعي بتطبيقك لا تتوفر به أدوات الاختبار الآلي ، مما يسمح لك بإجراء اختبار مخصص وشامل بطريقة أكثر قابلية للتوسع.

مرة أخرى ، يظهر ax-core كمكتبة مفتوحة المصدر تدعم بشكل متكرر معظم هذه الأدوات ، لذلك من المحتمل أن يعتمد ما إذا كانت الأداة تعمل من أجلك على مدى تكاملها مع الكود الخاص بك بدلاً من أي اختلافات في نتائج الاختبار . نشرت Marcy Sutton دليلًا حياديًا لإطار العمل للبدء في كتابة الاختبارات الآلية لإمكانية الوصول. تتناول الفرق بين اختبارات الوحدة واختبارات التكامل ولماذا قد ترغب في اختيار أحدهما على الآخر في سيناريوهات مختلفة.

إذا كان لديك بالفعل إطار عمل تجريبي تستمتع به ، فهناك فرصة كبيرة لوجود مكتبة تضم محورًا محوريًا فيها. على سبيل المثال ، كتب Josh McClure دليلًا يستخدم فأس السرو ، وأنتج Nick Colley إصدارًا بنكهة Jest في jest-ax.

Pa11y هي أداة توفر واجهة قابلة للتكوين حول الاختبار وهي متوفرة أيضًا في إصدار CI أيضًا. يمكن أن تتيح لك خيارات التكوين العديدة الخاصة به حل المشكلات المعقدة التي يمكن أن تأتي مع الاختبار. على سبيل المثال ، تتيح لك ميزة الإجراءات اجتياز مجموعة من الإجراءات قبل تشغيل الاختبارات ويمكن أن تكون مفيدة لاختبار الشاشات التي تتطلب المصادقة قبل الوصول إلى الصفحة.

خيارات المستخدم

هناك العديد من استعلامات الوسائط الجديدة للمساعدة في اكتشاف نظام تشغيل المستخدم وتفضيلات المستعرض. في هذه الأيام ، غالبًا ما يكتشف المطورون هذه الإعدادات لتعيين الإعدادات الافتراضية لأشياء مثل تفضيلات الحركة والوضع المظلم ، ولكن هذا قد يؤدي أيضًا إلى أخطاء يصعب إعادة إنتاجها إذا لم يكن لديك نفس الإعدادات.

Magica11y عبارة عن مجموعة من الوظائف التي تتيح لك تحديد تفضيلات المستخدمين. أرسل صفحة التوثيق إلى المختبرين غير التقنيين أو ادمجها في تطبيقك حتى تتمكن من إعادة إنتاج بيئات المستخدم الخاصة بك بشكل أكثر دقة.

تغليف

تشير التقديرات إلى أن اختبار إمكانية الوصول الآلي يمكنه اكتشاف 30٪ فقط من جميع أخطاء إمكانية الوصول. حتى مع استمرار تحسين الأدوات ، فإنها لن تحل محل تضمين الأشخاص ذوي الإعاقة في عملية التصميم والتطوير الخاصة بك. قد تتضمن عملية الوصول المستدامة والشاملة قيام الفريق بأكمله باستخدام الأدوات للقبض على أكبر عدد ممكن من هذه الأخطاء في وقت مبكر من العملية ، بدلاً من ترك الأمر كله للمختبرين والمستخدمين المعاقين للعثور على هذه المشكلات والإبلاغ عنها لاحقًا.

هل تحتاج إلى المزيد من الأدوات؟ قام مشروع A11y و Stark بتنسيق قوائم بأدوات الوصول الإضافية لكل من المطورين والمستخدمين! أو لا تتردد في ترك أي اقتراحات في التعليقات أدناه ، نود أن نسمع الأدوات التي تدمجها في سير عملك.