Skip to main content
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): void
A 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.


reference
afterNavigate } from '$app/navigation';

function afterNavigate(callback: (navigation: import("@sveltejs/kit").AfterNavigate) => void): void
A 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.


reference
afterNavigate(() => {
	/** @type {HTMLElement | null} */
	const const to_focus: Element | nullto_focus = var document: Document
window.document returns a reference to the document contained in the window.


MDN 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
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 handle({ event, resolve }) {
	return resolve(event, {
		transformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))
	});
}
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = ({ event, resolve }) => {
	return resolve(event, {
		transformPageChunk: ({ html }) => html.replace('%lang%', get_lang(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