Webアクセシビリティ構造2:見出しは「h1,h2,h3」リストは「ol,ul,li」で記述、マシーンリーダブル!

2019年12月12日

見出しリストは見た目だけでなく、文書構造に応じて「h1〜h6」の見出しタグや「ul,ol,li,」のリストのタグによってマークアップ(HTMLで記述すること)する必要があります。人は見た目で大きく見えたり太字になっていれば「見出し」と認識できますし、箇条書きになっていればリストであると受け取ります。しかしマシーン(視覚障害者用のスクリーンリーダーや検索エンジンのプログラムであるクローラーなど)は、決められたタグを使用していないと判別できません。きちんとタグを使用することによって様々な支援機能が使えたり、SEO的に評価されたりします。

2.見出しやリストなどの文書構造をマークアップする
(アクセシビリティを確保するための基本項目)

1.3.1 情報及び関係性の達成基準(レベル A)
何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

見出し設定

見出し設定には「h1〜h6(通常ブログ内で使うのはh3かh4くらいまで)」のタグが使われます。例をあげながらその正しい使用方法を紹介します。

マシーンが「見出し」と認識することで
・スクリーンリーダーでは見出しジャンプができる
・アウトライン(目次)を作ることができる
・検索エンジンのキーワードとして検出できる
など、ユーザーにとっても作り手にとっても利点がたくさんあります。

見出しは見出しタグ「h1〜h6」を使う

見た目にいくら大きな字や太字を使っても、見出しタグを使用していなければ見出し機能が働きません。
画像、見出しタグの記入例

 

見出しのレベルは飛ばさず順番に使う

見出しは「h2→h3→h4」と順番に飛ばさずに使います。
画像、見出しレベルは飛ばさない

 

見出しの設定方法

WordPressでの見出しの設定方法を 新エディター「Gutenberg」と旧エディターに分けて紹介します。エディター機能にある見出し設定を使うことで確実に「h2〜h4」 の見出しタグの設定ができます。
*「h1」タグは記事タイトルに使用されているので文章中には使用しません
*通常使用するのはh2、h3、h4くらいまでです

 

エディターGutenbergでの設定方法

ブロックの追加ボタンをクリックします。

キャプチャー、ブロック追加

ブロックの種類で[見出し]を選択します。
キャプチャー、見出し

 

見出しの種類を選んでクリックします、見出しの内容を入力します。

キャプチャー、見出し

 

 

旧エディター(クラッシックエディター)での設定方法

あらかじめ見出しに設定する文字を入力しておきます、入力した文字を選択します。

キャプチャー、見出し2

[段落]欄の▲をクリックし、一覧の中から[見出し2]をクリックします。

キャプチャー、見出し2

見出し2が設定されます。
キャプチャー、みだし2

さらに、
「見出し3」に設定したい行を選択して
キャプチャー、見出し3

見出し3を選択
キャプチャー、見出し3を設定

見出し3が設定されます。
キャプチャー、見出し3

 

リスト設定

リストは、「<ol>,<li>」または「<ul>,<li>」のタグを使用します。

マシーンが「リスト」と認識することで
・スクリーンリーダーではリストの項目数などを補足で読み上げてくれる
・スクリーンリーダーでは次のリストへジャンプできる
・大項目、中項目のリストも作成できる
などの機能が利用できます。

 

順番のないリスト

順番のないリストは、順番情報のない「・」や「■」なのが先頭についたリストのことです。この順番のないリストは<ul>,<li>タグを使用します。

画像、順番のないリスト

順番のあるリスト

順番のあるリストは 「1、2、3・・」や「a、b、c・・」というように順番が決まっているリストのことです。この順番のあるリストは<ol>,<li>タグを使用します

 

リストの設定方法

WordPressでのリスト設定の方法です。

エディターGutenbergでの設定方法

①ブロック追加の「+」をクリックします
②リストのマークをクリックします

キャプチャー、リストブロック選択

順番なしリスト作成→「箇条書きリストに変換」をクリック
キャプチャー、順番なしリスト

リスト名を入力して改行すると、次のリスト項目が作成されます。
画像、箇条書きリスト作成

 

順番ありリスト作成→「順序付きリストに変換」をクリック
キャプチャー、順序付きリストを選択

リスト名を入力して改行すると、次のリスト項目が作成されます。
キャプチャー、番号付きリスト

 

旧エディター(クラッシックエディター)での設定方法

順番なしリスト作成→「番号なしリスト」をクリック
キャプチャー、番号なしリスト

先頭の図形を選択します
キャプチャー、番号なしの記号選択

リスト名を入力して改行すると、次のリスト項目が作成されます。
キャプチャー、番号なしリスト作成

順番ありリスト作成→「番号付きリスト」をクリック、番号の種類を選ぶ。

キャプチャー、番号ありリスト

リスト名を入力して改行すると、次のリスト項目が作成されます。
キャプチャー、番号付きリスト入力

どうですか、簡単な操作で設定できます。自分で記号や数字を入れる必要もないので便利です。

 

マシーンリーダブルという表現

この「構造」に関する記事のなかでは、マークアップ(HTMLで記述すること)とマシンリーダブルになるという表現が頻繁に出てきます。「マシンリーダブル=マシンが読みやすい」というのは、文字通り機械にとって理解しやすいということです。
具体的に言うと、SEOの面ではGoogleのクローラー(検索エンジンのプログラム)にとって解りやすい、またアクセシビリティの面ではスクリーンリーダにとって解りやすいという事です。
これら機械が読み取っているのは、人間がブラウザで見ている表現ではなく、HTMLの構文そのものです。色や形、大きさレイアウトなどがない世界です。なので決められた構文(タグ)によって構造を認識してもらう(伝える)必要があるのです。

最後にもう一度、Web(サイト)でのアクセシビリティとはなんなのか?

一般的な認識は「視覚障害者向けの音声読み上げソフトに対応したサイト作成」といったイメージが強いかと思いますが、どちらかと言うとバリアフリーやユニバーサルデザインと同じような考イラスト、車椅子と階段え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できることを指します。

もっと具体的に言うと
・小さい字が見えにくい
・薄い(コントラストの低い)字は見えにくい
・ボタンや、導線のわかりづらいページは操作ができない
・マウスの操作は慣れていない
といったごく普通のシニアの方がかかえる障害があっても、見てわかりやすい&操作がしやすいページを用意することです。

*このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。この機会に取り組みませんか!

イラスト、車椅子とスロープ

↓↓↓↓↓↓↓(メニューバー「Webバリアフリーの勧め」からアクセスできます)
情報のバリアフリー化のための記事一覧