مقال ما يجب معرفته حول تغييرات WCAG القادمة
نشرت: 2022-10-07في سبتمبر 2022 ، أعلن W3C أن الإصدار التالي من WCAG قد وصل إلى حالة توصية المرشح. باستثناء أي تغييرات في الساعة الحادية عشرة ، يجب التصديق على الإصدار 2.2 من المعيار قريبًا. التغييرات طفيفة نسبيًا ، ولكن يجب على أي شخص مسؤول عن إنشاء موقع ويب أو صيانته معرفة ما هو قادم.
إذا كنت معتادًا على WCAG ، فيمكنك تخطي النظرة العامة والانتقال مباشرة إلى التفاصيل الدقيقة ، وإلا فتابع القراءة.
ما هي WCAG ، ولماذا هي مهمة؟
تشتمل إرشادات الوصول إلى محتوى الويب (WCAG) على مجموعة من المعايير المصممة لمساعدة مطوري الويب والمصممين ومسؤولي المحتوى على ضمان إمكانية الوصول إلى مواقع الويب الخاصة بهم للأشخاص الذين يعانون من مجموعة واسعة من الإعاقات. فريق W3C's Web Accessibility Initiative مسؤول عن المعيار. يتألف W3C و WAI من اتحاد من قادة الصناعة والخبراء المتخصصين الذين يركزون على جعل الويب أكثر سهولة.
يتم تنظيم WCAG وفقًا لأربعة مبادئ تتعلق بإمكانية الوصول. تنص هذه المبادئ على أن موقع الويب يجب أن يكون قابلاً للإدراك وقابلاً للتشغيل ومفهومًا وقويًا. يوجد داخل كل من هذه المبادئ إرشادات تصف الأهداف الأساسية. يوجد ضمن كل مبدأ توجيهي معايير النجاح التي تصف هدفًا محددًا وقابل للقياس يجب على مطوري مواقع الويب الوفاء به ليكونوا متوافقين مع WCAG.
تحتوي كل معايير النجاح على مؤشر مستوى المطابقة A أو AA أو AAA. يتم تلبية معايير المستوى A بسهولة أكبر ، في حين أن AAA هي الأكثر صرامة.
هل سأقاضي إذا لم يكن موقع الويب الخاص بي متوافقًا مع WCAG 2.2 AA؟
الجواب النهائي هو "ربما".
في الولايات المتحدة ، القوانين غامضة ، ولا تتطرق ADA صراحة إلى مواقع الويب. في حين أن هناك قوانين محددة للغاية حول أماكن الإقامة التي يجب إجراؤها في مساحة فعلية ، فإن الشيء الوحيد الذي تقوله ADA أنه يمكن تطبيقه مباشرة على مواقع الويب هو أن "مرافق الشركة يجب أن تكون قابلة للوصول". وحتى في ذلك الحين ، لا تتفق جميع المحاكم على ما إذا كان موقع الويب يعتبر مرفقًا للشركة ولا يوجد في أي مكان تعريف واضح لمصطلح "يمكن الوصول إليه". لاحظ أننا نتحدث عن المواقع الإلكترونية للشركات الخاصة والقوانين الفيدرالية. بالنسبة للمواقع الإلكترونية الحكومية الفيدرالية وبعض مواقع الويب الحكومية ، هناك قوانين سارية.
نظرًا لعدم وجود تعريف واضح لمصطلح "يمكن الوصول إليه" ، فإننا نتطلع إلى WCAG لإخبارنا بما يجب القيام به عند إنشاء موقع ويب أو صيانته. لا توصي أي قوانين أمريكية على وجه التحديد بأي إصدار من WCAG (أو أي معيار آخر) للمواقع العامة. ومع ذلك ، فإن السعي لتلبية أي نسخة من معايير نجاح WCAG يعد هدفًا جيدًا. يجب أن يؤدي إلى موقع يمكن للجميع الوصول إليه بشكل معقول.
كيف يتم تطوير المعايير؟
خلافًا للاعتقاد الشائع ، لا يتم تنفيذ تطوير المعايير في برج عاجي من قبل مجموعة مختارة من المشاركين. بينما يتم تنفيذ الكثير من العمل من قبل موظفي المنظمات الأعضاء ، فإن جزءًا كبيرًا من العمل يأتي من الخبراء المدعوين والأفراد الآخرين الذين لديهم شغف بالموضوع ومستعدون للوقت. علاوة على ذلك ، العديد من فرق المعايير لديها منتديات عامة مفتوحة حيث يتم تشجيع أعضاء المجتمع ككل على المشاركة من خلال طرح الأسئلة أو إثارة قضايا جديدة.
بالنسبة لـ WCAG ، يمكن للجمهور قراءة المعايير والتعليق عليها من خلال فتح إصدار جديد ، أو طلب سحب ، أو بمجرد المشاركة في المناقشات الحالية في مستودع WCAG على Github. عند القدوم إلى المجموعة بفكرة ، من الحكمة دائمًا البحث في جميع المشكلات الحالية وسحب الطلبات للتأكد من أن فكرتك لم يتم طرحها بالفعل على الطاولة. إذا كنت تفكر في المساهمة في WCAG بطلب سحب ، خذ دائمًا الوقت الكافي لفتح قضية ومناقشة فكرتك أولاً. هناك فرصة جيدة جدًا لأنك قد توفر على نفسك بعض الأعمال غير الضرورية.
قد تكون المساهمة في المعايير محبطة وصعبة ، ولكنها أيضًا مجزية للغاية. بالنسبة للجزء الأكبر ، المشاركون مرحبون وصبورون للغاية. إذا كنت تأخذ وقتًا للبحث في أفكارك ، وبذلت العناية الواجبة ، وكنت مهذبًا ومحترمًا للآخرين ، فستكون مساهماتك موضع ترحيب. أسوأ نتيجة ممكنة هي أنك ستصبح أكثر دراية بالموضوع مما كنت تعتقد أنه ممكن.
ما الذي سيتغير؟
تم تغيير أحد معايير النجاح الحالية في WCAG 2.2 ، وتمت إضافة تسعة معايير نجاح جديدة تمامًا. هنا سنقتصر على المستويات A و AA فقط لأننا نادرًا ما نستهدف AAA. لمشاهدة جميع المعايير الجديدة ، تحقق من المقالة الكاملة من W3C ،
2.4.7 التركيز البؤري المرئي (A)
تم تغيير هذا المعيار من المستوى AA إلى A ، وهو أدنى مستوى لمطابقة WCAG. جزء من سبب وجوده هو أنه في الماضي غير البعيد ، كانت ممارسة شائعة للأشخاص الذين قاموا ببناء مواقع الويب لإزالة حلقات التركيز. بعد كل شيء ، لم يكونوا جزءًا من التصميم. هذا يعني أن المستخدمين الذين كانوا يتنقلون في صفحة ويب باستخدام لوحة المفاتيح الخاصة بهم لا يمكنهم رؤية مكانهم على الصفحة. من المنطقي أن يتم نقل هذا المعيار إلى مفرد A لأن هذا العدد الكبير من المستخدمين يعتمد على التنقل باستخدام لوحة المفاتيح ، حتى أولئك الذين لا يعانون من أي شكل من أشكال الضعف.
ستعرض جميع متصفحات الويب الرئيسية حلقات التركيز افتراضيًا. الشرط الرئيسي هنا هو عدم كسر الوظيفة المدمجة.
W3C - فهم التركيز المرئي
2.4.11 مظهر التركيز البؤري (AA)
يحدد هذا المعيار الجديد بعض القواعد التوضيحية حول رؤية حلقات التركيز. يجب أن تحتوي على نسبة تباين 3: 1 مع وحدات البكسل المحيطة والبكسلات التي تحل محلها. يجب عليهم أيضًا إحاطة العنصر أو المكون الفرعي الذي يتم التركيز عليه أو أن يكون كبيرًا مثل خط سميك يبلغ 4 بكسل على طول الحافة الأقصر للعنصر.
مرة أخرى ، ستفي حلقات التركيز الافتراضية للمتصفح عادةً بهذا المعيار. نظرًا لأن المستخدمين معتادون على الإعدادات الافتراضية ، يجب عليك فقط تجاوزها إذا لزم الأمر. قد يكون أحد الأمثلة إذا كان هناك تباين ألوان غير كاف بين حلقة التركيز الافتراضية واللون الأساسي لعلامتك التجارية. عادةً ما تكون المتصفحات افتراضيًا على حلقات التركيز الزرقاء ، لذلك إذا كان لديك اللون الأزرق في لوحة علامتك التجارية ، فقد يكون هناك تعارض.
W3C - فهم مظهر التركيز
2.4.12 التركيز غير محجوب (الحد الأدنى) (AA)
ينص هذا المعيار على أنه يجب عدم إخفاء التركيز تمامًا عن طريق المحتوى الذي ينشئه المستخدم. يهدف هذا إلى منع المحتوى ذي الطبقات ، مثل التنقل الثابت (شريط القائمة الذي يظل في الجزء العلوي من النافذة أثناء قيام المستخدم بالتمرير) ، من إخفاء مؤشرات التركيز.
أسهل حل هنا هو ببساطة عدم وجود أي عناصر لزجة. ومع ذلك ، فإن المواقع الإلكترونية الحديثة تستخدم التنقل اللزج و CTA العائم ، لذلك من المحتمل ألا يكون هذا خيارًا. هناك بعض التوقعات بأن خصائص CSS ذات الحشوة والتمرير وهامش التمرير ستسمح لنا يومًا ما بتحديد إزاحة تلائم التنقل الثابت. في الوقت الحالي ، تُستخدم هذه الخصائص حصريًا على العناصر التي تستفيد من التمرير المفاجئ.
هذا يتركنا مع JavaScript. بشكل عام ، هدفنا هو استخدام JavaScript في المتصفح عند الضرورة فقط. ستراقب وظيفة StickyFix هذه العناصر القابلة للتركيز داخل العنصر الرئيسي ، وإذا تم حجبها عن طريق التنقل اللاصق عند التركيز عليها ، فسيتم تمريرها في العرض.
لاستخدام هذه الوظيفة ، ما عليك سوى تضمينها في ملفات JavaScript الخاصة بموقعك.
/** * A minimal function that will detect if a focusable element is obscured by sticky navigation * This only works for sticky elements at the top of the page, but could be extended * @author Donovan Buck <dbuck@brandextract.com> * @param {string} selector - A valid CSS selector string for the sticky element * @param {number} offset - An additional offset for the focused element * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors * @tutorial https://www.brandextract.com/Insights/Articles/Changes-to-the-Web-Content-Accessibility-Guidelines/ * @license MIT */ function stickyFix(selector, offset = 0) { // Find the height of our sticky element const sticky = document.querySelector(selector); let stickyRect = sticky.getBoundingClientRect(); let stickyHeight = stickyRect.bottom - stickyRect.top; // Select all the focusable elements within the main element const focusables = document.querySelectorAll('main button:not([disabled]), main [href], main input:not([disabled]), main select:not([disabled]), main textarea:not([disabled]), main [tabindex]:not([tabindex="-1"]):not([disabled]), main details:not([disabled]), main summary:not(:disabled)'
); // Add a listener to each focusable element focusables.forEach(focusable => { focusable.addEventListener('focus', (event) => { const targetRect = event.target.getBoundingClientRect(); if(targetRect.top < stickyHeight + offset) { window.scrollTo({ top: targetRect.top + window.scrollY - stickyHeight - offset }); } }); }); };يمكنك بعد ذلك استدعاء الوظيفة:
// Wait for the document to load document.addEventListener("DOMContentLoaded", function() { stickyFix('.sticky', 24); });فهم التركيز غير محجوب (الحد الأدنى)
2.5.7 حركات السحب (AA)
ينص هذا المعيار على أنه إذا كانت حركات السحب جزءًا من واجهة المستخدم ، فيجب توفير طريقة بديلة تسمح بإجراءات بسيطة للتأشير والنقر. قد يكون أحد الأمثلة على ذلك هو النموذج الذي يسمح للمستخدمين بسحب الملفات وإفلاتها من أجهزة الكمبيوتر الخاصة بهم في المتصفح لتحميلها. يجب عليك التأكد من أن المستخدم يمكنه أيضًا استخدام مربع حوار تحميل الملفات لاختيار الملفات التي يجب تحميلها. لا تعد حركات السحب ضرورية بشكل عام في معظم واجهات مستخدم مواقع الويب ، باستثناء هذا الاستثناء.
فهم حركات السحب
2.5.8 الحجم المستهدف (الحد الأدنى) (AA)
يجب أن يكون الحد الأدنى لأي هدف للمؤشر 24 × 24 بكسل ما لم يكن هذا الهدف على بعد 24 بكسل على الأقل من كل هدف مجاور أو كان الهدف في جملة أو كتلة نصية. عند التحقق من تصميم لهذه المعايير ، كن حريصًا جدًا على التحقق من روابط المشاركة الاجتماعية التي تستخدم الرموز فقط وجميع قوائم التنقل الخاصة بك.
فهم الحجم المستهدف (الحد الأدنى)
3.2.6 المساعدة المستمرة (أ)
افترض أن موقع الويب الخاص بك يحتوي على تفاصيل الاتصال أو خيار المساعدة الذاتية أو أي آلية اتصال تظهر على صفحات متعددة. في هذه الحالة ، يجب أن تظهر هذه العناصر بنفس الترتيب بالنسبة لمحتوى الصفحة الأخرى في جميع أنحاء موقعك. هذه إلى حد كبير وظيفة التصميم الجيد والمتسق ، ولا ينبغي أن يكون من الصعب تلبية هذا المعيار.
فهم المساعدة المستمرة
3.3.7 المصادقة التي يمكن الوصول إليها (AA)
يمكن أن يؤدي إجبار المستخدم على تذكر اسم المستخدم وكلمة المرور إلى خلق عبء لا داعي له على الأشخاص ذوي الإعاقات المعرفية. لهذا السبب ، يجب ألا ينشئ مطورو الويب عملية تسجيل دخول لا تسمح باستخدام مديري كلمات المرور أو نسخها ولصقها. يسمح هذا المعيار بطرق مصادقة بديلة ، طالما أنها لا تعتمد على اختبار الوظيفة المعرفية مثل تذكر كلمة مرور أو حل لغز.
فهم المصادقة التي يمكن الوصول إليها
3.3.9 الإدخال الزائد (أ)
ينص هذا المعيار على أن أي معلومات أدخلها المستخدم مسبقًا أثناء نفس العملية سيتم ملؤها تلقائيًا أو تكون متاحة للمستخدم للاختيار بدلاً من الاضطرار إلى إعادة إدخال المعلومات يدويًا. من الواضح أن هذا يجب أن يكون راحة متوقعة لأي شخص.
فهم الإدخال الزائد
مراجع
- ما الجديد في WCAG 2.2 Draft
- مستودع WCAG الخاص بـ W3C على جيثب