Svelte has been described as an “accessibility-first-framework”, yet its compiler warnings cover only a fragment of the issues at hand. In this talk, I’d like to explore how accessible Svelte really is and more importantly, have a look at what you can do to bridge the gap. Ideas include checking both automatically and manually for issues the compiler might overlook, like color contrast, keyboard accessibility and semantics.
A weekly Svelte update from February 2024 covering changelog highlights, community showcase featuring Paraglide JS for internationalization, and discussions about Svelte 5 progress.
Svelte includes built-in animations that makes it easy to slide, scale, and fly elements in and out of the DOM. However, you need to be careful to not trigger motion sickness in your users. I will go over which Svelte transitions could cause accessibility issues and how to respect user motion preferences when using them.
Domenik Reitzner had a dialog with his brave audience about the dialog element and how to integrate it with Svelte. He showed us the benefits of using the platform and what a11y(accessibility) benefits come out of the box, by using this HTML element.
The video explains skip links, which are used to improve web navigation efficiency. Skip links allow users to jump directly to the main content or other key sections of a webpage when using a keyboard or screen reader.
This is a short introduction of the talk2svelte library which provides voice recognition and voice synthesis for Svelte, thanks to the Web Speech API.
It allows to interact with a Svelte site by voice, like navigating or clicking on elements.
Inlang: a solution for internationalization in SvelteKit projects. The SDK and its tools simplify setup, language negotiation, and content management. This approach automates i18n processes, offering a user-friendly experience for developers and translators.
0:00 Introduction
0:20 Changelog - SvelteKit 1.22.6
1:59 Community Showcase - sveltekit-search-params by Paolo Ricciuti
22:32 Q&A - How to create accessible form error summaries
Paraglide-JS comes with two main innovations that make Paraglide JS the simplest, most efficient, and typesafe i18n library for SvelteKit.
1. A compiler (sounds familiar?) emits message functions instead of key-value runtime lookup logic.
2. The message functions are tree-shakable, leading to auto optimization by the bundler.
Library link: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
When people hear metaframework, the first thing they think of is usually SSR. However, SvelteKit also supports other rendering strategies like CSR and prerender. As the recommended way to build any Svelte app, is it going to offer the best DX for all its use cases? In this talk I'll share my experience and tell you what's good, what's bad, and what's awesome about building SPAs with Sveltekit.
Do you find Svelte's a11y warnings get in your way? They're actually part of a greater mission shared by nations around the world to make the digital web universally accessible. In this talk, I will break down some of Svelte's a11y warnings, the user experiences they impact, and how to solve them.
Jacob Bowdoin introduces KitBook, a tool designed to simplify the process of building, documenting, and testing Svelte components within SvelteKit projects.