HTMLの記述

リンクのように見えますが、Tabキーではスキップされます

• 「参加」などと表示された装飾付きの長方形は、自動的に機能するリンクにはなりません。実際のURLを持つアンカー要素は、スタイルだけでは提供されないブラウザの挙動を持ちます。
• HTML はコンテンツの構造と意味を定義します。CSSは表示を制御しますが、意味のあるHTMLを選択することは、キーボード操作や支援技術の使用にも役立ちます。

タグとその属性を確認する

• 要素 には通常、開始タグ、コンテンツ、終了タグが含まれます: <p>Meet on Thursday.</p>。 属性 は開始タグに情報を付加します: <a href="join.html">Join</a>。
• img などのHTMLのボイド要素には終了タグや子要素のコンテンツがありません。これらは「自身で閉じる」ものではなく、HTMLにおいて末尾のスラッシュは不要です。ペアとなるタグは重複しないよう nesting してください。

ページ領域を目的別に表示する

• セマンティック要素 には、主要なナビゲーション用として nav 、ページのメインコンテンツとして main が含まれます。セクションを説明するためにヘッディングを使用し、より具体的な要素が当てはまらない場合に一般的なグループリングとして div を使用します。
• a と href の組み合わせはネイティブなナビゲーションを提供しますが、 button はネイティブなアクションを実行します。セマンティックなマークアップは役立ちますが、ラベル、振る舞い、フォーカスについては依然としてテストが必要です。

小さな完全なページを作成する

• この例を index.html として保存し、実際の join.html と同じフォルダに置きます。ブラウザで開き、TabキーとEnterキーを使ってリンクをたどります。
• lang はページの言語を識別し、 title はブラウザのタブ名を指定します。ビューポート設定により、レスポンシブスタイルがデバイスの幅を利用できます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Robotics club</title>
</head>
<body>
  <nav aria-label="Main"><a href="join.html">How to join</a></nav>
  <main>
    <h1>Robotics club</h1>
    <p>Meet Thursday at 4 pm in room 12.</p>
  </main>
</body>
</html>

画像の目的に基づいて代替手段を選ぶ

• 情報提供を目的とする画像には、その重要な意味を伝える代替テキストが必要です。純粋に装飾的な画像には alt="" を使用する通常、支援技術でそれをスキップできるようになります。
• リンクとして使用される画像の場合、情報が他に提供されていないときはリンクの機能を説明します。複雑なチャートについても、重要なデータをテキストで説明する必要があります。

構造と振る舞いを検証する

• ヘッダーの順序、意味のあるリンクラベル、キーボード操作、画像の代替テキストを確認します。HTML Validatorはマークアップエラーを検出できますが、用語が有効かどうかを判断することはできません。
• スタイルを無効にしてでも、ミーティングページが利用可能になるようにする。次に、見出しを外観専用のショートカットに変えずにコンテンツをスタイリングする。

出典: HTML構文 および W3C装飾画像。