コードの互換性を高めるために、HTMLを次のように記述します。

たとえば、スクリーンリーダーソフトウェアを必要とするユーザーなどです。フロントエンド開発者として、どうしてそんなことに耐えられるでしょうか?よりアクセスしやすいページを作成する方法を共有するために、このような記事を書きたいとずっと思っていました。今日の計画の 1 つは、HTML タグと WCAG 標準を組み合わせることです。誰かの生活を楽にするために、HTML をこのように記述することをお勧めします。

本日ご紹介したいのは、HTML タグを使用して WCAG 標準とセマンティックウェブの目標をコードに具体化する方法をご紹介します。

1. 文書宣言: <!Doctype>

実際、これは WCAG とは何の関係もありませんが、より互換性のあるページ、特に下位互換性のあるページの場合は、次のように記述することをお勧めします。

 <!Doctype html>

2. リンク: <a>

インターネット接続は、ページの最も一般的なタグである <a> によってほぼ実現されていると言えます。どう対処したらいいでしょうか？

キーリンクのアクセスキーを追加する
絶対に必要な場合を除き、フォーカス中に点線のボックスを削除しないでください。

 <a href="" title="" accesskey="M" rel=""フォーカスを非表示>リンク</a>

3. 略語: <abbr>

HTML タグを正しく使用することも非常に重要です。これは、スクリーンリーダーのユーザーがページ構造を理解するのに役立つためです。特に、H1、H2、H3 などのタグを使用する場合、誤用すると構造がわかりにくくなる可能性があります。もちろん、一般的なタグを使用し、CSS を使用して視覚的なコントラストを作成することも、一般の人々が認識できるものです。しかし、スクリーンリーダーのユーザーはどうでしょうか?もちろん、ここでページタグの使用に注意する必要があることを述べましたが、abbr に関して最も重要なことは、略語を説明するために title 属性を追加する必要があることです。例えば：

 <abbr title="Web 開発者" >WD</abbr>

4. ブロック引用: <blockquote>、一般引用: <cite>

引用が長い場合は <blockquote> を使用し、インライン引用には <cite> を使用して、構造を読みやすくします。

 <引用>
    よりアクセスしやすいページを作成する方法を共有するために、このような記事を書きたいとずっと思っていました。今日の計画の 1 つは、HTML タグと WCAG 標準を組み合わせることです。誰かの生活を楽にするために、HTML をこのように記述することをお勧めします。
</blockquote>
<p>私が最も感銘を受けた文章は、<cite>「フロントエンド開発者になるには愛が必要です。あらゆる場面であらゆる種類の人々を攻撃するような怒鳴り声のようなスタイルを使わないこと。」</cite>です。 </p>

5. 削除: <del>

紙に書くことは、元に戻すキーを使用できるコンピューターでの書き込みとは異なりますが、何かが削除されたことを強調したい場合はどうすればよいでしょうか。それは <del> タグを使用することです。例えば：

 <del>HTML で強調するには、&lt;b&gt; タグを使用します。</del>
HTML で強調するには、&lt;strong&gt; タグを使用します。

効果は次のようになります:

~~HTML で強調するには、<b> タグを使用します。~~
HTML で強調するには、<strong> タグを使用します。

6. 定義リスト: <dl>

昨年、Alipay のフロントエンドブログで新しいメンバーを指導していたとき、最も印象に残ったのは、彼らが <dl> を気に入って使用していたことです。当時、私はこれらの学生たちはかなり優秀で、意味論をよく理解していると思いました。定義リストはまだほとんど使用されていません。代わりに、通常の <ul> <ol> タグを使用してください。 <dl> も注意して使用する必要があります。コーヒーとミルクを定義している w3school の次の例のように、「定義」の意味を持つエントリでのみ使用することをお勧めします。

 <ダウンロード>
  <dt>コーヒー</dt>
    <dd>- ブラックホットドリンク</dd>
  <dt>ミルク</dt>
    <dd>- 白い冷たい飲み物</dd>
</dl>

7. 順序なし/順序付きリスト <ul>/<ol>

リスト、これはすべてのフロントエンド開発者にとって馴染みのあるものです。非常に柔軟に構造を適用できるため、ナビゲーション、リスト、タブなどでよく使用されます。これについてはこれ以上言う必要はありません。ただし、理解しておく必要があるのは、<ul>/<ol> が <table> の代わりであると信じないことです。私たちがよく使用する HTML タグでは、各タグが独自の機能を持ち、他のタグの代わりになるものはありません。

 <オル>
  <li>コーヒー</li>
  <li>お茶</li>
  <li>ミルク</li>
</ol>

8. 表: <table>

表の場合は、リストはもちろん、段落も使用しないでください。絶対に必要な場合を除き、変換可能です。さらに、表には注目すべき点がいくつかあります。

<table> に summary 属性を追加します。一部のテーブルは非常に大きいため、全体を読む必要はありません。
<tbody> を追加します。私の記憶が正しければ、追加しない場合はブラウザが自動的に追加します。
必要に応じて、<col> <colgroup> を使用して表示される列を制御します。

 <table summary="sofish のブログステータス">
    <頭>
        <tr>
            <th>日付</th>
            <th>IP</th>
            <th>PV</th>
        </tr>
    </thead>
    <t本文>
        <tr>
            <td>2011.3.11</td>
            <td>3000</td>
            <td>8000</td>
        </tr>
    </tbody>
</テーブル>

9. スニペットの書式設定 <code>/<pre>

<code> はコンピュータコードテキストを参照し、<pre> はフォーマット済みテキストを参照します。 <pre> は範囲が広く、さまざまなテキスト、特にコードの書式設定に使用できるブロック要素です。使用時に注意すべき特別なことは何もありませんが、一般的な <p> の代わりに <pre> を使用しないなど、意味的に正しく使用することが重要です。

 <code>テキスト配置:center</code>
<前>
{ ( 1 * 10 ² ) + ( 9 * 10 ¹ ) + ( 3 * 10 ⁰ ) }
</pre>

10. 改行: <br>

最近の Web ページでは、<br> が使用されることはほとんどありません。 Web ページ内の空白スペースは通常、CSS のパディングとマージンを使用して実現されます。より正確で制御が容易になります。現在推奨されている使用法は、ページ余白を制御するためではなく、一般的な段落 <p> で単純な改行に使用することです。

 <p>私は段落です。 <br />
詩では改行を使います。
</p>

11. 区切り線: <hr>

<hr> は非常に優れた意味効果を持っています。しかし、彼のビジュアルはコントロールが難しい。以前、さまざまなブラウザにおける <hr /> の問題について記事を書きました。一般的にはあまり使用されません。スクリーンリーダーユーザー専用の別のページが用意されていれば、おそらく <hr> の方が便利でしょう。

 <h3>タイトル 1</h3>
<p>Lorem Ipsum とは...</p>
<時間 />
<h3>タイトル 2</h3>
<p>これは...のエントリです</p>

12. 非セマンティックタグ: <div>/<span>

実際、2 つのタグ <div>/<span> はセマンティックであり、どちらもドキュメント内のセクションを定義します。はい、実際には HTML5 の <section> と同じです。ただ、検索エンジンのせいで、検索エンジンはそれを非セマンティックなタグだと判断するので、「非セマンティック」なタグになってしまうのです。推奨される使用方法は、段落の代わりとしてではなく、レイアウトなどのページフレームとして他のコンテナーを使用して、追加の視覚効果を追加することです。

 <div id="コンテナ">
    <div id="コンテンツ">
    </div>
    <div id="サイドバー">
        <ul>
            <li><span>神様</span>、ああ、なんてことだ</span></li>
        </ul>
    </div>
</div>

13. 段落/見出し: <p>、<h1>/<h2>/<h3>…

これらのタグは、ページタグ階層の中で最も重要なタグであると言えます。これらのタグを説明するために本の構造を使用できます。ページを作成するときは、次の考え方も念頭に置く必要があります。

書籍名: H1
本の章タイトル: H2
セクション内の記事タイトル: H3
章の段落: P
サブタイトル/字幕: H4/H5/H6

はい、もちろん、引用 <blockquote>、技術書で提供されているコード <pre class="code">、注意すべき点のリスト <ul>、便利な比較のための表 <table> などもあります。

 <h1>ロゴ</h1>
<h2>タイトル</h2>
<div class="entry">
    <h3>要約:</h3>
    <p>lorem ipsum は ...<em>強調</em> です</p>
</div>

14. 強調: <em>/<strong>

「emphasize」の略語。そして、<strong> は強い強調です。フロントエンド開発を始めたばかりの学生の多くは、<em>、<strong>、<cite>、<i>、<b> などのタグの使い方がよくわからないかもしれません。 <i> と <b> は基本的に廃止されており、現在の <em> と <strong> に相当します。一般的に、コンテンツの重要度の順序は次のとおりです: strong > em ≈ cite。

 <strong>注意:</strong> <cite>FONT、CENTER</cite> などの古いタグ、特に <em>FONT</em> は使用しないでください。

15. フォーム項目: <input>/<textarea>/<select>

フォーム項目は HTML では比較的複雑なタグであり、注意すべき点が多数あります。

各フォーム項目を説明するには、<label> を追加する必要があります。ラベルを使用できない場合は、フォーム項目に title 属性を追加します。
フォームフィールドが必須の場合は、「 * 」記号を使用してマークします。
Flash は通常、フォーム項目の <label> を生成しません。自動ラベルオプションをチェックしてください。

 <フォームメソッド="post" アクション="http://sofish.de">
    <fieldset><legend>マイフォーム</legend>
      <label for="firstname">* 名:</label> <input type="text" id="firstname" />
      <label for="speech">何か言ってください:</label>
      <textarea id="スピーチ" />
      </textare>
      <input type="submit" value="submit" title="送信ボタン" />
    </フィールドセット>
</フォーム>

16. 画像: <img>

目の見えない人は絵を見ることができません。代替テキストを示すために alt を指定します。それはどんな絵なのか教えてください。

 <img src="http://sofish.de/favicon.ico" alt="Happy Favorites のファビコン" />

17. フレーム: <iframe>

 <iframe src="http://sofish.de" title="ハッピーお気に入り" /></iframe>

18. ストリーミングメディア: <video>/<audio>/<object>/<embed>

メディアの形式もより複雑になり、扱いが難しくなります。通常は次のようにします:

オーディオビジュアルメディアに対応するテキスト（対応するシーンを含む）を提供します。たとえば、スピーチ中の拍手は読者が現在の雰囲気を察知するのに役立ちますが、スピーチテキストに反映させる必要があります。残りも同様です。
交響曲のような具体的な説明ができない場合は、簡単な説明をすることができます
テキストが長すぎて現在のページに収まらない場合は、メディアの後の対応する代替テキストへのリンクを提供できます。
メディアにてんかん発作を引き起こす可能性のあるコンテンツが含まれている場合は、その旨を明記する必要があります。

 <audio src="mozart.mp4">モーツァルト 交響曲第39番</audio>

19. ページタイトル: <title>

Web ページには必ずタイトルを含め、各タグは明確に区別できるものにしてください。たとえば、これは Alipay に反映されています。

アリペイウェブページタイトル

 <title>お問い合わせ - ハッピーなお気に入り</title>

20. 結論

よし。とりあえずここでやめておきます。 WCAG は、これらの単純な HTML タグの使用だけではありません。セマンティック Web ページは、1 つまたは 2 つの記事だけで記述できるものではありません。ゆっくりしてください。最も一般的なものから始めて、良い習慣を身につけましょう。記事の前の文章に戻りますが、ページをこんなに使いにくくすることに耐えられるでしょうか?

<<: ユーザーはその理由を知る必要がある

>>: フレックスとポジションの互換性の詳細な説明マイニングノート