HTML アクセシビリティ
HTML アクセシビリティ
常にアクセシビリティを念頭に置いてHTMLコードを記述してください。
ユーザーがサイトに移動して操作するための適切な方法を提供します。 HTML コードをできるだけセマンティックなものにします。
セマンティックHTML
セマンティックHTMLとは、正しい目的のために正しいHTML要素を可能な限り使用することを意味します。セマンティック要素は、意味を持つ要素です。ボタンが必要な場合は、(<div>要素ではなく)<button>要素を使用します。
セマンティックHTMLは、ページのコンテンツを読み上げるスクリーンリーダーにコンテキストを提供します。
ボタンの例を念頭に置いて：
- ボタンにはデフォルトでより適切なスタイルが設定されています
- スクリーンリーダーはそれをボタンとして識別します
- フォーカス可能
- クリック可能
キーボードのみのナビゲーションに依存しているユーザーもボタンにアクセスできます。マウスとキーの両方でクリック可能で、その間をタブで移動できます(キーボードのタブキーを使用)。
非セマンティック要素の例:<div>と<span>- その内容については何も伝えません。
セマンティック要素の例:<form>、<table>、と<article>- その内容を明確に定義します。
見出しは重要です
見出しは、<h1>から<h6>タグで定義されます:
検索エンジンは見出しを使用して、Webページの構造とコンテンツのインデックスを作成します。
ユーザーはあなたのページを見出しでざっと目を通してしまいます。ドキュメントの構造と異なるセクション間の関係を示すために、見出しを使用することが重要です。
スクリーン リーダーは、ナビゲーション ツールとしても見出しを使用します。さまざまな種類の見出しによって、ページのアウトラインが指定されます。 <h1>見出しは主要な見出しに使用し、次に<h2>見出し、次に重要度の低い<h3>というように使用します。
注：HTMLの見出しは見出しとしてのみ使用します。見出しを使用してテキストを大きくしたり太字にしたりしないでください。
代替テキスト
alt属性は、ユーザーが何らかの理由で画像を表示できない場合(接続が遅い、src属性のエラー、またはユーザーがスクリーンリーダーを使用している場合)に、画像の代替テキストを提供します。
alt属性の値は画像を説明する必要があります。
ブラウザが画像を見つけられない場合、 alt属性の値が表示されます。
言語を宣言する
Webページの言語を宣言するために、常に<html>タグ内にlang属性を含める必要があります。これは、検索エンジンとブラウザを支援するためのものです。
次の例では、言語として英語を指定しています。
明確な言葉を使う
理解しやすい明確な言葉を常に使用してください。また、スクリーンリーダーではっきりと読み取れない文字は避けてください。例えば：
- 文はできるだけ短くする
- ダッシュは避けてください。1-3と書くのではなく、1～3と書く
- 略語は避けてください。FebではなくFebruaryと書く
- 俗語を避ける
適切なリンクテキストを作成する
リンクテキストでは、読者がそのリンクをクリックして得られる情報を明確に説明する必要があります。
良いリンクと悪いリンクの例:
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。