svelte: Some problems svelte and sveltekit are having when working with screen readers
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
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 1
- Comments: 23 (5 by maintainers)
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.
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.
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.
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.
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.
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.
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:
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.
What is this in relation to? Are you saying the Svelte documentation site should be AAA compliant or something else?
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.
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”?
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?
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.
I’m not sure what this means - can you clarify?
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?