最佳实践

无障碍功能

SvelteKit 致力于为你的应用提供一个默认的无障碍平台。Svelte 的编译时无障碍检查也适用于你构建的任何 SvelteKit 应用。

以下是如何使用 SvelteKit 的内置无障碍功能，以及你需要采取哪些措施来帮助这些功能尽可能地发挥作用。请记住，虽然 SvelteKit 提供了一个无障碍基础，但你仍然有责任确保你的应用代码是无障碍的。如果你不熟悉无障碍功能，请参阅本指南的 "延伸阅读" 部分，了解其他资源。

我们认识到无障碍功能可能很难实现。如果你想提出如何改进 SvelteKit 处理无障碍功能的建议，请打开一个 GitHub 问题。

路由播报永久链接

在传统的服务器端渲染应用中，每次导航（例如，单击 <a> 标签）都会触发整个页面重新加载。当这种情况发生时，屏幕阅读器和其他辅助技术会读出新页面的标题，以便用户了解页面已更改。

由于 SvelteKit 中页面之间的导航在不重新加载页面（称为客户端路由）的情况下发生，因此 SvelteKit 会将一个实时区域注入到页面中，该区域将在每次导航后读出新页面名称。它通过检查 <title> 元素来确定要播报的页面名称。

由于这种行为，应用中的每个页面都应该有一个唯一且具有描述性的标题。在 SvelteKit 中，你可以通过在每个页面上放置一个 <svelte:head> 元素来实现此目的

src/routes/+page.svelte

<svelte:head>
	<title>Todo List</title>
</svelte:head>

这将允许屏幕阅读器和其他辅助技术在导航发生后识别新页面。提供描述性标题对于SEO也很重要。

焦点管理永久链接

在传统的服务器渲染应用程序中，每次导航都会将焦点重置到页面的顶部。这可确保使用键盘或屏幕阅读器浏览网络的人员从头开始与页面进行交互。

为了在客户端路由期间模拟此行为，SvelteKit 在每次导航和增强的表单提交后都会聚焦<body>元素。有一个例外 - 如果存在具有autofocus属性的元素，SvelteKit 将聚焦该元素。使用该属性时，请务必考虑对辅助技术的含义。

如果你想自定义 SvelteKit 的焦点管理，可以使用afterNavigate钩子

ts
import { afterNavigate } from '$app/navigation';

afterNavigate(() => {
	/** @type {HTMLElement | null} */
	const to_focus = document.querySelector('.focus-me');
	to_focus?.focus();
});

你还可以使用goto函数以编程方式导航到不同的页面。默认情况下，这将具有与单击链接相同的客户端路由行为。但是，goto还接受一个keepFocus选项，该选项将保留当前聚焦的元素，而不是重置焦点。如果你启用此选项，请确保当前聚焦的元素在导航后仍存在于页面上。如果元素不再存在，用户的焦点将丢失，这会给辅助技术用户带来困惑的体验。

“lang”属性永久链接

默认情况下，SvelteKit 的页面模板将文档的默认语言设置为英语。如果你的内容不是英文，你应该更新src/app.html中的<html>元素以具有正确的lang属性。这将确保任何读取文档的辅助技术都使用正确的发音。例如，如果你的内容是德语，你应该将app.html更新为以下内容

src/app.html

<html lang="de">

如果你的内容有多种语言版本，你应该根据当前页面的语言设置lang属性。你可以使用 SvelteKit 的处理钩子来执行此操作

src/app.html

<html lang="%lang%">

src/hooks.server.js

ts
/** @type {import('@sveltejs/kit').Handle} */
export function handle({ event, resolve }) {
	return resolve(event, {
		transformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))
	});
}

src/hooks.server.ts

ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = ({ event, resolve }) => {
	return resolve(event, {
		transformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event)),
	});
};

进一步阅读永久链接

在大多数情况下，构建可访问的 SvelteKit 应用程序与构建可访问的 Web 应用程序相同。你应该能够将以下通用可访问性资源中的信息应用于你构建的任何 Web 体验

上一个图像

下一步 SEO