SvelteKit 默认致力于为您的应用提供一个可访问的平台。Svelte 的 [编译时访问性检查](../svelte/compiler-warnings) 也将适用于您构建的任何 SvelteKit 应用程序。 这里是如何使用 SvelteKit 内置的辅助功能以及您需要做什么来帮助这些功能尽可能好地工作。请注意，虽然 SvelteKit 提供了一个可访问的基础，但您仍然负责确保您的应用程序代码是可访问的。如果您对可访问性是新手，请参阅本指南的["进一步阅读"](accessibility#Further-reading)部分以获取更多资源。 我们认识到，实现无障碍性可能很难。如果您想建议如何改进 SvelteKit 处理无障碍性的方式，请[在 GitHub 上创建一个问题](https://github.com/sveltejs/kit/issues)。 ## 路由公告 在传统的服务器端渲染应用中，每次导航（例如点击一个 `` 标签）都会触发整个页面的刷新。当这种情况发生时，屏幕阅读器和其他辅助技术会读出新页面的标题，以便用户了解页面已更改。 由于在 SvelteKit 中页面间的导航无需重新加载页面（称为[客户端路由](glossary#Routing)），SvelteKit 会在页面中注入一个[实时区域](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)，在每次导航后读出新页面的名称。这通过检查`元素来确定要宣布的页面名称。` 由于这种行为，您的应用中的每个页面都应该有一个独特且描述性的标题。在 SvelteKit 中，您可以通过在每个页面上放置一个`<svelte:head>`元素来实现： ```svelte <!--- file: src/routes/+page.svelte ---> <svelte:head> <title>Todo List ``` 这将允许屏幕阅读器和其它辅助技术识别导航后出现的新页面。提供描述性的标题对于[SEO](seo#Manual-setup-title-and-meta)也很重要。 ## 聚焦管理 在传统的服务器端渲染应用中，每次导航都会将焦点重置到页面顶部。这确保了使用键盘或屏幕阅读器浏览网页的人将从页面开始进行交互。 为了在客户端路由中模拟此行为，SvelteKit 在每次导航后聚焦于``元素，并在[增强表单提交](form-actions#Progressive-enhancement)后。有一个例外——如果存在具有[`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)属性的元素，SvelteKit 将聚焦该元素。在使用该属性时，请确保[考虑对辅助技术的潜在影响](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations)。 如果您想自定义 SvelteKit 的焦点管理，可以使用`afterNavigate`钩子： ```js /// // ---cut--- import { afterNavigate } from '$app/navigation'; afterNavigate(() => { /** @type {HTMLElement | null} */ const to_focus = document.querySelector('.focus-me'); to_focus?.focus(); }); ``` 您也可以使用`goto`函数以编程方式导航到不同的页面。[默认情况下，这将具有与点击链接相同的客户端路由行为。]($app-navigation#goto)然而，`goto`还接受一个`keepFocus`选项，该选项将保留当前聚焦的元素而不是重置焦点。如果您启用此选项，请确保在导航后当前聚焦的元素仍然存在于页面上。如果该元素不再存在，用户的焦点将会丢失，这将为辅助技术用户带来困惑体验。 ## "lang" 属性 默认情况下，SvelteKit 的页面模板将文档的默认语言设置为英语。如果您的内 容不是英语，您应该更新``元素在`src/app.html`中的正确`lang`属性。这将确保任何辅助技术阅读文档时使用正确的发音。例如，如果您的内 容是德语，您应该更新`app.html`为以下内容： ```html /// file: src/app.html ``` 如果您的内容支持多种语言，应根据当前页面的语言设置 `lang` 属性。您可以使用 SvelteKit 的 [handle 钩子](hooks#Server-hooks-handle) 来实现： ```html /// file: src/app.html ``` ```js /// file: src/hooks.server.js /** * @param {import('@sveltejs/kit').RequestEvent} event */ function get_lang(event) { return 'en'; } // ---cut--- /** @type {import('@sveltejs/kit').Handle} */ export function handle({ event, resolve }) { return resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event)) }); } ``` ## 进一步阅读 对于大多数情况，构建一个可访问的 SvelteKit 应用与构建一个可访问的 Web 应用相同。您应该能够将以下通用可访问性资源中的信息应用于您构建的任何 Web 体验： * [ MDN 网络文档：无障碍](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) * [ A11y 项目](https://www.a11yproject.com/) * [ 如何满足 WCAG（快速参考）](https://www.w3.org/WAI/WCAG21/quickref/)