ウェブアクセシビリティって？ 文字の装飾・リスト要素・見出し要素の使用

ウェブアクセシビリティ改善の解説、第3回です。今回はHTMLで使用している様々なタグの使い方の理解も深まる、正しい使い方ができているかについて解説していきます！

なんとなくこんな使い方だな〜と思っていても実はちゃんと使えてなかった！なんてこともあるかと思いますので、間違えやすい文字の装飾について、リスト要素、見出し要素の解説をしていきたいと思います。

文字の装飾を正しく使えているか

文字の装飾でよく使用するのは、太字と下線です。
正しく情報を伝えるためにはそれぞれの要素の使い方を理解することが大切です。

太字

まず、太字を表現する際にはいくつかの方法があります。

• cssでfont-weightを使用して記述する
• b要素
• strong要素

がよく使用される方法かと思います。
アクセシビリティ改善の観点から見たとき、推奨されるのはb要素やstrong要素を使用する方法です。

これは、各ページのデザインを整えるために読み込んでいるcssが正しく読み込まれていなかったときに太字が正しく表示されなくなる可能性をなくすためです。b要素やstrong要素は基本的に太字で表示されるよう担っていますので、cssが正しく読み込まれなかったとしても太字で表示されるのでできるだけ要素を使用して記述していきましょう。

また、b要素とstrong要素には大きな違いがあります。b要素はそこまで重要ではないが、太字で表示したい場合に使用します。装飾としての使用も問題ありません。
strong要素は強く重要であったり緊急性が高いものだと示したいときに使用する要素です。単純にデザインとして太字にしたい場合には使用は避けましょう。重要である要素が分かりにくくなってしまいます。

このように要素の効果を理解することでアクセシビリティの改善になっていきます。

下線

次に下線です。下線も基本的に太字と同じようにu要素があるのでこちらで囲んであげるのが適切です。u要素もstrong要素と同様にきちんと意味を持った要素なので使用方法には要注意です。

注釈や間違った表現を正す際に使用してあげるのが一般的です。リンクなどに下線を入れたい場合はcssで入れてあげるのがよいでしょう。
文章で強調したい箇所がある場合は下線ではなく、太字にしてあげた方がより正しく情報を伝えるのに適しているので下線で強調を表している場合は太字に変更してあげた方が良いかもしれません。

リスト要素を正しく使用できているか

リスト要素はol要素とul要素の2種類ありますが、どのように使用するのが正しいかご存じですか？
簡単に説明すると、リストの中で順番に意味がある場合はol要素、順番に意味がない場合はul要素を使用するのが正しい方法です。

例えば、歴代の総理大臣を順番に表示させたいときや事業内容を扱っている割合順で表示させたいときなどはolリストを使用すると上から並べた順番に意味のあるリストであることを示すことができます。パンくずリストなども順番に意味のあるものなのでolリストで作るのが適切です。

リスト形式で表示させたいけれど順番は不同である場合にはulリストを使用して表示させるのが正しい使い方になります。

また、ol要素とul要素どちらにも当てはまる注意点として要素の中に入れていいのはli要素のみということです。これは言葉で説明するよりもコードを見た方が分かりやすいかもしれません。

間違った書き方

<ul>
    <li>1つめの中身</li>
    <figure><img src=”画像のパス” alt=””><figcaption>画像の説明</figcaption></figure>
    <p>注釈</p>
    <li>2つめの中身</li>
</ul>

正しい書き方

<ul>
    <li>1つめの中身</li>
    <li><figure><img src=”画像のパス” alt=””><figcaption>画像の説明</figcaption></figure></li>
    <li><p>注釈</p></li>
    <li>2つめの中身</li>
</ul>

このようにどんな要素を入れるときにもまずはli要素を記述した中に新しい要素を入れてあげるのが正しいリスト要素の使い方です。意味のあるol要素を使用する場合は、１つめの要素に画像要素がかかるのであれば同じli要素の中に入れてあげるのもよいでしょう。

見出し要素を正しく使用できているか

見出し要素は基本的に一番上にあるのがh1要素になります。その下にh2要素、h3要素を入れていくのが正しい使い方です。

見出し要素を正しく使用することでSEO対策にもなります。正しく使用することで検索エンジンに正しい情報がいき、利用している人から見てどんな内容なのか分かりやすく表示することができます。
まず、h1はそのページの全体のテーマや内容を集約させてあげましょう。

基本的にh1は各ページ1つにすることをおすすめします。ページの中で各情報の見出しをつけたいときにはh2からh6を使い分けて表示してあげましょう。

h2はh1よりも、より細かいコンテンツごとの見出しとして使用することで、ページの中にどのような情報があるのかが分かりやすくなります。
h2の中でより細かく見出しを分けたいときには可能であればh3から入れてあげることでより細かな情報を分かりやすく表示、伝達することができます。

最後に

アクセシビリティの改善を進めていくことで、SEO対策や正しい要素の使用方法を理解することができるので、合わせて進めていくことでより多くの人に見てもらえるウェブサイトになっていくのではないかと思います。

もっと細かくアクセシビリティの改善を進めていきたい場合は、チェックリストを下記サイトよりダウンロードできるので、参考にしてみてください。

ウェブアクセスビリティ基盤委員会｜「達成基準チェックリスト」の具体的な達成方法と実現方法の文書