staff 
こんにちは、チカッパであります(◉∀◉ )ゞ
前回はWebアクセシビリティっていったいなんだろう？というタイトルで、アクセシビリティの概要についてお話しし、ヒューマンリーダブル（人が理解できること）とマシンリーダブル（機械が理解できること）の2つの対象があることをお伝えしました。
今回はマシンリーダブルにするための対応のひとつを取り上げセマンティックなマークアップについて考えてみたいと思います。
マシンリーダブルとは？
マシンリーダブルとはその名称の通り「機械」に対する配慮、専門的に言うと「機械可読性」を上げることを指します。
また、マシンリーダブルのマシンとは「ユーザーエージェント」のことを指します。
ユーザーエージェントとは、Webサイトへのアクセスの際に使用されるプログラムのことである。 HTMLを解釈して画像化し、Webサイトとしてディスプレイに映し出すためのレンダリングを行い、ディスプレイに画像・文字などを表示するためのWebブラウザや、検索用データベースを作成するためにWebサイトを巡回するクローラ、利用しているOSなども、ユーザーエージェントに含まれる。携帯電話向けサイトを閲覧する場合にも、この用語が使われる。
引用：ユーザーエージェントとは – IT用語辞典 Weblio辞書
うーん…ちょっとわかりづらいですね。
ではここでユーザーエージェントの一部を具体的にリストアップしてみます。
ハード
PC、スマートフォン、タブレットなどの端末の事を指します。
ソフト
ブラウザ、アプリ、RSSリーダー、などを指します。
また視覚障がい者が使用するスクリーンリーダー（音声読み上げソフト）や検索エンジンのクローラーもソフトに該当します。
このように具体的に対象がわかると「なるほど！」と思いますね。
これらのユーザーエージェントにWebコンテンツを正しく認識してもらうために工夫することが「マシンリーダビリティ」を上げること…というわけですが…
そのためには、どのような点に注意すればいいのでしょうか…？
簡単なHTMLを例として
私たちは普段HTMLを使用してWebサイトを作成していますよね。
作成時には見出しである<h1>や、段落である<p>などの要素を意識して使用すると思います。
ではひとつ、とても簡単なHTMLを書いてみましょう。
<article>
<h1>うちの猫がかわいい</h1>
<img src="nekokawaii-01.jpg" alt="トイレットペーパーにいたずらをして申し訳なさそうにしているうちの猫" class="c-im--left">
<h2>玄関開けたら大惨事</h2>
<p>今日は一日中家を空けていたので、ご機嫌を損ねていたずらされてしまいました。買って来たばかりのトイレットペーパーなのに悲しい。</p>
<h3>うちの猫が今日食べたもの</h3>
<ul>
<li>ささみジャーキー</li>
<li>猫缶</li>
<li>カリカリ</li>
</ul>
</article>
Webブラウザ上では以下のように表示されました。
でも、CSSを駆使すればどのようにマークアップしても上記と同じ見た目を表現できます。
例えば以下のようなHTMLでも、上の画像と同じように表示することができます。CSS便利ですね！
<div class="article">
<p class="c-txt-lg">うちの猫がかわいい</p>
<img src="nekokawaii-01.jpg" class="c-im--left">
<p class="c-txt-md">玄関開けたら大惨事</p>
<p>今日は一日中家を空けていたので、ご機嫌を損ねていたずらされてしまいました。買って来たばかりのトイレットペーパーなのに悲しい。</p>
<p class="c-txt-bold">うちの猫が今日食べたもの</p>
<div class="c-list-matk">ささみジャーキー</div>
<div class="c-list-matk">猫缶</div>
<div class="c-list-matk">カリカリ</div>
</div>
しかし…後者のようなHTMLでも本当に問題無いのでしょうか…？答えはNoです。
閲覧する側が見て理解できるなら、後者のマークアップでも問題ないじゃない… と思う方も多いと思います。確かに人が視覚的に閲覧するだけなら問題はないのかもしれません…
では視覚的な閲覧以外の使い方をするユーザーエージェントにはどのような影響があるのでしょうか？
スクリーンリーダーでの読み上げ
今回のテーマであるアクセシビリティの中では、視覚障がい者の方への配慮が含まれます。
視覚障がい者の方は、スクリーンリーダーなどを使用してWebサイトの情報を耳で聴いて内容を把握するのですが、総務省の配信する動画がとても参考になりますのでぜひご覧いただきたいと思います。
参考の動画：視覚障害者（全盲）のウェブページ利用方法
いかがでしょう…とても興味深いです…
4分5秒からは実際のマークアップの注意点について教えてくれていますので要チェックです。
実際に自分もVoice Overを使用してみた
実際にiPhone6s（iOS 10）のVoiceOverを使用して確認してみました。
<!-- VoiceOverで読み上げたHTMLの例 -->
<img src="nekokawaii-01.jpg" alt="可愛い猫">
<button type="button">お申し込みはこちら</button>
<h1>セマンティックなマークアップをするメリット（WebアクセシビリティPart2）</h1>
各要素については以下のように読み上げられる結果となりました。
- 画像「可愛い猫 イメージ」
- ボタン「お申し込みはこちら ボタン」
- h1「見出しレベル1 セマンティックなマークアップをするメリットかっこウェブアクセシビリティパートツーかっことじる」
ソフトよって読み上げ方が異なるため、「画像 かわいい猫」と先に要素を案内するケースもあるそうですが、共通点は、スクリーンリーダーが要素を認識して、音声で案内しているという事。
スクリーンリーダー使用者は要素の音声情報も頼りにしてコンテンツを把握するのです。
「見た目さえ整えておけばいいんじゃない？」と適当なマークアップを行うと、スクリーンリーダーをはじめとするマシン側は、正確なコンテンツ内容を理解してくれません。
マシンリーダブルなマークアップを考えてみる
ここでもう一度セマンティックとは何かを復習をしてみようと思います。
セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。
引用：セマンティックとは – IT用語辞典 Weblio辞書
ポイントはマシンが情報の持つ意味を正確に解釈できるように…というところですね。
そのためには、要素の役割を明確にするマークアップを心がけることがとても大切だということが理解できたと思います。
それではマシンリーダブルにするためにはどのようにマークアップすればいいのか、具体的な対策を考えてみたいと思います。様々な注意点がありますが、いくつか例を挙げてみました。
正しいアウトラインを心掛ける
HTML5では様々なアウトラインを用意してくれています。 例えばheader footer section articleなど。適切なセクショニングを行うことで、コンテンツを文章構造化し内容を明確に伝えることができます。
用途に合わせて正しい要素を使う
ここで言う要素とはHTMLの見出しh1,h2,h3...、段落p、リストul,ol,dl、表table引用文blockquote、強調の箇所emなどを指します。
例えばリストはul,ol,dlなどの種類があります。
CSSで装飾することが多いため、ないがしろにされがちな要素ですが、用途に合わせたリストを使用することでより明確に情報を伝えることが出来ます。
同様に表にも配慮が必要です。
スクリーンリーダーは簡単な表なら読み上げ可能ですが、複雑な表は読み上げることが困難であるとされています。シンプルな表を心掛け、行や列に見出しをつけ、時にはキャプションを併用し、掲載内容を明確にしましょう。
見出し
先ほどの動画によるとスクリーンリーダー使用者は見出しの内容を確認し、必要な情報を選定して読み上げていることがわかりました。適切な見出しをつけることはスクリーンリーダー使用者にとっての道しるべとなるようです。
リンクのアンカーテキストに配慮する
よくあるのは「こちら」というテキストに対してリンクを貼ってしまう行為です。 遷移先のページの内容がわかるような親切なアンカーテキストを心掛けましょう。
altを正しく入れること
マシンは画像の内容を認識しません。altを挿入することで、マシン側にどのような画像が入っているか知らせることができます。
また、altが入っていればOK！というわけではなく「寝そべったスコティッシュフォールド」といったように、具体的に想像できる内容が入っていると親切ですね。
その他知っておくべきこと
CSSの影響範囲を知っておく
デザイン的な表現のため、CSSを用いてdivなどの順番を入れ替える手法があります。目で見れば理解できるけど、実際のHTMLを上から読み上げるとストーリー通りになっていないため内容が把握しづらい…ということの無いように注意しましょう。
また、画像などでテキストを代替して表現し、CSSではテキストをdisplay:noneで表示させないケースがあると思いますが、実は多くのスクリーンリーダーではdisplay:noneの部分を読み上げないそうです。
上記のようにCSSが影響をあたえる範囲を理解しておく必要があります。
WAI-ARIAを使用する
HTMLに加えて使用することでアクセシビリティを確保することが可能になるのがWAI-ARIA。「Web Accessibility Initiative Accessible Rich Internet Applications」の頭文字をとった呼称です。
WebサイトにはJSやCSSを使用した動的なコンテンツがありますが、それらに対しroleやaria、tabindexの属性をHTMLに付加して要素の役割を伝えるといったものです。
例えば、タブなどは閲覧者にとって最適なUIである場合が多いですが、実際のHTMLではdivとCSS、JSなどを組み合わせて実装することが多いと思います。これだけでは要素がどのような役割を果たしているかマシン側が認識することが出来ません。
そこでHTMLにWAI-ARIAの属性を付け加える事で、「これはタブですよ」と役割を定義し、マシン側に伝えることが可能になります。またJSでの動的な動き（非表示、アクティブなどの動作）も伝えることができます。
参考：WAI-ARIA をマークアップに取り入れたシンプルなタブ
セマンティックはクローラーに好かれる
ユーザーエージェントにはどのようなものがあるのか…という章で、クローラー（Googleボットなど）がマシンリーダブルの対象に含まれていることに気づいた方も多いと思います。
HTMLが文章構造的に整っており、適切なアンカーテキストでリンクが結ばれていると、GoogleボットがWebコンテンツの内容を解釈しやすくなり、クローラービリティに繋がります。
アクセシビリティを確保する事はSEO的にもメリットがあるわけですね。
最後に
どんなWebサイトもdivとCSSを駆使すればなんとなく形になってしまうのは事実です。
でもコンテンツの内容をより明確に伝えるためにも正しいマークアップを行うことが重要であり、同時に様々なメリットがあることがわかりました。
人間の知覚で認識できない部分にもきちんと配慮した、人にもマシンにも優しい制作を心掛けていきたいな…と改めて思います。
アクセシビリティはまだまだ知るべきことが多く、今後も積極的に学んでいきたい課題です。
今週は以上です！チカッパでした！
参考
アクセシビリティを学ぶにあたり、様々なサイトと書籍を参考にさせていただきました。
ありがとうございました！