בעיה 1: ניווט כותרות שבור / מניפולציית DOM

[adress (Angela Dresselhaus)]

בעיה: רכיבי פוסט תגובה אינם מוצגים תחילה במודל האובייקטים של המסמך (DOM) בעת טעינת הדף הראשונית, ומוסרים מה-DOM לאחר שקורא המסך עבר עליהם, מה שגורם לקוראי מסך של Windows לאבד גישה לתוכן ול-VoiceOver להיות מוגבל בכלים שניתן להשתמש בהם כדי לגשת לדף.

התנהגות ספציפית:

● בעת ניסיון לנווט מפוסט ראשי לפוסטים של תגובות, רכיבים המשמשים בפוסטים של תגובות טרם עובדו ב-DOM, ולכן משתמשים אינם יכולים להשתמש בניווט מהיר כדי לנווט לכל רכיב בכל פוסט תגובה.

● פוסטים אינדיבידואליים של תגובות מסומנים ככותרת ברמה 2 ב-DOM רק כאשר קורא המסך מתמקד בהם, מה שמחייב משתמשים לנווט בכל רכיב בדף כדי להגיע לפוסטים של תגובות.

● כלי הנגישות ANDI מציג מבנה כותרות המשתנה ללא הרף לאחר אינטראקציות עם רכיבים.

● רכיבים מציגים שגיאות “הוסרו מה-DOM” בעת ניסיון לגשת אליהם.

● קורא המסך מאבד תצוגה עקבית של מבנה הדף.

פרטי פלטפורמה:

● JAWS/NVDA: כשל מוחלט - לא ניתן לגשת לכותרות תגובה כלל.

● VoiceOver: גישה באמצעות ניווט מהיר אך ללא גישת רוטור - מכיוון ש-VoiceOver פועל על ידי קריאת הדף הישיר, משתמשים יכולים לנווט בכותרות תגובה באמצעות מקשי ניווט מהיר, אך רק רכיבים שהקורא המסך מתמקד בהם נגישים בתוך הרוטור.

מדוע קריטי: משתמשי קוראי מסך אינם יכולים להשלים את המשימה העיקרית של קריאת תגובות דיון. זהו מחסום מוחלט להשתתפות בדיונים.

[adress (Angela Dresselhaus)]

These issues were first reported in Screen Reader Accessibility issues . Please assist in resolving, we have an entire community of blind and low vision users unable to complete basic functions on the discussion board.

[awesomerobot (Kris)]

Thanks for reporting these!

Do you know which topic(s) this was tested on specifically? It would be helpful to have a shared reference for this to make sure we’re seeing the same issues, there are a lot of variations with post content so I’d like to make sure we’re focusing our efforts in the correct place.

We could use try.discourse.org, or we can use a post here on Meta for reference if that would help.

@adress

therefore users cannot use quick navigation to navigate to any element in any reply post.

By “quick navigation” it seems you’re reporting element lists specifically? I can confirm that both in NVDA and VoiceOver that only the content currently available in the DOM can be accessed in element lists, this is also true for sighted users and it’s a fundamental part of how Discourse works. In lieu of manual pagination, we load/offload content as someone scrolls down/up the page.

@adress

requiring users to navigate every element on the page in order to reach reply posts.

This is usually what I expect when someone mentions “quick navigation” though I realize there’s not always consistent terminology across applications.

I’ve confirmed element to element navigation works in NVDA and VoiceOver, but I have identified an issue with our “small posts” within topics that can prevent navigation from continuing and will apply a fix for it.

A “small post” is a topic status update like pinned, closed/opened, actived, etc. The issue with these is that they don’t have an internal heading like regular posts, so when they fall on the threshold before more posts would be loaded while navigating… a user may be stopped and only hear “no next heading.”

@adress

ANDI accessibility tool shows a constantly changing heading structure after element interactions.

Automated tools like ANDI often fail to recognize DOM changes in web applications like Discourse, they’re generally built for simpler scenarios like static pages. So while we’ll sometimes use these tools to identify issues ourselves, in more complex scenarios like navigation we have to focus on what we can reproduce with manual testing.

@adress

Elements show “removed from the DOM” errors when attempting to access them

Screen reader loses consistent view of page structure

I assume this too is in reference to element lists? this is expected, but perhaps there’s an enhancement we can consider to make element lists work in Discourse, I can take this up with our engineers for input.

@adress

JAWS/NVDA: Complete failure - cannot access reply headings at all

Is this also specifically in an elements list? As mentioned above I’ve tested NVDA and VoiceOver navigation for element-to-element navigation, and can confirm this works… but if there’s a specific context it doesn’t work in we can take a closer look.

[adress (Angela Dresselhaus)]

@awesomerobot

Do you know which topic(s) this was tested on specifically?

Latest Expanded Core Curriculum/Mastering the Monarch topics - APH Hive Discussion Board

The express activities were tested.

[awesomerobot (Kris)]

Quick update on this, I’ve been working on improving our landmarks in a way that should provide a better way to navigate an element list.

Navigating headings in element lists will remain unchanged, but hopefully this provides a reasonable alternative. Changes are outlined here: A11Y: improve landmark navigation and add aria-labels to post controls by awesomerobot · Pull Request #34421 · discourse/discourse · GitHub

In short, what this does is:

• Provide landmark regions for all posts in the DOM

• Adds a landmark region that makes it clearer there are more posts above/below — we load/unload posts so we don’t have to use manual pagination, if a topic had hundreds of posts loaded into the DOM at once it could cause performance issues.

  Making all of the heading content accessible in the DOM without degrading performance for everyone would be a very complicated change, so this is a bit of a middle-ground. While not perfect, navigating to the “load more content” areas will properly load more posts, at which point the element list can be reopened.

• I’ve made an update to change the post controls from a navigation region to a toolbar region, this is more semantically accurate and allows the landmark region list to focus on posts.

• I’ve also improved labeling on the post controls while I was at it

So we’re going from a rather sparse landmark element list within topics

To something that more clearly represents the topic structure

This update should land at some point this week. I’ll be curious to hear some feedback about these changes once they’re available @adress!

[Cody_Laplante]

Hi @awesomerobot we’ve been hired by APH for accessibility consultation on this issue. I’ve provided a couple of video links below showing our primary problem related to this thread. You’ll see the problem in the first recording beginning at timestamp 08:36 in the first recording.
Discourse Accessibility Audit JAWS
This is not related to the elements list but what we’d call Quick Keys or Quick Navigation in which we’ll navigate to the next html element type (in this case headings).

The problem with fixing this issue by creating new landmarks is that landmarks are typically reserved for high level sections, so to a screen reader user, navigating between small sections of the page with landmarks would take away quick access to the large regions of the page like the navigation banner. This also is in violation of WCAG standards level A creating a Bypass Block.

[awesomerobot (Kris)]

מעולה, תודה על הפרטים הנוספים! סרטון יעזור מאוד - נראה שהסרטון מוגן בסיסמה, האם תוכל לפתוח אותו או לשלוח את הקוד ל-accessibility@discourse.org

[Cody_Laplante]

Yes sorry about that. Here is the link with embedded passcode. Video Conferencing, Web Conferencing, Webinars, Screen Sharing - Zoom
Passcode: .kBwdK3a

[dkapoor (Dylan Kapoor)]

היי @awesomerobot, אני עמית של קודי ומהנדס נגישות. בדקתי את המאגר כדי לאבחן את הבעיה. כפי שכבר ייתכן שאתה יודע, הבעיה המרכזית נראית כזו: (1) תוכן בפוסטים מוסתרים אינו נגיש לקוראי מסך ו-(2) פוסטים מוסרים את הכיסוי רק כאשר הם נמצאים בטווח הראייה של המשתמש לפי PostStreamViewportTracker

במחשבה על תיקון אפשרי, אני רוצה להתמקד בשני דברים: (1) לאפשר ניווט בכל פוסט לפי כותרת באמצעות קוראי מסך ו-(2) למזער שינויים במאגר Discourse והשפעה על הביצועים.

הגישה שאני ממליץ עליה היא לשמור על “עטיפה” קלה עבור כל פוסט שנטען, הכוללת את תגית H2 הסמנטית המשמשת לניווט בכותרות, בעוד גוף הפוסט המלא נשאר מוסתר. זה שומר על יציבות הכותרות עבור טכנולוגיות מסייעות מבלי לנפח את ה-DOM בכל הדף. כאשר משתמש מגיע לכותרת H2 של פוסט כלשהו דרך ניווט כותרות, קורא המסך יפעיל גלילה של הדף, אשר בתורו יסיר את הכיסוי מגוף הפוסט במקומו.

היתכנות הפתרון הזה תלויה מתי נטען קטע הפוסטים הבא. שיפור אופציונלי הוא כותרת “טען עוד פוסטים” המיועדת לקוראי מסך בלבד (בדומה ל-“אזור טעינה נוסף” שהוצע ב-PR שלך) הממוקמת בתחתית רשימת הפוסטים שנטענו. כאשר כותרת זו נכנסת לטווח הראייה או נבחרת מרוטור הכותרות, היא טוענת את הקטע הבא ומודיעה על סיום באמצעות הודעת aria-live=polite.

[awesomerobot (Kris)]

תודה על המשוב וההצעות, נדון בכך פנימית ונחזור עם עדכון!

[awesomerobot (Kris)]

@dkapoor

The approach I recommend is to keep a lightweight wrapper for each loaded post that includes the semantic H2 used for heading navigation, while the heavy post body remains cloaked. This keeps headings stable for assistive tech without inflating the DOM across the entire page. When a user lands on any post’s H2 via heading navigation, the screen reader will trigger a page scroll which will in turn uncloak the post’s body in place.

This is the approach we’re currently working on in WIP: A11Y improve heading-to-heading nav, fix infinite scrolling by awesomerobot · Pull Request #34589 · discourse/discourse · GitHub

As you suggested, we’re adding some light screenreader-only headings on all posts (cloaked or not) as well as a heading that will trigger more posts loading, along with the announcement that loading is complete.

It’s still a work-in-progress, so it will still need some refinement, but hopefully we can get this fix available for everyone soon.

[awesomerobot (Kris)]

עדכון מהיר לגבי ציפיות ציר הזמן: אנו נמצאים בהקפאת שחרור מקדים בשבוע הקרוב בערך, וצוות רב שלנו יהיה מחוץ למשרד במפגש השנתי שלנו… כך שסביר להניח שיעברו שבועיים לפני שהשינוי הזה יוכל להתבצע.

[awesomerobot (Kris)]

Hello! as of November 5th we’ve merged an update that is expected to improve topic navigation by heading. Some more details here:

@awesomerobot

Thanks for reporting this. As of yesterday we’ve merged an update that is intended to make post navigation via heading more reliable. We’ve ensured consistent headings are available for every post, and have added headings with live regions that will announce when additional posts are being loaded.