search

sveltejs / kit

web development, streamlined
https://svelte.dev/docs/kit
MIT License
18.78k stars 1.96k forks source link

Presence of live region may be confusing for screen reader users #9705

Open geoffrich opened 1 year ago

geoffrich commented 1 year ago

Describe the problem

We got some feedback in https://github.com/sveltejs/svelte/issues/8508 from a screen reader user who was confused why the page's title appeared at the bottom of the page.

Error when switching pages: When switching back and forth from the homepage to any pages like about or contact, I always have the phenomenon that the title is displayed at the bottom of the page when browsing with a screen reader. That is, when switching between pages, the title will display in the footer, not elsewhere. This is not the case with vue and react. Specifically, when I visit the website svelte.dev or any other website written in svelte or sveltekit including my website, I have the same situation, when I switch from the homepage to the blog page, it shows the title Its blog is • Svelte at the bottom of the footer. I tried switching to another site and got the same result. This causes discomfort to screen reader users and makes them lose the completeness of the website. I think, need to fix it.

Presumably this is SvelteKit's live region for route announcements, e.g. 

<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0px; top: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px;">FAQ • Svelte</div>

For those coming to this issue without prior experience with SvelteKit route announcements, here's a snippet from the docs explaining what they are and how they work:

In traditional server-rendered applications, every navigation (e.g. clicking on an tag) triggers a full page reload. When this happens, screen readers and other assistive technology will read out the new page's title so that users understand that the page has changed.

Since navigation between pages in SvelteKit happens without reloading the page (known as client-side routing), SvelteKit injects a live region onto the page that will read out the new page name after each navigation. This determines the page name to announce by inspecting the element.</p> </blockquote> <p>This live region is invisible to sighted users, but is exposed to screen readers and other assistive technology. By updating it on navigation, the new route title is read out to those users. However, it's still present in the DOM, so an assistive technology user could encounter it and be confused by its presence.</p> <h3>Describe the proposed solution</h3> <p>I'm honestly not sure of a solve for this. We need the live region for route announcements, so removing it is not an option without figuring out an alternative way to announce the navigation. </p> <p>Potentially some additional text clarifying the purpose of the region would help, but then we'd have to provide a way to localize that text (and additional text for screen readers to read out is not always a good thing).</p> <h3>Alternatives considered</h3> <p>If we are able to determine that the existing solution is acceptable (ideally by talking to other assistive technology users), then this issue can be closed.</p> <h3>Importance</h3> <p>nice to have</p> <h3>Additional Information</h3> <p>The route announcement in a live region method was part of the recommendation in Marcy Sutton's research on accessible client-side routing for Gatsby: <a rel="noreferrer nofollow" target="_blank" href="https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing">https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing</a></p> <p>Next.js also does something similar: <a rel="noreferrer nofollow" target="_blank" href="https://nextjs.org/docs/accessibility#route-announcements">https://nextjs.org/docs/accessibility#route-announcements</a></p> <p>So we aren't out-of-line with other frameworks' solutions - though that doesn't mean we're in the clear.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/NVCDevelopmentTeam"><img src="https://avatars.githubusercontent.com/u/82768878?v=4" />NVCDevelopmentTeam</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I myself think there should be a more specific solution like in WordPress they put h1 tag in the header to notify the route when the page loads or google gmail they have an alert notifying the process. In addition, you can also consult other visually impaired programmers to find a solution to thoroughly overcome this problem. I want svelte to be user-friendly for screen readers, no matter whether they interact via keyboard or other device, accessibility is always taken care of. Some aria labels or accesskeys are added to make svelte more flexible. I believe with my testing experience will help you with that.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/NVCDevelopmentTeam"><img src="https://avatars.githubusercontent.com/u/82768878?v=4" />NVCDevelopmentTeam</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I'm wondering why I created a dropdown menu like a collapsed Toggle navigation button but when I code it it doesn't work. I think, due to svelte's fault. This feature on svelte.dev already exists.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/NVCDevelopmentTeam"><img src="https://avatars.githubusercontent.com/u/82768878?v=4" />NVCDevelopmentTeam</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I mean it can collapse and expand menu like bootstrap and I wonder, does php allow to add accesskey but svelte? What I might want is to be able to leave it on top instead of at the bottom of the page.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/freejoe76"><img src="https://avatars.githubusercontent.com/u/125554?v=4" />freejoe76</a> commented <strong> 3 months ago</strong> </div> <div class="markdown-body"> <p>Question: Do multiple liveregions on a page create interference with one another? I ask because I'm having difficulty with a separate liveregion on a svelte app being read, and I'm wondering if svelte's default liveregion is contributing to this difficulty. <a href="https://stackoverflow.com/questions/59350162/is-it-possible-to-have-more-than-one-aria-live-region-on-a-page-and-have-the-scr">I'm not the only one who's had this difficulty</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/NVCDevelopmentTeam"><img src="https://avatars.githubusercontent.com/u/82768878?v=4" />NVCDevelopmentTeam</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>I haven't had any problems related to it and I only have difficulty when it's not optimized for screen readers like react, meaning it doesn't give detailed error messages.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>