最佳實務

無障礙性

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 的 handle 掛鉤來執行此操作

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 應用程式與建立無障礙的網頁應用程式相同。您應該可以將以下一般無障礙資源中的資訊套用至您建立的任何網頁體驗

上一頁圖片

下一頁 SEO