ななにーーーー！今まで書いていたHTMLは？ - いつだって優先順位の問題

去年買ってずっと積ん読していたこの本、最近になって読み始めました。

いま読破率７割くらいですかね。

一言で感想を言うと

「一日でも早くこの本を読んでいればよかった」

といったところです。

f:id:saikou9901:20180430190347p:plain

業務システムもWebベースになって久しいですが、ほとんどシステム要件だったりCSSの対応に命を燃やして、HTMLについて若干おろそかになっていたように思います。

昔からとりあえず画面ブロック程度の観点でdivを大量生産し、HTML５になってから登場したmenu、articleなどの新しいタグも、大量生産的なシステム現場では開発者が適切に設定できる可能性もないと思ったため、こちらも意識的に使用せずひたすらdivってきていました。

主題になっている「インクルーシブ」については、前書きから引用すると、

exclusive（排他的、閉鎖的）の反対語と考えていただくとわかりやすいかもしれません。つまり、あらゆるものを排除せずに受け入れるといった意味になります。

...

アクセシビリティに配慮したWebの実装方法を紹介する内容になっています。

このあたりの内容を見ると、コンシューマ向けフロントエンドだけでなく、ITリテラシーの幅の広さで言えば業務システムフロントエンドだって例外ではないことがわかっていただけると思います。

内容に着目しても、業務システムにも必要な要素が盛りだくさんです。初めて知ったものや、これまで形だけ知っていて理由を考えたことがなかったものなど、様々です。

内容の中で、業務Webシステムでもぜひ考えてほしいものを、２つほど、ちょっと記載します（つまり詳細は買ってください！）。

フォントや余白サイズの指定

この本では、フォントサイズや、上下余白（line-heightとか）は基本的にemで指定することが推奨されています。

これはブラウザのズーム機能や、最近のPCにおける高DPI対応（Windows10とかの画面サイズで125%〜とか選択できるアレ）に対応するためです。

あと、この本で初めて知ったんですが、em（エム）って、文字mの横幅と一致する大きさなんですってよ、奥さん。

フォントでemを推奨する観点からも分かる通り、その他画面サイズやCSSの挙動も、ブラウザの機能を有効に挙動させることが、インクルーシブなWebに必要な考え方のひとつになるようです。

スタイルをフォールバックさせる、という考え方

これは一言でいうと「CSSの定義が動作しなくても、ブラウザが本来もっているHTMLの表示デザインによって、そのページの内容・機能にアクセスすることができる」ようにすることです。

業務Webシステムで辛いのは、IE11をはじめとする、古いブラウザに対応させることですね。特にCSSまわりはみなさん辛い思いをしていると思います。そこで、この考え方がきっと役に立つんじゃないかと思います。

スゴーく簡単な例で書きます。

例えば、メニューのリンクがあるとします。

CSSのデザインって、正直なんでもできますよね。なので、CSSで全部やってしまえば、極端にこんなHTML構造でも、ヘッダー・メニュー構成ができてしまえるわけです。

<p class="menu">
  <span><button click="goHome()" label="ホーム"></span>
  <span><button click="goApp1()" label="申請処理"></span>
  <span><button click="goApp2()" label="承認処理"></span>
</p>
<label class="title">
  <span>業務画面タイトル</span>
</label>

ここでブラウザの対応していないCSSを記述していた場合（業務Webシステムとして、100歩譲ってjavascriptは動作するとしましょう）見るも無惨なことになってしまいます。

f:id:saikou9901:20180430201102p:plain

しかし、ここでHTML構造まで正確に作っておけば、CSSが動作しなくても、最低限内容を読んだり、コンテンツにアクセスすることができます。

<h1 class="title">業務画面タイトル</h1>
<ul class="menu">
  <li><a href="/home">ホーム</a></span>
  <li><a href="/app1">申請処理</a></span>
  <li><a href="/app2">承認処理</a></span>
</ul>