OWIEです。11月23日に山口市のmirai365で開催された「Webアクセシビリティの学校 in 山口」に参加してきたんですが、そこで学んできたことを実践している最中でして。いわゆる「セマンティック」と呼ばれるWebアクセシビリティに関するコトです。
用語解説…セマンティックとは
ことウェブに関するセマンティックという言葉は
配置された要素に明確な意味を持たせること
と、平易に定義します。
ウェブサイトを構成するhtmlは「画像・動画・音声などのデータファイルが埋め込まれた高機能なテキスト」を示す言葉で、htmlを構成する要素一つ一つには「これは画像、これは段落、これは見出し」という風に意味を持ちます。
分かりやすい要素（上記の画像や段落など）は日常的に使っていますが、それ以外の大きな構成要素は使いやすいがためにdivなどで処理しがちです（逆を言うとdivとcssである程度htmlが成り立ってしまいます）。そこで「固有の意味を持つ構成要素には意味のあるマークアップをすること」ということがhtml5以降の時代に必須になってきています。
全体のアウトラインも正しく行う試み
html5からよりセマンティックにマークアップが行えるようになっており、今までフワッとした捉え方でやっていたことを明確に行うようにしました。
まず第一歩として、各要素の持つ役割に沿ったマークアップとrole属性の付与から始めてみました。本来ならばaria-label属性まで行きたいところですが、あれもこれもとやってしまっては逆に正しくない記述をしてしまいそうなので、本当に「キホンのキ」から…ですね。これらはマシンリーダブルへの道筋の一つになります。
マシンリーダブルとは
「デジタル大辞泉」には
データやコンテンツなどがデジタル化されており、機械やコンピューターで直接読み取って利用できる形式であること
とあります。
つまりブラウザを始め、スクリーンリーダー、トラックボール、点字ディスプレイなど支援技術※（健常者／障害者の枠組み関係なく操作の補助を行うために用いられるハード・ソフトウェアのこと）や検索エンジンのクローラーにも意図する内容が正しく伝えられる…ということです。
※ 重ねてになりますが、支援技術というのは障害者専用のものではありません。状況により両手が使えない、音が出せない、そういった状況にもボーダーレスに情報を伝えられる技術になります。
セマンティック化の恩恵
上記の事から、セマンティックなhtmlを構築することにより、誰もがアクセスしやすく、さらには検索エンジンにも優しい（つまりSEO的に効果がある）利便性の高いwebとなり、ワールドワイドウェブが本来持つ普遍性を実現するはずです。
まとめ
と、ここまで書いてきましたが、自分も未だ勉強中で受け売りも多数…冒頭の「Webアクセシビリティの学校 in 山口」のプレゼント企画で幸運にも「インクルーシブHTML＋CSS＆JavaScript」という本を頂けることになりまして、時間を見つけては読みこんでいる最中です。読了後に感想を書かねば。
また株式会社インフォアクシアさんが開催されている「Webアクセシビリティの学校」ですが、コーダーのみならずweb担当者や決定権を持つ方が参加されるとよりよいウェブサイト運営に繋がるのでは！！と強く思いました。ユーモア溢れる内容で楽しくアクセシビリティに触れることが出来るので、機会があれば是非参加してみてくださいね。
ではまた。
