Semantic markup with icon font

SemanticなIcon fontコーディング

ERIKA KITADA

Icon font * Mark up

Erika Kitada Lei Hau’oli co.ltd.,

↓弊社のエヴァンジェリストが執筆

markupにこだわっている会社です。

About icon font

アイコンのベクターデータをフォントにしたもの

メリット

高解像度ディスプレイ対応。

画像が劣化しないためメンテナンスしやすい。

デメリット

モダンブラウザにしか対応していない

（IE7, リガチャはAndroid2.xでできない）

アイコンとフォントの情報がマッチしない

モバイル時代でさらに強まったアイコンの役割

Icon on the PC

テキストを修飾するデザイン的な要素が強かった

Icon on the smart device

狭い画面で直観的な操作を促すUIの役目を果たしている

モバイル時代でさらに強まったアイコンの役割

How to mark up? とある技術のマークアップ例その１

フォントの直書き

デザイン上はHTML5でも、ブラウザやクローラーは「う」と認識

<a href=“html5.html”>う</a>

a {

font-family: 'jsdoitSymbols';

}

How to mark up? とある技術のマークアップ例その2

文章を書いたうえで、修飾としてアイコンを配置

ユーザー、ブラウザー、クローラーにやさしい

HTML5 Elements

<a href=“” class=“icon_html5”>HTML5 Elements</a>

. icon_html5:before { content: “ う";

}


Spanの空タグ

セマンティック上、意味のない空タグは使いたくない

Desktop

Desktop

.icon-desktop:before {

content: " ¥f108 ";

}

空タグ(- -;) Semantic - 不要なタグ

Accessibility - 音声読み上げツールが読めない

- テキストブラウザーも読めない

Browserbility - 無駄なDOM構築＞レンダリングコスト増

SEO - クローラーも読めない


iタグに入れるって。。。？

Desktop

Desktop



}

Why element (- -;) ?

HTML5では声や心の中で思ったことなど、他と区別したいテキストを表す

と変更された

http://www.w3.org/wiki/HTML/Elements/i

どうせなら、は、こんなふうに使いたいところ

I love HTML5.



How to mark up?

やなどの空タグを書く意味はない

空タグ使わないで親タグのbeforeでいいと思うよ。

Desktop

Desktop



}

How is Accessibility ?

iphoneの音声読み上げツールで読んでみた。

http://fontawesome.io/




How is Accessibility ?


音声読み上げツールで

“toggle navigation”

Font Awesome ほんとAwesomeだよ !!


How to mark up? UIとしてのアイコンのマークアップ

アクセシビリティにも対応させるため、テキストを書き、それを囲む要素でテキストを非表示にする。

<a class="icon-menu">Toggle Navigation</a>

.icon-menu:before {

content:"¥f0c9 ";

}

span {

position:absolute;

clip:rect(0, 0, 0, 0);

}

Ligature Symbols

複数文字を一つの文字（合字）として、アイコンを作る。

セマンティック的な問題が解決される。

Cf. http://www.slideshare.net/kudakurage/ligature-symbols

<a href="">mail</a>

まとめ

修飾としてのIcon （Icon + テキスト）マークアップ

テキストがあるから読めるでしょとはいえ

デザインのための無駄な空タグはいらない

UIとしてのIcon（テキストなしユーザー操作用）

ソースにテキストを書いてアクセシビリティに考慮しよう

Technology

Semantic markup with icon font