アクセシビリティと文字数の関係

Web アクセシビリティを高めるうえで、テキストの文字数は見過ごせない要素です。スクリーンリーダーのユーザーにとって、冗長な alt テキストや曖昧なリンク文言は大きな障壁になります。本記事では、アクセシビリティの観点から各テキスト要素の適切な文字数を解説します。

アクセシビリティ関連テキストの推奨文字数

alt テキストの書き方と文字数

画像の alt テキストは、スクリーンリーダーが読み上げる代替テキストとして機能します。多くのスクリーンリーダーは 125 文字を超えると読み上げを分割するため、80 〜 125 文字以内に収めるのが実用的です。装飾目的の画像には空の alt 属性 (alt="") を設定し、読み上げをスキップさせます。

グラフや図表の場合は、alt テキストだけで内容を伝えきれないことがあります。その場合は alt テキストに概要を記述し、aria-describedby や本文中のテキストで詳細を補足する構成が適切です。「画像」「写真」といった冗長な接頭辞は不要です。スクリーンリーダーは要素が画像であることを自動的に伝えます。

aria-label と aria-describedby の使い分け

aria-label は要素の名前 (アクセシブルネーム) を定義する属性で、短く端的な表現が求められます。「メニューを開く」「検索」「閉じる」のように、50 文字以内で操作内容を明示しましょう。視覚的なラベルが存在する場合は aria-label ではなく aria-labelledby で既存のテキストを参照するほうが一貫性を保てます。

一方、aria-describedby は補足的な説明を提供する属性です。パスワード入力欄に「8 文字以上、英数字と記号を含めてください」といった要件を紐づける用途に適しています。200 文字以内を目安に、ユーザーが操作を完了するために必要な情報を過不足なく伝えましょう。

リンクテキストとボタンラベルの設計

「こちら」「ここをクリック」といった曖昧なリンクテキストは、スクリーンリーダーのリンク一覧機能で文脈を失います。リンク先の内容が推測できる具体的な文言を 5 〜 80 文字で記述しましょう。「利用規約を確認する」「2025 年 7 月の更新履歴」のように、リンク単体で意味が通る表現が理想です。

ボタンラベルは動作を明確に示す動詞を含め、2 〜 25 文字に収めます。「送信」「保存」「削除する」のように簡潔な表現が適切です。アイコンのみのボタンには必ず aria-label を設定し、視覚に頼らずとも操作内容を理解できるようにします。

WCAG ガイドラインとテキスト要件

WCAG 2.2 では、テキストの文字数そのものを規定する基準はありませんが、関連する達成基準がいくつか存在します。達成基準 1.1.1 (非テキストコンテンツ) は、すべての非テキストコンテンツに代替テキストを要求します。達成基準 2.4.4 (リンクの目的) は、リンクテキストまたはその文脈からリンク先を判断できることを求めます。

達成基準 2.4.6 (見出し及びラベル) では、見出しとラベルが主題や目的を説明することを要求しています。これらの基準を満たすには、各テキスト要素が適切な長さで、かつ具体的な内容を含んでいることが不可欠です。文字数の目安を意識することで、自然とこれらの基準を満たしやすくなります。

まとめ

アクセシビリティにおける文字数設計は、すべてのユーザーに情報を正確に届けるための基盤です。alt テキストは 125 文字以内、aria-label は 50 文字以内、リンクテキストは具体的な文言で 80 文字以内を目安にしましょう。テキストの文字数を確認する際は、文字カウンタスを活用して適切な長さに調整してください。