8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ゼロから始めるWeb Accessibility入門:セマンティックHTML

Last updated at Posted at 2016-08-18

前回まで

ゼロから始めるWeb Accessibility入門:概要
ゼロから始めるWeb Accessibility入門:誤解

アクセシブルなHTMLを構築するために、セマンティクスが重要です。
その要素は、何を意味しているのかを明確にマークアップしていくことが大事です。

  • タイトル
  • パラグラフ
  • リスト
  • 画像

これらの要素を正しい意味を伝えるのがアクセシビリティ対応の基本です。

HTMLリストのダメな記述

<div class="list-item">1つ目のリスト項目</div>
<div class="list-item">2つ目のリスト項目</div>
<div class="list-item">3つ目のリスト項目</div>

HTMLリストの正しい記述

<ul>
  <li>1つ目のリスト項目</li>
  <li>2つ目のリスト項目</li>
  <li>3つ目のリスト項目</li>
</ul>

セマンティックHTMLでマークアップする最も重要なメリットは、スクリーンリーダー(音声読み上げソフトウェア)がこれらのパターンを認識でき、ユーザに音声で伝えられることです。
視覚的にも聴覚的にも同じ情報を提供し、見るユーザと聞くユーザが確実に同じコンテンツを同じように経験できるようになります。

セマンティック属性は従来のセマンティックHTMLを置き換えるものではなく、HTMLのセマンティクスをより強化するものです。

次回

ゼロから始めるWeb Accessibility入門:ボタン

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?