よっしー
こんにちは。よっしーです(^^)
今日は、SvelteKitでのアクセシビリティについて解説しています。
スポンサーリンク
背景
SvelteKitでのアクセシビリティについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
「lang」属性
デフォルトでは、SvelteKitのページテンプレートはドキュメントのデフォルト言語を英語に設定しています。コンテンツが英語でない場合、src/app.htmlの<html>要素を正しいlang属性に更新する必要があります。これにより、ドキュメントを読み上げる支援技術が正しい発音を使用することが保証されます。例えば、コンテンツがドイツ語の場合、app.htmlを以下のように更新する必要があります：
<html lang="de">コンテンツが複数の言語で利用可能な場合、現在のページの言語に基づいてlang属性を設定する必要があります。これはSvelteKitのhandleフックを使用して実現できます：
<!-- src/app.html -->
<html lang="%lang%">// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';
export const handle: Handle = ({ event, resolve }) => {
return resolve(event, {
transformPageChunk: ({ html }) => html.replace('%lang%', get_lang(event))
});
};解説
このセクションでは、多言語対応のための重要な設定であるlang属性について説明しています。
主なポイント：
- 基本的な言語設定：
- デフォルトは英語（en）
- 単一言語サイトの場合は
app.htmlで直接設定 - 正しい言語コードの使用が重要
- 多言語対応：
- 動的な言語切り替えの実装方法
- handleフックの活用
- プレースホルダー（%lang%）の使用
- アクセシビリティへの影響：
- スクリーンリーダーの発音制御
- 適切な言語認識の保証
- ユーザー体験の向上
- 実装の注意点：
- 正しい言語コードの使用
- サーバーサイドでの言語判定
- 動的な言語切り替えの処理
この機能により：
- 各ページで適切な言語設定が可能
- スクリーンリーダーが正しい発音で読み上げ可能
- 多言語サイトでの適切な言語管理が実現
lang属性の適切な設定は、国際的なウェブサイトやアプリケーションにおいて、アクセシビリティと使いやすさを確保するための重要な要素となっています。
おわりに
今日は、 SvelteKitでのアクセシビリティについて解説しました。
よっしー
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント