新刊ピックアップ

アクセシビリティを考慮してHTMLを書く意義

この記事を読むのに必要な時間:およそ 1 分

Webページを制作するうえで根幹となるのがHTMLです。最近はHTMLやCSSを1冊で手軽に学べる書籍が定番となり,HTML=情報・CSS=装飾といったイメージが持たれていると感じます。特に,CSSを使うとページが一気に華やかになることから,初学者の方ほどHTMLはそこそこに,早くCSSを学びたいという思いがあるのではないでしょうか。1冊で見栄えのよいWebページが完成する書籍には,そうした望みを叶える魅力があります。

しかしながら,一般的な厚さの書籍1冊で,HTMLやCSSそれぞれの真髄まで省略せずに解説することはほぼ不可能です。そのため,現状の書籍で学習するとなると,それぞれの言語の存在意義を深く理解できないまま,⁠見出しにするときはh要素」といったふうに,目的と要素のみを紐づけ暗記するといった学習方法にならざるを得ないのです。

HTMLにおいて,要素や属性などのパターンを丸暗記する勉強方法には落とし穴があります。見出しのレベルや強調などの文書構造をつかさどる要素を配置すると,マークアップした文書部分に視覚的な変化が起こりますが,1つひとつの要素の意図や重要性をよく理解していなければ,要素を配置する基準を視覚に置くようになってしまうでしょう。それによって視覚先行でHTMLを書くようになり,文字を大きくするために見出しのレベルが不適切になったり,太字にするためだけに強調したりと,ブラウザに正しく情報が伝わらないコーディングをしてしまいがちです。また,CSSを使えば視覚的な変化を出すことが簡単にできるため,⁠HTMLはただ画面に文字を表示して,CSSを当てるためのもの」という認識になってしまう人が多いのも現状です。そうなると,もはやHTMLの学習の意義を見出せなくなってしまうでしょう。

たとえ,文書構造にふさわしくない要素でマークアップを行ったとしても,HTMLで記述した情報の表示自体には影響が出ないことがほとんどです。すべて‹p›でマークアップすることも理論上は可能です。では,なぜHTMLをしっかりと書くことが重要なのでしょうか?

その理由の1つは,HTMLがWebの特性であるアクセシビリティを左右するからです。たとえば視覚や聴覚に障がいのある方が点字やスクリーンリーダーを用いてページを読み込む場合,頼りになるはずのHTMLの文書構造が乱れていたら,正しく情報が伝わりません。これは,誰もが不自由なくWebページにアクセスでき,情報を得ることができるアクセシビリティを損ねていることになります。文書構造の破綻したHTMLは,どんなにCSSで装飾したとしても,ユーザによい体験を与えません。Webページの情報の伝わりやすさは,HTMLが完成した段階ですでに決まっていると言っても過言ではありません。

武器になるHTMLは424ページのボリュームでHTMLのみ解説しています。CSSに関しては,その存在を解説するにとどめ,ひたすら適切なマークアップとその根拠を深める1冊です。⁠なぜこの要素なのか」⁠なぜここでマークアップするのか」という根拠を知り,独力で書き始められる応用力をつけることを目標としています。初学者の方には本書を1冊目として学んでいただくことにより,自らの力で最適なコーディングを導き出し,通用するHTMLに仕上げることができるようになるのではないかと思います。また,HTMLはひととおり書けるという中級者の方にも,学び直しや,コーディングに迷ったときのお守りとして辞書的に活用していただける内容となっています。ぜひ本書を活用して,誰もが使いやすい,やさしいWeb構築への一歩を踏み出してください。