لوحات ألوان عالية التباين وفقًا لمعايير WCAG لضعاف البصر

بفضل العمل الذي قام به @pmusaraj وأنا، أصبح Discourse الآن يتضمن خيارًا لاختيار لوحة ألوان ذات تباين أعلى من خلال معالج الإعداد.

تُركز هذه اللوحات على تباين النصوص، وهي مُصممة لتلبية مبادئ توجيهية لمحتوى الويب من حيث إمكانية الوصول فيما يتعلق بتباين الألوان (المستوى AA). في الخلفية، لا تُعد هذه لوحات ألوان عادية؛ بل تتضمن أيضًا تنسيقات CSS إضافية تلقائيًا.

يتوفر إصدار فاتح وإصدار داكن (وهما الخياران الأخيران في القائمة). يمكن للمواقع الحالية الوصول إلى هذه الألوان عبر زيارة community.yoursite.com/wizard/steps/color أو باختيارها كلوحات أساسية عند إنشاء لوحة جديدة من admin > customize > colors.

بمجرد إنشائها، ستظهر هذه اللوحات تحت admin > customize > colors — وإذا لم تكن تستخدمها كلوان افتراضية لموقعك، فيمكنك أيضًا السماح للمستخدمين باختيارها.

عند تعيينها كخيار قابل للاختيار من قبل المستخدمين، يمكن للأفراد اختيار لوحة الألوان الخاصة بهم في قسم الواجهة من تفضيلاتهم (community.yoursite.com/my/preferences/interface).

إذا واجهت أي مشاكل تتعلق بتباين هذه اللوحات، فيرجى إخبارنا حتى نتمكن من الاستمرار في تلبية المعايير المحددة بواسطة WCAG!

27 إعجابًا

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

4 إعجابات

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

مثال سريع هو كيفية إظهار الفرق بين المواضيع المقروءة وغير المقروءة. بشكل افتراضي، نقوم بذلك عن طريق تقليل التباين بعد قراءة موضوع ما:

عند الالتزام بمعايير WCAG، يجب علينا زيادة تباين العناوين المقروءة، ونتيجة لذلك لا يوجد تباين كبير بين العناوين المقروءة وغير المقروءة… لذا أعتقد أنه على المدى الطويل، سنرغب في النظر في معالجة مختلفة غير التباين للتمييز بينهما.

15 إعجابًا

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

8 إعجابات

هذا مذهل، وشكرًا لك. وباسم بعض مستخدميي الذين يعانون من ضعف البصر والذين اشتكوا من هذه المشكلة، فإن هذا يُقدّر جدًا. لقد قمت بتفعيله فورًا.

15 إعجابًا

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

  1. ما الذي يتم فعله عند اختيار مخطط في صفحة الألوان؟ هل يحدد ذلك الافتراضي للجميع؟
  2. لماذا يُسمح باختيار مخطط ألوان واحد فقط في المعالج؟ ربما يكون الجواب مثل السؤال الأول.

بما أنني أكتب هذا أثناء متابعتي للمنشور الأول، سأترك إعدادات صفحة الألوان كما هي.

الانتقال إلى admin > customize > colors. بعد بعض التجارب، اكتشفت أن:

  1. تحديد New
  2. لـ Base palette، افتح القائمة المنسدلة التي تتضمن الآن WCAG Light و WCAG Dark.
    يسمح باختيار العناصر.

لذا اخترت WCAG Light، ثم ظهر لي حوار لتسمية لوحة الألوان واختيار الألوان. كما في المثال، أدخلت الاسم WCAG Light، وحددت Color scheme can be selected by users، ثم نقرت على Save.

الانتقال إلى community.yoursite.com/my/preferences/interface، لم أجد قسم Color Scheme.

أيضًا، موقعنا يحتوي على Hamburger Theme Selector، وكنت أعتقد أنها ستظهر هناك تلقائيًا، لكن يبدو أنني بحاجة إلى إنشاء Base Theme (موضوع) جديد لاستخدامها.

هذا ليس شكوى، بل مجرد ملاحظات من شخص يقرأ المنشور لأول مرة ويجربه. :slightly_smiling_face:

إعجابَين (2)

هاه، كان من المفترض أن يعمل ذلك. من الممكن أنك كنت بحاجة إلى تحديث صفحة تفضيلات الواجهة.

3 إعجابات

هذا ما أراه. لقد قمت حتى بتحديث صفحة HTML ولا يوجد أي تغيير.

ملاحظة: الموقع مستضاف بواسطة استضافة Discourse إذا كان ذلك يهم - https://swi-prolog.discourse.group/

إعجاب واحد (1)

لقد تفحصت موقعك، ولا أرى خيار “يمكن للمستخدمين اختيار نظام الألوان” مفعلًا في أي من النظامين. ربما لم تقم بالنقر على مربع الاختيار لحفظ التحديد؟

5 إعجابات

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

من Admin > Settings > Customize > Colors

راجع WCAG Light و WCAG Dark في اللوحة اليسرى.

عند النقر على WCAG Light يظهر

ثم قمت بتفعيل خيار Color scheme can be selected by users

ما لم ألاحظه في المرة الأولى هو ظهور مربع اختيار أزرق إضافي

عند النقر على مربع الاختيار الأزرق الإضافي يتغير العرض إلى

ثم عند الذهاب إلى SWI-Prolog - Users and developers of SWI-Prolog, an implementation of the Prolog programming language يظهر الآن

:slightly_smiling_face:


بعد إضافة بعض الألوان الإضافية التي يمكن للمستخدمين استخدامها، تغير خيار الواجهة ليعطيني خيارًا لكل من الوضع العادي والوضع الداكن

7 إعجابات

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

هل سأحتاج إلى تخصيص الألوان باستخدام هذه المخططات الجديدة كأساس؟

ما هي الخطوات الحالية لإنشاء مخطط ألوان مخصص في ضوء التغييرات الأخيرة في كيفية بناء مخططات الألوان لدعم الوضع الداكن (كما تم مناقشته في الخيوط الأخيرة) وهذه المخططات الجديدة القابلة للوصول؟

شكرًا لك!

إعجابَين (2)

إذًا، عند اختيار لوحات ألوان WCAG هذه، يتم تحميل CSS إضافي (موجود هنا) لتغيير ألوان عناصر مختلفة (عادةً لاستخدام متغير لون بتباين أعلى مما نستخدمه افتراضيًا). أعتقد أن ملف CSS يُحمّل بناءً على اسم لوحة الألوان…

إذًا، إذا كنت ترغب في تعديل هذه اللوحات مع الاحتفاظ ببعض تحسينات التباين من CSS المخصص، أعتقد أنك ستضطر إلى عدم تغيير الاسم (هل هذا صحيح @pmusaraj؟).

أو يمكنك بدلاً من ذلك نسخ CSS من الرابط أعلاه واستخدامه في نسقك الخاص (مع أن ذلك يعني أنك ستفوت التحديثات التي نقوم بها).

9 إعجابات

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

10 إعجابات

سعيد برؤية هذه الميزة الجديدة! أنا فضولي - هل يلبي Discourse حاليًا إرشادات WCAG بالكامل أم لا يزال هناك المزيد من العمل الذي يتعين القيام به؟

إعجاب واحد (1)

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

7 إعجابات

هذا رائع لسماعه لجميع المستخدمين. وإلى أي مبادئ توجيهية لـ WCAG تعملون؟ WCAG 3.0؟

إعجابَين (2)

نعمل حاليًا على تحقيق معايير WCAG 2.0، بينما لا تزال النسخة 3.0 في مرحلة المسودة وفقًا للموقع: WCAG 3 Introduction | Web Accessibility Initiative (WAI) | W3C

7 إعجابات

أثناء متابعتي لهذا الموضوع، يسعدني معرفة أن WCAG 2.0 مدعوم. قد يكون فاتني ذلك، لكنني لا أرى ذكرًا للترجمة التوضيحية. هل يدعم Discourse الترجمة التوضيحية في ملفات الفيديو؟ وهل توجد آلية في Discourse لنشر مقاطع الفيديو مع ترجمة توضيحية؟

إعجابَين (2)

يمكنك إضافة ترجمات يدويًا باستخدام وسم HTML5 للفيديو، وهناك أيضًا مكون سمة يوفر واجهة مستخدم بسيطة لذلك.

8 إعجابات

شكراً جزيلاً على WCAG Dark! أحببته!!

في الواقع ليس لدي حاجة له، (على حد علمي) - أنا فقط أعتقد أنه يبدو رائعًا. :heart:

3 إعجابات