SvelteKitBonnes pratiques

Accessibilité

SvelteKit aspire à fournir une plateforme accessible par défaut pour votre application. Les vérifications d’accessibilité lors de la compilation se produisent également pour n’importe application SvelteKit que vous développez.

Voici comment les fonctionnalités d’accessibilité intégrées de SvelteKit fonctionnent et ce que vous avez besoin de faire pour les faire fonctionner aussi bien que possible. Gardez à l’esprit que bien que SvelteKit fournisse une fondation accessible, c’est à vous de vous assurez que votre application est accessible. Si vous débutez avec l’accessibilité, voir la section “Plus de lecture” de ce guide pour en savoir plus.

Nous sommes conscients qu’il peut être difficile de faire de l’accessibilité correctement. Si vous souhaitez suggérez des améliorations quant à la façon dont SvelteKit gère l’accessibilité, merci d’ouvrir une issue Github.

Annonces de routes

Dans des applications rendues sur le serveur traditionnelles, chaque navigation (par ex. lors d’un clic sur une balise <a>) déclenche un rechargement complet de la page. Lorsque ceci se produit, les lecteurs d’écran et autres technologies d’assistance vont lire le titre de la nouvelle page afin que les utilisateurs et utilisatrices comprennent que la page a changé.

Puisque dans SvelteKit les navigations entre les pages se produisent sans recharger la page (phénomène appelé “routing côté client”), SvelteKit injecte dans la page une zone live ARIA qui va lire le nom de la nouvelle page après chaque navigation. Cette zone live détermine le nom de la page à afficher en inspectant l’élément <title>.

À cause de ce comportement, chaque page de votre application devrait avoir un titre unique décrivant correctement la page. Avec SvelteKit, vous pouvez faire cela en plaçant un élément <svelte:head> sur chaque page :

src/routes/+page

<svelte:head>
	<title>À faire</title>
</svelte:head>

Ceci va permettre aux lecteurs d’écran et autres technologies d’assistance à identifier la nouvelle page après que la navigation ait eu lieu. Fournir un titre pertinent est également important pour le référencement.

Gestion du focus

Dans des applications rendues sur un serveur traditionnelles, chaque navigation va réinitialiser le focus en haut de la page. Cela assure aux personnes naviguant sur le web avec un clavier ou un lecteur d’écran de commencer l’interaction avec la page au début de cette page.

Pour simuler ce comportement lors des navigation côté client, SvelteKit met le focus sur l’élément <body> après chaque navigation et chaque soumission de formulaire amélioré. Il y a une exception — si l’élément avec l’attribut autofocus est présent, SvelteKit va à la place focaliser cet élément. Assurez-vous d’envisager les implications sur les technologies d’assistance lorsque vous utilisez cet attribut.

Si vous souhaitez personnaliser la gestion du focus de SvelteKit, vous pouvez utiliser le hook afterNavigate :

import { function afterNavigate(callback: (navigation: import("@sveltejs/kit").AfterNavigate) => void): voidA lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a URL.
afterNavigate must be called during a component initialization. It remains active as long as the component is mounted.
afterNavigate } from '$app/navigation';

function afterNavigate(callback: (navigation: import("@sveltejs/kit").AfterNavigate) => void): voidA lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a URL.
afterNavigate must be called during a component initialization. It remains active as long as the component is mounted.
afterNavigate(() => {
	/** @type {HTMLElement | null} */
	const const to_focus: Element | null@type{HTMLElement | null}to_focus = var document: DocumentMDN Reference
document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.
MDN Reference
querySelector('.focus-me');
	const to_focus: Element | null@type{HTMLElement | null}to_focus?.focus();
});

Vous pouvez aussi naviguer programmatiquement vers une page différente en utilisant la fonction goto. Par défaut, cela aura le même comportement de navigation côté client que le fait de cliquer sur un lien. Toutefois, goto accepte également une option keepFocus qui va préserver l’élément actuellement focalisé plutôt que de réinitialiser le focus. Si vous activez cette option, assurez-vous que l’élément actuellement focalisé existe toujours sur la page après la navigation. Si l’élément n’existe plus, l’utilisateur ou l’utilisatrice va perdre le focus, rendant l’expérience désorientante pour les personnes utilisant des technologies d’assistance.

L’attribut “lang”

Par défaut, le template de page de SvelteKit définit la langue par défaut du document à l’anglais. Si votre contenu n’est pas en anglais, vous devriez mettre à jour l’élément <html> dans le fichier src/app.html pour qu’il ait l’attribut lang correct. Ceci va assurer que les technologies d’assistance lisant le document utilisent la prononciation adéquate. Par exemple, si votre contenu est en français, vous devriez mettre à jour app.html de la manière suivante :

src/app

<html lang="fr">

Si votre contenu est disponible dans plusieurs langages, vous devriez définir l’attribut lang en fonction de la langue de la page courante. Vous pouvez faire cela avec le hook handle de SvelteKit :

src/app

<html lang="%lang%">

src/hooks.server

/** @type {import('@sveltejs/kit').Handle} */
export function function handle({ event, resolve }: {
    event: any;
    resolve: any;
}): any@type{import('@sveltejs/kit').Handle}handle({ event: anyevent, resolve: anyresolve }) {
	return resolve: anyresolve(event: anyevent, {
		transformPageChunk: ({ html }: {
    html: any;
}) => anytransformPageChunk: ({ html: anyhtml }) => html: anyhtml.replace('%lang%', function get_lang(event: any): string@paramevent get_lang(event: anyevent))
	});
}

import type { type Handle = (input: {
    event: RequestEvent;
    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<...>The handle hook runs every time the SvelteKit server receives a request and
determines the response.
It receives an event object representing the request and a function called resolve, which renders the route and generates a Response.
This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
Handle } from '@sveltejs/kit';

export const const handle: Handlehandle: type Handle = (input: {
    event: RequestEvent;
    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<...>The handle hook runs every time the SvelteKit server receives a request and
determines the response.
It receives an event object representing the request and a function called resolve, which renders the route and generates a Response.
This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
Handle = ({ event: RequestEvent<Partial<Record<string, string>>, string | null>event, resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve }) => {
	return resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>resolve(event: RequestEvent<Partial<Record<string, string>>, string | null>event, {
		ResolveOptions.transformPageChunk?: ((input: {
    html: string;
    done: boolean;
}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it’s the final chunk. Chunks are not guaranteed to be well-formed HTML
(they could include an element’s opening tag but not its closing tag, for example)
but they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.
@paraminput the html chunk and the info if this is the last chunktransformPageChunk: ({ html: stringhtml }) => html: stringhtml.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.
@paramsearchValue A string or regular expression to search for.
@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace('%lang%', function get_lang(event: any): string@paramevent get_lang(event: RequestEvent<Partial<Record<string, string>>, string | null>event))
	});
};

Plus de lecture

De manière générale, construire une application SvelteKit accessible est la même chose que construire n’importe quelle application web accessible. Vous devriez être capable d’appliquer les recommandations des ressources générales d’accessibilité à n’importe quelle expérience web que vous construisez :

Modifier cette page sur Github llms.txt

précédent suivant

Images Référencement