View Transitions in SvelteKit and beyond with Geoff Rich
Nov 22, 2023
auto_awesome
Geoff Rich, an experienced programmer and SvelteKit enthusiast, joins the podcast to discuss view transitions. They explore the implementation of view transitions in SvelteKit, along with Geoff's upcoming talk at Svelte Summit Spring 2023. The episode also covers unpopular opinions, ARIA attributes in web development, and picks like Flowbite GitHub and The Wheel of Time S2.
The View Transitions API simplifies the process of transitioning between two page states. It is a browser API that allows you to tell the browser to capture the old page state and smoothly transition it to the new page state. This API is not specific to Svelte and can be used in any browser-based application. View Transitions are especially useful for page transitions and flip animations where elements are moved from one place to another. The API uses CSS animations, making it easy to customize the transitions. It is important to test View Transitions with screen readers like VoiceOver or NVDA to ensure that they are properly functioning and accessible.
Testing View Transitions with Screen Readers
It is crucial to test View Transitions with screen readers like VoiceOver and NVDA to ensure that they are properly functioning and accessible. ARIA attributes should not be used without testing them in a screen reader, as they may not work as expected or might even make things worse. Running automated accessibility audits using tools like AXE can catch low-hanging fruit, but testing with screen readers provides invaluable insights into the usability and accessibility of the transitions. Starting with VoiceOver or NVDA is recommended, and it is important to be aware of the differences between screen readers and their specific quirks.
Leveraging the View Transitions API in Svelte and SvelteKit
In Svelte and SvelteKit, the View Transitions API can be leveraged using the onNavigate lifecycle method. By calling document.startViewTransition and passing a callback, you can initiate the transition between page states. The callback is where you update the page and make the necessary changes for the transition. SvelteKit provides hooks and libraries like Flow By and SvelteKit View Transition to simplify the implementation of View Transitions. While it is possible to use View Transitions in Svelte without a router, integrating it with a router can provide a more seamless experience.
Unpopular Opinion: Writing ARIA Attributes Without Testing with Screen Readers
Writing ARIA attributes without testing them with screen readers is not recommended. ARIA attributes are meant to enhance accessibility, but they should only be used if they are properly functioning and improve the user experience for screen reader users. Testing with screen readers like VoiceOver or NVDA is crucial to ensure that the ARIA attributes are working as intended and providing the expected accessibility benefits. Writing ARIA attributes without testing them can result in ineffective or even detrimental accessibility implementations.
Today we chat with Geoff Rich about View Transitions. We explore what you can do with them, how to use them and much more. Can it be used with SvelteKit? Yes! Dive in and get all the tips!