Some problems svelte and sveltekit are having when working with screen readers

[NVCDevelopmentTeam]

Describe the bug

• Difficulty in compatibility with screen reader: I am using NVda as my official screen reader and I was having a hard time when the code is buggy, there are many bugs, there is no message to tell me that I have an error in which line. This is very difficult for me to develop my website further. It's worth noting that the screen reader can't read the error message.
• Some issues related to wcag and a11y need to be solved: I think, it should have AAA level response and need to improve it.
• Error 500Internal Error: when loading the page or downloading data from the server to the browser and requesting more information of the website, nvda cannot read the error message to be resolved.
• Difficult to use for visually impaired programmers: this is also easy to understand because most compilers are difficult to access. I switched to vue and react didn't have that problem.
• 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. In addition, there are a few other errors such as: Lack of properties or accessibility api and lack of tools to check accessibility. -Need to integrate disability-friendly things.
• Need to integrate auto debug tools Simple syntax, more compact code. Difficult to learn: Svelte has a different syntax from other frameworks, so it can be difficult for beginners to learn. Limited libraries and plugins: Svelte is a new framework so its community is not fully developed, especially the libraries and plugins for Svelte. This can make it difficult to develop large and complex applications. No backward compatibility: Some features of Svelte are not backward compatible with older browsers. This can make it difficult to develop apps for older browsers. Not the most popular framework: Svelte is not one of the most popular frameworks, which could make it a less attractive option for some developers. Svelte does not support Internet Explorer by default: Svelte requires polyfills to run properly in Internet Explorer (and even so, support for any IE versions below 11 is not guaranteed). If you need IE-11 support, you can read the Svelte/IE11 GitHub issue, which lists some possible workarounds and polyfills.Or this could be a case of needing to choose another framework. However, if you are starting a new project today, be aware that Internet Explorer is not long in this world. Google search recently dropped support for IE-11, citing its very small and shrinking market share (only about 1% across all browsers). WordPress, which powers about 40% of the web at this point, dropped support for IE-11 in WordPress 5.8 earlier this year. And even Microsoft itself will hammer the final nail into IE-11's coffin in July 2022. Svelte has a hard time finding work, or building team projects: If you're studying in hopes of landing a job with your new-found skills, it would be difficult to recommend anything other than React for that pursuit — simply because it's the biggest framework ever. so far in terms of market share and jobs available. I wish it wasn't, but technology in general (at least in the US), is heavily involved in React, and I don't see that changing anytime soon. However, despite that: if you already know React, I think you should still learn Svelte just for the perspective, if nothing else. Besides if you are choosing a technology for a project or start-up? Svelte will likely allow you to move faster and build something more efficient, but recruiting or collaborating can be a challenge, given the relatively small number of Svelte developers. A few things that sveltekit encounters: In beta: SvelteKit is still in beta, which means it's still under development and may not be fully stable yet. As a result, various errors and problems may be encountered during application development. Lack of official documentation: Since SvelteKit is a new framework, official documentation is scant and incomplete, which can make learning and using SvelteKit difficult. Limitations on state management: SvelteKit does not provide a single state management solution for your application, which can make it difficult to build large and complex applications. Limitations on integration with external libraries: SvelteKit has some limitations on integration with external libraries and tools, so it may be difficult for you to integrate with other technologies. The most important is still the problem of a11y and wcag as well as the difficulty of compatibility with Screen readers like NVDA. Need to improve.

Reproduction

https://github.com/sveltejs/svelte

Logs

I am using google chrome and cmd of windows 10, screen reader version nvda 20231, I use vercel to run my website. Because of the above bugs, I can't put the website on it.

System Info

I'm using npm and I'm on chrome. The compiler is vite.

Severity

blocking all usage of svelte

[NVCDevelopmentTeam]

If you use NVda as your reference screen reader, you can get it at: https://www.nvaccess.org/download/ if you need accessibility tester tools then you can use google Lighthouse or webaim.org to do this.

[geoffrich]

Hey, appreciate you reaching out with accessibility feedback. We definitely want to make sure Svelte and SvelteKit work well with screen readers like NVDA. This sounds like a combination of a bunch of issues, some related to developing Svelte projects and some related to interacting with websites created with Svelte. We'll probably end up breaking this up into multiple issues, as this issue by itself is not particularly actionable.

That said, we do need clarification on some of your points:

I am using NVda as my official screen reader and I was having a hard time when the code is buggy, there are many bugs, there is no message to tell me that I have an error in which line.

This is when developing a SvelteKit site with a screen reader? This is probably outside of Svelte/SvelteKit's scope. I would expect this information to be exposed by VSCode (or whatever IDE you're using) to the screen reader. That said, maybe there's something the VSCode extension needs to be doing? If you're able to provide a reproduction, we can investigate further.

Also, is this something you've had a better experience with other frameworks? If so, I'm curious what steps they take to expose this information.

Some issues related to wcag and a11y need to be solved: I think, it should have AAA level response and need to improve it.

What is this in relation to? Are you saying the Svelte documentation site should be AAA compliant or something else?

Error 500Internal Error: when loading the page or downloading data from the server to the browser and requesting more information of the website, nvda cannot read the error message to be resolved.

Is this when browsing a site built with SvelteKit or when developing a site built with SvelteKit? I'm not sure why the error page on a SvelteKit site would be unable to be read by NVDA, as it's just text. If you're able to provide instructions to reproduce I'm happy to investigate further, though.

Difficult to use for visually impaired programmers: this is also easy to understand because most compilers are difficult to access. I switched to vue and react didn't have that problem.

I'm not clear how Svelte being a compiler makes it difficult to use for visually impaired programmers. What do you mean by "vue and react didn't have that problem"?

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.

This is a side effect of SvelteKit's built-in route announcements to help make the client-side routing more accessible. When you navigate to a new page, we update the live region at the bottom of the page with the new page's title so it is announced to screen readers. This is a recommended approach from previous accessibility research.

I'm not sure of a way to solve this one without removing the route announcements (which we need, since otherwise there would be no indication that you've moved to a new page). Do you have any suggestions for how this could be made less confusing?

Lack of properties or accessibility api and lack of tools to check accessibility.

We do have automatic accessibility warnings - see the "Accessibility warnings" heading in the Svelte docs. You can also use tools like Axe to check your Svelte site just like you would any other web page.

Need to integrate auto debug tools

I'm not sure what this means - can you clarify?

Difficult to learn: Svelte has a different syntax from other frameworks...

The rest of this is a bunch of general Svelte pros/cons (some of which are inaccurate) which makes this issue report very difficult to parse. Assuming there's nothing vital in there, I'd appreciate it if you could edit your post to remove extra information. This part doesn't seem related to screen readers or accessibility at all - maybe it was pasted in by mistake?

[NVCDevelopmentTeam]

I think the advantages and disadvantages of svelte and sveltekit are not worth mentioning because these sources are my reference from my friends and colleagues. However, the disadvantages on it will no longer be true at the present time, but instead are problems related to a11y and the use of this framework to develop a website with screen reader users. ie blind people like me can use it to build a website. I find, Svelte is easy to learn, but the syntax is too long, so it will sometimes be confusing, harder to remember. The reading of the error message is not due to the content of the message in the ide or other environments where it exists in the browser. For example, if my website has an error, it won't tell me which line is the error, where to fix it, give a method to fix the problem, also, When I use vue and react, they say The error is very clear and detailed. That, helping me master the lines of code, tells me what I need to do next. I only answer accessibility questions because with my experience as an accessibility tester and a blind person new to programming like me there is no reason to comment on new features for svelte and sveltekit. What I need to do now is suggest improving it to be suitable for everyone including the blind or other disabilities. In my opinion, the problem is not with me, but with you.

[NVCDevelopmentTeam]

The issue of developing websites with svelte and sveltekit with screen readers is a matter of great concern. The problem I'm talking about here is that compiling, running code or building a web when there is an error does not have a specific message like other frameworks for the visually impaired to recognize. You can try using nvda and then develop a similar website and test it out. It would be difficult without a detailed announcement. This behavior occurs when you test the website through the browser or localhost. In other frameworks, this situation is almost non-existent. To say friendly to visually impaired programmers, we have to talk about bootstrap. I will not mention it here. I like that sveltekit has a clean layout that makes me very happy. However, my experience with other frameworks is very specific and full of an error message. I don't know how to explain it to you. You can consult longtime blind programmers to see what their opinions are? Since like I said, I'm an accessibility tester so I can't say what I don't know. Regarding WCAG compliance, I think Svelte's website needs to comply with the highest level of AAA Because I know some things that are very necessary such as accesskeys or features to enlarge font size, adjust contrast and interact through keyboard. In my opinion, it is necessary to design svelte or sveltekit lessons for users of screen readers or those with special support needs. Make them easily accessible. Error 500Internal Error: This error when compiling the code and in the process of developing a website with svelte and this error besides the 500Internal Error message, there is no other information like where is the error? What location or why? This makes it more difficult to develop websites using sveltekit for screen reader users. Not to mention, it's very informative. My friends are blind and have learned react and vue, they are not in the same situation as me. According to my friends, react and vue have shorter syntax, easier to remember, easier to understand layout and presentation, it also works better with NVDA than svelte. From your point of view as a developer it is a feature but from my point of view as an accessibility tester it is a bug. It affects the website's aesthetic rather than its usefulness. However, since this is an accessibility issue, you can update to a new version of WCAG for more information. I have not seen, any website written in other framework has this side effect. I see, you can put the title on the address bar and the title bar. Here an example that other frameworks have done or otherwise is WordPress one cms did and was very successful. Instead of putting it at the bottom of the page, you can put it at the top of every page. For example, after the menu you can leave the message as

<h1>home</h1>
<h1>contact</h1>

This is also a nice announcement and will be more aesthetically pleasing than leaving it in the footer. In WordPress did the same. About the display: in my opinion,can display as home - Coding Nguyen: where home is the page title and coding Nguyen is the site title, these two are separate but they are still related. That is, it belongs to the dynamic title, not the static one. Changing the site title will not affect the pate title and vice versa. In addition, you can leave a link to notify this is the homepage or contact page like

<a href="/" aria-current="page">hoem</a>

In addition, you can also add some properties like accesskey+h or others. Adding a slogan for a website or in WordPress called Tagline is also quite good, but it is very verbose, leading to difficult SEO. I find, for SEO, next.js is the best, and for the neat layout and easy to use for the blind, there is bootstrap because it can divide the components on the website to make it easier to maintain. At the same time, it also shortens the time and reduces the difficulty of building a website with a screen reader. I hope, you understand this problem well to improve it accordingly. Need to consult other programmers or accessibility testers to learn from experience. In terms of having more properties or API accessibility, this helps to integrate so that screen readers can understand and help users interact with the website better. This has a lot to do with BackEnd, not in FrontEnd, so you need to consider this issue. Auto debug helps developers find bugs faster and can better test and fix bugs themselves. It is important to bring about better work efficiency than the traditional way of finding bugs. Other issues I will not talk about anymore. Thank you. I believe you will understand the problem that I am talking about because it is not only responsive to accessibility, but needs to be placed in a suitable place so that it is both aesthetically pleasing and helps users not be confused when using it.

[NVCDevelopmentTeam]

Instead of leaving it in the footer, you can do the following:

<h1>home</h1>

[NVCDevelopmentTeam]

I'm sorry, I can't write the code here because every time I write the html so that I can show you an example, it can't display the code, but it always displays a certain heading or link. This is very difficult for me.

[dummdidumm]

I think I know what is meant by the 500 errors - it's when developing a SvelteKit app and you have an error inside your load function, right now we show the 500 - Internal Error message without clear indication that a) you can use handleError to handle this error and customize its message and b) the underlying error message and stack trace is invisible in the site itself in dev mode. Maybe it's worthwhile to adjust the displayed error message in dev mode only, or use the Vite error overlay in these cases.

[NVCDevelopmentTeam]

Have you tried using sveltekit or svelte with a screen reader? If you are someone who does not have vision problems or has special support needs, that should not be a problem for you. However, that's a problem for me. The screen reader itself cannot read graphic content, but can only understand text. Frameworks that do not comply with accessibility standards make it difficult for people with disabilities. So I think you should have a solution for this.

[geoffrich]

Okay, I opened two SvelteKit issues based on your feedback:

• page title at the bottom of the page can be confusing: https://github.com/sveltejs/kit/issues/9705
• errors when developing are not shown on the webpage: https://github.com/sveltejs/kit/issues/9704

For now, the specific error message should be present in your terminal (where you ran npm run dev) - it will give you the actual error and a stack trace showing where it happened.

[NVCDevelopmentTeam]

Thank you, I'm very happy for that. For a framework that is friendly to all programmers or developers including visually impaired programmers. I hope that the above notices will be clearer because if there is only 500 server error, blind people will be very confused as to where they encountered the bug, how to handle it? If it is possible to change the url or path of a website to make it short, easy to remember or easier to SEO. It is possible to change the page title or site title as this will help the programmers easily manage the code and break it down into many components. Sometimes the title title in the footer will confuse or make it harder for visually impaired users to distinguish. Instead, put it on the top of every page after the menu or after the header and announce it with a level 1 heading or a link. These will keep the blind from getting tangled up and it's like the big newspapers do. WordPress itself does the same. That is my personal opinion. If anyone is a visually impaired programmer who is having difficulty with this framework, it can be discussed in this thread. I hope what I share is appropriate.

[NVCDevelopmentTeam]

Another workaround is that during page load there should be a notification as to which page is on by an alert or a sign so that screen readers can know the location of the site title or page title to avoid confusion and when show them the spacing of site title and page title are clearly separated, they are separated by dashes. For example, my site title is coding Nguyen, my page title is home. This will help visually impaired people easily distinguish elements or pages in a website. To ensure a good website accessibility is very important but friendly layout is very important. It affects all users. So I hope you can take a closer look at this issue.

[geoffrich]

Yep, those are good techniques. Nothing is stopping people building sites with Svelte or SvelteKit from adding page headings or setting the page title as they desire - in fact, we encourage it in our documentation. It's not something the framework can automatically do, however, because how those headings or titles are structured depends on the site people are building. People still need to understand how to structure their HTML appropriately, just as they would using React or Vue or any other framework.

I'm going to go ahead and mark this issue as closed because we have separate issues open for the individual SvelteKit issues that need to be looked at it. But I'm happy to keep responding in this issue if there's still more to discuss -- if something else comes up, we can open another issue dealing with that specifically.

[NVCDevelopmentTeam]

Thank you, I know some WCAG compliant websites should be consulted, and I know that having any extra title displayed in the footer is aesthetically pleasing and has a big impact on screen readers. Whereas title it is usually located in the title bar. I appreciate the accessibility of svelte 100 points google Lighthouse. However, the layout of the components is not logical. Perhaps, we have to study the way of announcement instead of putting the title in the footer.

[NVCDevelopmentTeam]

I wonder why SVelte doesn't have site title and page title because I only see title on each page when scrolling. The svelte problem with screen reader probably requires multiple perspectives from all sides including testers and visually impaired programmers to solve this problem safely.

[NVCDevelopmentTeam]

I think, you can read carefully the W3c WCAG documentation to fix this problem. Alternatively, it can be replaced with an announcement aria or a heading on each header or a voice announcement on the website nguoibanso.vn I think we need to do something to create a framework that works for all. programmers. I know, very few programmers use svelte and sveltekit to build websites or do actual projects because of the need to recruit reaxt and vue more. That, makes me very sad because this is an accessibility framework so it is essential that it works well with the screen reader. You can work with visually impaired developers or programmers to get their input because as I said above I am an accessibility tester so I have no further comments on this. I believe in the upcoming update and with the strength of the community it will be solved. You can also try downloading jaws or NVDA to try with it. However, I encourage you to download NVDA for testing.

[NVCDevelopmentTeam]

I think, there are two solutions, one is to consult other blind programmers. The second is applicable like WordPress is to put an h1 tag at the top of each page to indicate the route of a page for example home has an h1 tag at the top and similar to other pages or can also add warnings of the form alert on page load. In addition, to avoid confusion, it is possible to separate it into two parts, the website name and the title of each page are clearly defined, each part is separated by a dash. For example, my website name is Coding Nguyen, then my page title will be home and it is written as follows: home - Coding Nguyen. This will help users to easily distinguish between a website and a page. In addition, it will make it easier for visually impaired programmers to manage the code. This means using a dynamic title instead of a static title. Therefore, we can flexibly customize our website and avoid code duplication. I believe everything you can take a close look at as very few visually impaired people know about svelte at this time.

[geoffrich]

I wonder why SVelte doesn't have site title and page title because I only see title on each page when scrolling.

@NVCDevelopmentTeam on which site are you encountering this behavior? If you give me a URL I can take a look myself. I've used NVDA in the past to test sites for accessibility.

In theory, developers using Svelte should be able to put h1 tags wherever they like. In addition, they can set the page title using the special <svelte:head> element:

<svelte:head>
    <title>Custom title goes here</title>
</svelte:head>

For instance, on the SvelteKit documentation site - each page has an h1 tag (e.g. "FAQ" for the FAQ page) as well as a dynamic title (e.g. "FAQ - SvelteKit" for the FAQ page or "Introduction - Docs - SvelteKit" for the first page of documentation).

[NVCDevelopmentTeam]

I'm having a hard time understanding that if I set it to:

<svelte:head>
<Title> Home - Coding nguyen</title>
<h1>home</h1>
</svelte:head>

Because I am thinking of how screen reader users can determine the route of a page, or I can also separate the whole website title as Coding Nguyen and the title of the home page separately. side. I think, it's more manageable. Also, I wonder if the aria label of each link or index in the menu doesn't work with vercel. For example aria Current Page for example. Can I give an example of a demo website that I am currently visiting? https://sveltekit-blog-template.vercel.app/ I believe everything will work out.

[NVCDevelopmentTeam]

I'm trying accessibility test with google Lighthouse and it's giving good results. I also tried with talkback on android it is much better with nvda on windows. Better yet, it's faster, and things aren't exactly even. I think there needs to be a solution so that everyone can access it. Generally speaking, to solve this problem not only blind programmers but also many people from the svelte developer side. Therefore, I believe both sides will find a suitable solution. I have read in the svelte documentation very detailed and complete. However, there should be a tutorial specifically for screen reader users to make them more accessible. Also, I think there should be an accessibility statement on svelte's website so that everyone understands how well the framework supports a11y. Since I know, not every programmer knows about it so it makes sense to declare. And I don't understand is it difficult to configure svelte on github page? However, this issue has nothing to do with the screen reader being able to work with svelte so I didn't mention it. I think, you can double check this to avoid misunderstanding or make it difficult to distinguish content, difficult to access for screen readers. I need a more streamlined design.

[NVCDevelopmentTeam]

I see, there are many programmers who are proficient with bootstrap and they think it is a good framework for the blind. In my country, the places that train programming for the blind often use vue and react because it's popular and easy to get a job. However, svelte is my choice because I have experience in accessibility tester and svelte responds almost fully to a11y or WCAG that I need. I think this is the way I should go. I focus on helping to make svelte a great framework in this respect to replace bootstrap in the future. I want visually impaired developers to change their perspective on it and myself, an accessibility tester, will do it first. Why, such a great framework cannot replace bootstrap for the simple reason that it is suitable for the visually impaired. If my website layout is easily distinguishable and svelte can improve accessibility and screen reader compatibility then I will continue to develop my website and will not have a problem with code management. . I hope things get better.

[NVCDevelopmentTeam]

I am wondering how to update svelte or sveltekit to the new version. Meanwhile, the svelte and sveltekit documentation does not mention this issue. I believe there will be a solution to check it.

[NVCDevelopmentTeam]

I am wondering that when configuring sveltekit on vercel, I can't run the aria current page and I can't activate, create Toggle navigation. Like the svelte.dev website, it has a nice drop-down menu. I need something that can add font size scaling and accessibility features. You can try researching this issue.

[NVCDevelopmentTeam]

I'm wondering why svelte doesn't fully respond to WCAG and a11y because I see, properties like accesskey are missed. Have you ever built a personal website yourself as a programmer with a disability and you need to understand that the keyboard shortcuts are integrated into the website to help screen reader users operate conveniently. faster, less wasted time searching for the content you like.