※追記：2016-10-03：末尾に、フォントサイズに関して同視点の Medium の有用な記事をリンクしました。
デザインと開発者の意図・利便性
ウェブサイトの価値が、すべてデザインで決まる訳ではなくとも、その重要性は当然に高い。基本は「良質なコンテンツ」に有るとしても、蔑ろにされたデザインでは、直帰が多く見てはもらえない。
ただ、デザインに注力する余り、（ Own なら別 ）開発者やデザイナーの意図だけが誇示されたり、開発における利便性から、「利用時の想定」が抜け落ちてしまったデザインは頂けない。
この投稿の発端は、そう感じたのが HyperLink だったからだ。
デザインとしての HyperLink
そもそも「機能」として、ウェブの根幹になる「 HyperLink 」は重要だ。HTML 上のハードリンクか否かは別にしても、文書間を繋ぎ、連携する事でサイトを構成する。昨今は、SPA ( Single Page Application ) の台頭が目覚ましいが、それでも HyperLink は有用だ。
デザイナー（ここではウェブをデザインする全ての人）は貪欲で、この HyperLink にも自分のスタイルを誇示したい。いや、周囲のデザインから、変えざるを得ない事も多い。しかし、その時にも、上記「利用時の想定」が無い場合が多く見受けられる。
これを是正するアイディアを提示したいが、「特定のカラースキーム」と云うのは、すべてのデザインに合致させる事は、当然に出来ない。そこで再登場頂くのが、「 Browser Default Stylesheet 」なのだ。
そのまま使うのではなく、価値の再認識を促したい
何も、「あの色遣い」をそのまま使って欲しい、と言うのではない。「何故、あの色遣いになったのか？」「何故、Pseudo-classes が有り、あの色遣いになったのか？」を再考して頂きたいのだ。勿論、これらは HyperLink に関してで、他の UI and/or UX での場合は、また、別途考察が必要かと思う。
HyperLink の状態と認識できるべき事（私見）：
通常時：
HyperLink で有る事が認識出来る。
マウス・オーバー時：
カーソル位置が分かり易く、かつ、HyperLink としてクリック出来ると認識出来る。
アクティブ時：
HyperLink としてクリックされており、アクティブな状態を認識出来る。
訪問後：
HyperLink として、訪問後である事が認識出来る。
＋フォーカス時：（出来れば）
マウス操作ではなくとも、HyperLink であり、フォーカスされている事が認識出来る。
結局、Accessibility は考えられているのか？
アクセシビリティと言うと、何やら、ハンディ・キャッパーの方向けの対応かと思っているかもしれないが、もっと、一般的な広い意味でも当然に存在する。
上記 HyperLink 各項の反意を考慮して頂きたい。
- そもそも HyperLink だと認識出来ない。
- マウスが乗っても変化がなく、HyperLink だと認識出来ない。
- クリックしても変化がなく、HyperLink だと認識出来ない。
- 訪問後の HyperLink に変化がなく、訪問したかが判別出来ない。
- （例えば）Tab で移動しても、フォーカス表示が一切なく、HyperLink も認識出来ない。
「いやいや、普通分かるでしょ？」は、提示する側の勝手な言い分にしか過ぎない。逆に、出来るだけ自分達のプログラム設計やデザインを壊すこと無く、これらを網羅して頂きたい。
出来る事が増えれば、この対応は難しさを増す
例えば、実際にやればわかるが、background-color: black; の時点で、これらを上手く網羅するだけでも簡単ではない。出来ても、そのデザインは、一般的に広く認知されるかは疑問だ。
現在は、私がウェブを始めた 1993 年ごろとは違い、デザイン出来る要素が文字通り「桁違い」に増えた。そこに手を入れるのは本当に難しくも楽しく、際限が無い。
しかし、これらを含めたアクセシビリティを考える余り、デザインを犠牲にするのもまた、あるべき姿ではなく多様性の否定だろう。
最後に…。
私は今５３歳だが、本当に若い才能には日々驚かされる。しかし、当然に「若いながら」故の、経験不足、思慮不足は否めないと思う事が多々有る。勿論、自分もそうだったのだ。
開発は面白い。金を気にせず、これだけに没頭出来るのなら、残りの人生それだけでも良いかも知れない。だが、ちょっと待った。
兎にも角にも、「相手がある事だけは忘れないで欲しい」のです。
その忘れた最たるものが、今の「政治」や「経済」で、その結果として「現在」が有るとは思っていますが、せめて、「自分勝手に作れるから」こそ、利用する相手を考えて欲しい。
リンクを実際に叩きながら、痛切にそう感じた次第です。
専門でも、サンデー・プログラマーでも、あなたの開発人生が楽しく有ります様に…。
追伸： Reset や Normalize は？
私は、「本当に必要？」と以前から思っている方です。やり方も古いですが、実スタイル以前の冒頭は下記程度です。
html,
body {
margin: 0;
padding: 0;
}
/* = 10px */
html {
font-size: 62.5%;
}
/* = 18.6667px */
body {
font-size: 14pt;
}
実際には、上手くはない Less や Sass も使っています。
「え？たったこれだけ？」と思いますよね。勿論、Browser Default が邪魔な時もありますが、或るエレメントに対しては、どうせ一度は「自分のスタイル」を書きますよね？ 書いた後、それが Default 相当なら、後で「自分専用 Default セクション」に移動すれば良いのでは？、と思っています。
これなら、利用していないエレメントは、スタイルシート上に「一度も登場しません」よね？
勿論、他のエレメントに影響を与える場合も有りますから、全てでは有りませんが、基本は、古い人間・やり方ですから「アナログ」ですが、実際、これが「最良」だと思っています。残念ながら、「最強」ではないですが…。
上記だけ必須なのは、「私自身が老眼がきつい」からですが、押し並べて細かい文字が多いより、見やすいだろうとは思っています。これは、現在のスクリーン・サイズが大きいからできる事でも有ります。ただ、上記 1993 年に始めたのは、ウェブだけではなく印刷系もだったので、印刷時に見やすい大きさとして選択していた「 14pt 」を、ウェブにも持って来たのです。
特に、「漢字」で画数の多い細かい文字は、この位の大きさが妥当かと思います。「高齢者」「介護」関連のサイトをお作りの際は、ご参考に。およそご家族も中高年が多く、「老眼」は常に「日常」だと思います。「老眼鏡」が有れば大丈夫？ いやいや、そうでもないんですよ。
聴いてみるか、経験しなければ分かりません。
※追記：2016-10-04：
Medium に一部同視点の記事が出ましたので、ご参考までに。：
Your Body Text Is Too Small - Why website body text should be bigger, and ways to optimize it.