مشاكل إمكانية الوصول إلى RAMP

ساهم تجربة المستخدم
1

مرحبًا،

أعمل في مبادرة RAMP الخاصة بفيروس كوفيد-19. اخترنا منصة Discourse لمنصة المنتدى الخاصة بنا، ونحن راضون جدًا عنها.

لقد كان زميلي وأنا نراجع إمكانية الوصول. أعتقد أننا تعاملنا مع مشاكل التباين المنخفض باستخدام وظيفة CSS الخاصة بالإدارة. لكن لدينا بعض المشاكل، كما تشير أداة WAVE، والتي لا نعتقد أننا نستطيع معالجتها بأنفسنا، وهي كالتالي:

  • صورة مرتبطة تفتقر إلى نص بديل: تتعلق هذه بصور الرموز التعريفية. هناك عنوان وصفي، لكن الحقل البديل فارغ.

  • يوجد حقل تسمية مفقود في كل صفحة:

    <div><input type="text"></div>

  • يوجد عنوان فارغ في كل صفحة:

    <div class="title"><h3></h3><!-- --></div>

  • هناك العديد من الأزرار الفارغة المبلغ عنها، المرتبطة بـ svg.

  • هناك روابط فارغة، على سبيل المثال:
    <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
    و
    <a href="" class="edit-topic" title="edit the title and category of this topic" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>.

  • يوجد رأس جدول فارغ: <th data-sort-order="posters" class="posters"></th>

سأكون مندهشًا جدًا إذا كنا نحن فقط من يواجه هذه المشاكل، لذا أتساءل ما إذا كانت أداة WAVE مبالغ فيها أم أننا ربما نغفل عن بعض النقاط. أي مساعدة ستكون محل تقدير كبير.

شكرًا جزيلاً مقدّمًا،
كوستاس

8 إعجابات
2

هل تظهر جميع هذه العناصر في كود HTML للصفحة بعد تصييرها، عبر أداة الفحص في المتصفح (F12)؟

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

شكرًا لاهتمامك. هناك عنصر واحد غير متأكد من قدرتي على العثور عليه (العنوان الفارغ)، لكن يمكنني استخلاص البقية من وظيفة “الكود” في WAVE وإيجاده (ببعض الجهد) باستخدام مفحص F12.

لا أعتقد أن مناطق التوقيت في صالحنا (أنا في المملكة المتحدة، UTC+01:00)، لكنني مستعد لإجراء مكالمة عبر Teams أو ما شابه ذلك لإظهار الأمر، إذا كان ذلك مفيدًا.

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

يجب أن يقوم aria-hidden بإخفاء هذا الرابط بشكل صحيح من أدوات إمكانية الوصول.

4 إعجابات
5

إذا كان هناك أي من هذه الأمور سهلة المعالجة نسبيًا، هل يمكننا معالجتها @awesomerobot؟

3 إعجابات
6

نعم، أعتقد أن إصلاح اثنين منها على الأقل أمر سهل. سألقي نظرة أعمق.

3 إعجابات
8

إن وجود حقل alt فارغ بحد ذاته أمر مقبول… فهذا يُفترض أن يشير إلى قارئ الشاشة أن الصورة زخرفية فقط ويمكن تجاهلها… ولكننا ندرج أيضًا سمة title… مما قد يسبب مشاكل في بعض الأحيان وفقًا لـ `img` with null `alt `and non-null `title` attributes - Screen reader compatibility

بعض قارئات الشاشة تتجاهل الصور الشخصية بشكل صحيح، لكن أخرى تقرأ الاسم/اسم المستخدم مرتين بسبب ذلك.

لقد قدمت طلب سحب (PR) لإزالة سمة title من صور الملفات الشخصية في المنشورات:

هذا هو حقل الإدخال الذي نعرض فيه عنوان URL للنسخ والمشاركة، وقد تم تقديم طلب سحب (PR) لإضافة تسمية aria هنا:

لم أتمكن من العثور على هذه الحالة… قد تكون بناءً على إعدادات الموقع؟ أحتاج إلى البحث أكثر قليلاً

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

المشاكل المتبقية التي لم أغطها تتعلق بالأزرار، ولا يزال عليّ البحث فيها…

8 إعجابات
9

مرحبًا،

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

أيضًا، هل سيكون من المفيد إذا قمتُ (بتنظيم ومشاركة) القالب الذي قمنا بتعديله من أجل اجتياز اختبارات إمكانية الوصول WAVE؟

تحياتي،
كوستاس

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

بالتأكيد، يحتوي أحدث إصدار من Discourse على الإصلاحات.

سيكون من الرائع مشاركة سمة.

إعجابَين (2)
11

سأجمع شجاعتي لأقوم بكل التحديثات لاحقًا (على أمل ذلك) وأبلغك مرة أخرى.

بخصوص المظهر، أصبحت الأمور معقدة بعض الشيء. نستخدم (وقمنا بتعديل) مظهر Light. أجرينا التغييرات عالية المستوى التالية على الألوان:

Tertiary:   #0088cc → #006498
Quaternary: #e45735 → #C93C1B
Danger:     #e45735 → #C93C1B
Success:    #009900 → #007A00

الحيلة الذكية التي خطرت ببالي متأخرًا هي مجرد اختبار صفحة الألوان من حيث إمكانية الوصول. :slight_smile:

ثم قمنا بعدد كبير من التغييرات باستخدام محرر CSS (admin/customize/themes/3/common/scss/edit)، وأنا غير متأكد من كيفية نقلها لك (يمكنني نسخها ولصقها، لكنني لست متأكدًا مما إذا كان هذا ما تريده أو ما إذا كنت تريد ذلك في هذا الموضوع). أعتقد أنه إذا تمكنا من رؤية الألوان الأخرى المذكورة (مثل var(–primary-medium)) في واجهة عالية المستوى، فقد تصبح الأمور أسهل. على سبيل المثال، كان أحد التغييرات الكلاسيكية هو #919191 → #595959، لكن طريقتي تتعامل فقط مع الأعراض التي ألاحظها عند التنقل بين الصفحات (ومرة أخرى، الطبيعة الديناميكية للموقع تعني أن ما ينجح اليوم قد لا ينجح غدًا).

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

يجب أن أشير أيضًا إلى أنني لم أستطع إصلاح admin/upgrade على الإطلاق (وهو يحتوي على العديد من مشاكل التباين)؛ لست متأكدًا مما إذا كان لا يتبع CSS أو ما هو السبب.

3 إعجابات
12

سيُظهر لك مُدوّن styleguide جميع الألوان :slight_smile:

https://theme-creator.discourse.org/styleguide/atoms/colors

13

ما أتذكره هو أن الجانب الإداري في Discourse يحتوي على أوراق أنماط (CSS) منفصلة (أصعب في التعديل) لجعل من الصعب على الأشخاص قفل أنفسهم عن واجهة إدارية قابلة للاستخدام عن طريق تغييرات CSS.

14

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

شكرًا لك. إذا نقرت على رابطك، فإن أداة Wave تكتشف 13 مشكلة تتعلق بإمكانية الوصول (تباين منخفض)، لكنها لا تتعلق بالألوان نفسها. والسبب في ذلك هو أنه، بخلاف صفحة الألوان، لا تُظهر الأداة كيفية استخدام هذه الألوان (كخلفية أو كخط أمامي مع النص).

أخبرني كيف يمكنني المساعدة؛ فهناك بالفعل العديد من أخطاء التباين.

15

مرحبًا مجددًا.

أعدتُ النظر في الأمر، وقد انخفض عدد الأخطاء بشكل كبير. شكرًا جزيلاً لـ @awesomerobot والآخرين الذين ساعدوا!

لا يزال لدي الأخطاء التالية:

  • عند زيارة فئة: زر فارغ في الكود التالي:
    • <button name="Filter by: [missing %{name} value]" role="combobox" data-name="regular" data-value="1" aria-expanded="false" aria-haspopup="menu" aria-owns="ember41-body" tabindex="0" id="ember41-header" class="select-kit-header single-select-header btn-default dropdown-select-box-header btn no-text btn-icon ember-view" type="button">
    • يحدث هذا أيضًا في صفحات أخرى بأرقام مختلفة بعد ember.
  • عند زيارة فئة: رأس جدول فارغ:
    • <th data-sort-order="posters" class="posters" aria-label="Posters"></th>
  • منشور من مستخدم “system”: صورة مرتبطة تفتقر إلى نص بديل:
    • <img alt="" src="/user_avatar/ramp-forums.epcc.ed.ac.uk/system/90/1_2.png" class="avatar" width="45" height="45">
  • أي منشور: رابط فارغ
    • <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
    • بالإضافة إلى التباديل المختلفة للعناصر في العبارة أعلاه
  • بحث مع نتائج صحيحة: عنوان فارغ
    • <h3 class="search-footer"><!----></h3> (قمت بتعديل التنسيق هنا بحذف المسافات البيضاء ورموز الأسطر)
  • بحث مع نتائج صحيحة: خمسة عناوين نماذج مفقودة في البحث المتقدم (يمكنني تقديم مزيد من المعلومات إذا لزم الأمر)

أي مساعدة ستكون محل تقدير كبير.

16

وآخر:

  • في المنشورات المُقيَّمة (غير متأكد مدى اعتماد هذا عبر Discourse، فهو امتداد طوره @angus بسخاء من أجلنا): تسمية نموذج مفقودة
    • العديد من الحالات (40 في الصفحة التي أنظر إليها، مع تقييم من قبل مستخدمين اثنين) تبدو هكذا: <input class=" disabled" type="radio" value="1" checked="" disabled="">. وهذا تحت <span class="star-rating">.
إعجاب واحد (1)
17

مرحبًا @KKavoussanakis :slight_smile:

سيتفحص @fzngagan ذلك في أقرب وقت ممكن.

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

كان عليّ أن أذكر أيضًا @fzngagan؛ أعتذر عن ذلك. شكرًا لاهتمامك، وسررت جدًا بسماع أخبارك مجددًا.

إعجابَين (2)