HTMLアクセシビリティ
HTMLアクセシビリティ
常にアクセシビリティを念頭に置いてHTMLコードを記述してください。
サイトをナビゲートして操作するための優れた方法をユーザーに提供します。HTMLコードを可能な限りセマンティックにします。
セマンティックHTML
セマンティックHTMLとは、正しいHTML要素を可能な限り正しい目的で使用することを意味します。セマンティック要素は意味を持つ要素です。ボタンが必要な場合は、<button>要素を使用します（要素ではありません
<div>）。
セマンティック
<button>Report an Error</button>
非セマンティック
<div>Report an Error</div>
セマンティックHTMLは、ページのコンテンツを読み上げるスクリーンリーダーにコンテキストを提供します。
ボタンの例を念頭に置いて：
- ボタンはデフォルトでより適切なスタイルになっています
- スクリーンリーダーはそれをボタンとして識別します
- フォーカス可能
- クリック可能
キーボードのみのナビゲーションに依存している人は、ボタンにもアクセスできます。マウスとキーの両方でクリック可能であり、（キーボードのタブキーを使用して）その間をタブで移動できます。
非セマンティック要素の例：<div>および<span>-その内容については何も伝えません。
セマンティック要素の例： <form>、、<table>および<article>-その内容を明確に定義します。
見出しは重要です
見出しは<h1>to<h6>タグで定義されます。
例
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
検索エンジンは、見出しを使用してWebページの構造とコンテンツにインデックスを付けます。
ユーザーは、見出しでページをざっと読みます。見出しを使用して、ドキュメントの構造と異なるセクション間の関係を示すことが重要です。
スクリーンリーダーは、ナビゲーションツールとして見出しも使用します。さまざまな種類の見出しは、ページのアウトラインを指定します。
<h1>見出しは主な見出しに使用し<h2>、次に見出し、次に重要度の低いもの
などを使用する必要があり<h3>ます。
注： HTML見出しは見出しにのみ使用してください。テキストを大きくしたり太字にしたりするために見出しを使用しないでください 。
代替テキスト
この属性は、ユーザーが何らかの理由で画像を表示できない場合（接続が遅い、
属性にエラーがあるため、またはユーザーがスクリーンリーダーを使用している場合）altに、画像の代替テキストを提供します。
src
属性の値はalt画像を説明する必要があります。
例
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
ブラウザが画像を見つけられない場合は、alt
属性の値が表示されます。
例
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
言語を宣言する
Webページの言語を宣言するには、常にタグlang
内に属性を含める必要があります。<html>これは、検索エンジンとブラウザを支援することを目的としています。
次の例では、言語として英語を指定しています。
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
明確な言葉を使う
常に理解しやすい明確な言葉を使用してください。また、スクリーンリーダーではっきりと読み取れない文字は避けてください。例えば：
- 文をできるだけ短くする
- ダッシュは避けてください。1〜3を書く代わりに、1〜3を書いてください
- 略語は避けてください。2月を書く代わりに、2月を書く
- 俗語を避ける
良いリンクテキストを作成する
リンクテキストは、読者がそのリンクをクリックすることによってどのような情報を取得するかを明確に説明する必要があります。
良いリンクと悪いリンクの例：
良い
悪い
注：このページは、Webアクセシビリティの概要です。詳細については、アクセシビリティチュートリアルをご覧ください。