レスポンシブウェブデザインとアクセシビリティの勉強会

レスポンシブウェブデザインと
アクセシビリティの勉強会
@カデナデザインヴィレッジ

2014年2月1日
小三ツ星インターフェイス　川満

1

本日のメニュー
1.レスポンシブデザインの復習
1. 定義の確認と基本的な実装、IE対策

2.アクセシビリティの基礎
1. 視覚障害対策（高齢者・運動障害対策も含む）
2. 聴覚障害対策
3. てんかん対策
4. その他

3.レスポンシブ＆アクセシブルデザイン
1.HTML5の利用
2. スキップリンクの実装
3.floatによるコンテンツファーストでの実装
4.display:table;

時間があれば・・・
microdataについて
2

【復習】レスポンシブデザインとは
1.　幅可変（画面・ウィンドウサイズに追従）
2.　画像サイズ可変
3.　レイアウト切り替え（メディアクエリ）
　利点
•

横スクロールを排除する事で、どんなデバイス・ウィンドウ幅でも使いやす
い。

　欠点
•

•

「1ピクセルのズレも許しません！」は、ほぼ不可能。

美しさよりも、「情報をストレスなく届ける」という機能性重視
のデザイン手法。
➢

「誰でも情報にアクセスできる」というウェブアクセシビリティに通じるコンセ
プト。
3

【実装の基礎（1）】ページ幅可変
●

使用するCSSプロパティと値
–

width: %指定
●

–

width: auto,　または指定しない。
●

–

margin指定不要。左右の余白がウィンドウ幅によって変わる。
marginの左右を指定。左右の余白を一定に保てる。

max-width, min-width :　必要に応じて。

↓
pxの計算はブラウザが行うため、ブラウザによって小数点以下
の切り上げ・切り下げなどの処理が変わる。
　→1pxのズレは避けられない。
　→あるいは固定幅を多数用意して段階的に切り替える。
4

【実装の基礎（2）】画像サイズ可変
●

imgのwidthを%指定、あるいは指定しない。

●

height:auto;か、指定しない。

●

ブログサービスなどの場合、htmlコード内にstyleタグで直
接指定している事があるので対処不能に陥る事もある。
–
–

●

WordPress→functions.phpで指定させないようにする。
その他→javascriptを使って書き換える。

background-image: cover; を使うと、勝手に拡大縮小・ト
リミングしてくれる。ブラウザによって見え方が変わるかも
しれない。
–

IE8は対応していません。
5

【実装の基礎（3）】レイアウト切替
メディアクエリ＝@media　で指定する。
CSS
デフォルトの記述
・
・
・
@media (max-width: 639px){
幅639px以下で使うCSS
}
@media (max-width: 480px){
幅480px以下で使うCSS
}
・
・
・
@media print {
印刷時のCSS
}

最初にメディアクエリ無指定のも
のを記述。
　→デフォルトの記述。
@mediaで、ウィンドウ幅、デバイ
スなどに最適化されたCSSを記
述する。
デフォルトのものも継承されてい
るので、場合によってはデフォル
トの指定を解除する指定を書き
込む必要がある。
→モバイルファーストだと楽。
6

【実装の基礎（4）】IE対策
●

IE用のCSSのみ別に記述して、ヘッダーの最後に
専用CSSファイルを指定する。


●

多分これが一番楽。
–
–
–
–

CSSでIEハックしなくていい。
バリデーションエラーの心配がない。
メインのコードが見やすくなる。
IE用もメンテナンスしやすい。
7

【実装の基礎（5）】viewport
●

ページ幅可変でデザインただけでは、文字が全く
読めないレベルまで縮小表示される。
–

●

閲覧者は毎回拡大操作をしなければならず、不便。

htmlのヘッダーに、
<meta name="viewport" content="width=device-width" />

　を指定すれば解決する。
● 文字サイズを14～16pxにして、スマホの高精細画
面でも読みやすくする。（主流は14px。アクセシブ
ルなのは16px。なお、16pxはブラウザの標準サイ
ズ）
8

【実装の応用】に行く前に
アクセシビリティ（高齢・障害者対応）の話。
●

何で？
–
–
–
–
–

別に博愛精神で言っているわけではないのです。
セマンティックウェブとかSEOとかマルチデバイスとかと
不可分だし、そういうのに応用が利く。
ISO9000シリーズや14000シリーズと同様、官公庁や
企業サイトには必須となるのでどうせ避けられない。
ぶっちゃけ、ただのレスポンシブデザインでは簡単すぎ
て面白くない。（floatを重ねて終わりとかつまらない）
普通の人にも使いやすくなる。（ここ重要）

9

【復習】アクセシビリティとは
●
●
●

●

●

●

「誰でも使えるウェブサイト」
JIS X 8341-3「高齢者・障害者等配慮設計指針」
視覚障害、聴覚障害、運動障害（マウスでの繊細な
操作ができない）、てんかん
初心者、高齢者、学習障害者でも簡単に扱えるよう
にする。
いかに気配り上手なウェブサイトを作れるか
「愛だろ、愛。」（チムグクルってのが一番しっくりくる）
10

【復習】アクセシビリティ規格
●

JIS X 8341-3:2010 （現在の版）
–
–

●

サイトの評価をするための基準を示している。A～AAA
官公庁などはAAレベルを目標にしているところが多
い。

現在の版は評価基準を示していて、実際にどう実
装するかは制作者にゆだねられている。
–
–

教科書のように使えるのは、改定前の版。
JIS X 8341-3:2004
11

視覚障害の種類と対策（1）
●

全盲
–

音声読み上げソフト・ブラウザ、点字ブラウザに対応す
る。
●

●

–

音声読み上げは、OSに標準で付いている場合もある（iOS、
Android,Windows8.xなど）。無料ソフトにNVDAがある。
→　http://sourceforge.jp/projects/nvdajp/
ちなみに、NVDAは打ち込んだ文字を読み上げてくれるの
で、データの入力作業がやりやすい。また、入力終了後にタ
イプミスが無いか確認するときにも便利。

キーボードのみの操作で扱いやすくする。
●

運動障害にも対応可能になる。

12

●

弱視
–
–

メガネなどで矯正しても十分な視力が出ない。
高コントラスト、大サイズの文字。
●

OSの「ユーザー補助」「簡単操作」「アクセシビリティ」などのコントロールパネル
の項目で体験できる。
–

●

●

Win7の場合、スタートメニュー＞コントロールパネル＞コンピュータの簡単操作センター

サイト側でやる事はあまり無い。

色盲・色弱
–
–

3原色を判別する錐体（センサー）の一部が無い、あるいは働きが弱い。
色の選択に注意するか、コントラストを高くする。
●
●

●

無料ソフトのカラーコントラストアナライザーで簡単に検証できる。
ちなみに純色（#FF0000, #00FF00, #0000FF）だと十分なコントラストが出ない
ので要注意。
これに配慮すると、モノクロ印刷でも判別できるようになる。
13

●

老眼・近視など
–

標準の文字サイズを16pxにする。
●
●

–

普通は14pxだがそこを何とかするのがデザイナーの腕の見せ所。
明朝体を使うとか。

スマホやタブレットでは16ピクセルが読みやすい。（画面が
高精細化しすぎて、通常のサイズだと小さくなる）
→　http://web-tan.forum.impressrd.jp/e/2013/06/04/15385

なお、印刷用CSSの標準の文字サイズは10.5pt以上に
する。（ｐｘではなく、pt。10.5ptはWordの標準サイズなの
で違和感が出ない。高齢者向けには11～12pt）
14

聴覚障害対策
●

主に動画コンテンツで注意が必要。
–

●

動画には字幕をつける。あるいは字幕つきを選べるよう
にする。

インタラクティブコンテンツで、クリックなどの反応を
音で出す場合に対策が必要。
–

音だけではなく、画面でも反応している事が分かるよう
にする。

15

てんかん対策
●

光過敏性てんかん
–
–

●

アニメ番組の閃光で大規模な被害が発生し、注目され
た。（ポケモンショック）
1秒間に3回以上の点滅を避ける事。

幾何学模様で発作が起きるものもある。
–
–

一定の幾何学模様に反応して発作が起きるタイプ。
画面いっぱいに縞模様とか、同心円、渦巻きとかは避
けるべき。

16

アクセシビリティ、最初の一歩
●
●

セマンティックにマークアップする。
画像にalt属性を付けて丁寧な解説を行う。
–
–

●

文字サイズは16px。
–

●

イベントに関するニュースのVTRのナレーションのような
感じ。
さほど重要ではない場合、alt=””で音声読み上げに無視
させる。
小さくても14px。12pxとか言語道断。

文字と背景の間には十分なコントラストをつける。
–

少なくとも3：1以上。望ましくは4.5 :1以上。
17

レスポンシブデザインと
アクセシビリティ
●

HTML5の採用。
–
–

●

スキップリンクの設置。なお、非表示には一定のテクニック
が必要。（実例は後述）
–
–

●

適切なタグ、id名、role属性を付ける。
セマンティックなサイトの構築。（←ご利益いっぱい）

display: none; は読み上げられない事が多いため使用不可。
なお、スマホ向けサイトで表示させると使いやすくなる。

メインコンテンツをサイドバーのコンテンツよりも先に配置
する。
–
–

これをレスポンシブデザインでやるのは大変。
モバイル＆コンテンツファースト
18

【実装（1）】HTML5＆セマンティック
●

タグ：<header>,<nav>,<main>
–
–

●

今後、ブラウザにはこれらのコンテンツにスキップする機能が付く可能性が高い。
（障害者支援ツールは既に対応しているものも）
IE8は非対応。html5shiv.jsを使うか、<div id=”main” role=”main”>等

マークアップ：<h1>~<h6>
–
–

見出し要素を手がかりに情報を探す人が多い。
マークアップのみならず、適切な見出しも重要になる。

●

id名：スキップリンク（ブロックスキップ）のアンカーとして。

●

role属性：WAI-ARIAで規定されている。タグより詳細な機能を明示する。
–
–

https://w3g.jp/blog/studies/lets_role_fit
ユーザー側で情報の整理ができるようになる。

※WAI-ARIA : Web Accessibility Initiative-Accessible Rich Internet Applications
19

【実装（2）】スキップリンク
使っちゃいけない/使いにくいもの
●

display: none;　⇒スキップリンクが機能しなくなる。

●

Google先生がペナルティかける可能性があるもの
–

テキストを画像の背後に置く
CSS を使用してテキストを画面の外に配置する

–

フォントサイズを 0 に設定する

–

小さな 1 文字（段落中のハイフンなど）のみをリンクにする
白背景白文字

–

–

●

●

アクセシビリティチェッカーでもエラーとして検出されるはず。

text-indent: -9999px;　⇒ブラウザの描画処理が遅くなるかも。
–

indentは小さい数字にして、overflow: hidden; で隠す。
20

沖縄県のホームページの場合
●

文字サイズや行の高さを極端に小さくした上で、position
で左に飛ばしている。
–

●

text-indent: -9999px;と同じ発想。

active, focusでページの上端に表示。
.skip {
font-size: 0.1%;
line-height: 0.1;
position: absolute;
left: -3000px;
width: 1px;
z-index: 9999;
}

a.skip:active,
a.skip:focus {
display: block;
font-size: 100%;
line-height: 1.6;
top: 0;
left: 0;
width: 99.99%;
}

21

WordPress（Twenty-Thirteen）の場合
●

●

clip: rect (top, right, bottom, left ); を使って0ピクセル
にトリミング
clipプロパティはCSS2.1に規定されている。
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
}

22

うち（小三ツ星インターフェイス）の場合
●

●

clip: rect (top, right, bottom, left ); を使って0ピクセ
ルにトリミング（WordPressチームのパクｒｙ）
スマホ用media queryではボタンとして表示させる

@media (min-width: 640px) {
.skiplink {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
}

@media (max-width:639px){
.skiplink {
display: table;
width: 60px;
height: 60px;
position: absolute;
top: 0px;
right: 2px;
}

.skiplink a {
display: table-cell;
width: 100%;
height: 100%;
text-indent: 0;
border-radius: 4px;
font-sixe: 14px;
}
}

←他にもいろいろ設定して、スマホでは
ページ右上に半透明のボタンが表示される。

23

【実装（３）】レスポンシブのカラム
ウィンドウ幅を狭くするとカラムを下に落としたい。
使えそうないくつかの方法。　
1.　floatプロパティを使う。
•

入りきれないと勝手に下に落ちてくれる。簡単。

2.　positionプロパティを使う。
•

デザインが崩れる。大変。CSSだけでは無理っぽい。

•

いろいろ試してはいるが、javascript必須かも。

3.　display: table; display: table-cell; を使う。
•
•
•

CSS3にて登場。簡単。
IE7以下は非対応。
３カラム、左サイドメニューのレイアウトではコンテンツファーストは不可
能。
24

【実装（４）】floatによる実装
問題がいくつか。
●
普通にやると、固定幅カラムが先になる。
–
–
–

コンテンツが一番下になる。←大問題。
スマホサイトではかなり使いにくくなる。
可変幅を先に持ってくると、最小幅で描画されレスポンシブ
にならない。

解決法
● レイアウトを行うためのdivタグでカラムをグループ化
し、ネガティブマージンを組み合わせて回り込ませる。
●
元ネタ↓
http://www.css-designsample.com/csslayout/float-3column-w.html

25

●

サイトの構造

<div id="contents" class="contents post">
<div class="main-area">
<div class="center-area">
<section id="main" class="main">
<article>
コンテンツ
</article>
</section> 
</div>
左サイドバー
</div>
右サイドバー
</div>

デザイン専用のdiv要素が増えるもの
の、コンテンツファーストで実装できる。

<contents>
<div class=”main-area”>
<div class=”center-area”>
<section class=”main”>
<article>
コンテンツ
</article>

<sidebar-left>
左サイドバー
<sidebar-right>
右サイドバー
26

●

CSSの組み立て（１）

.contents {
width: 100%;
}
.main-area{
width: 100%;
float: left;
margin-right: -200px;
}

●

●

土台のdiv(contents)は、幅を%で指定。(リ
キッドレイアウト)
ネガティブマージン(右)により、最下層の右サ
イドバーが回りこむ領域を確保。（divは重複
する形になる。）

<contents>
<div class=”main-area”>
<article>
コンテンツ
</article>

<sidebar-left>
左サイドバー
<sidebar-right>
右サイドバー
27

●

CSSの組み立て（2）
<contents>

.rightside {
background-color: #FC0;
width: 170px;
float: right;
}

●

<article>
コンテンツ
</article>

sidebar-rightにfloat:right;　
を指定すると、右に回り込む。

●

<div class=”main-area”> <sidebar-right>
右サイドバー

mainと重複している状態。

<sidebar-left>
左サイドバー
<sidebar-right>
右サイドバー
28

●


.center-area{
width: 100%;
margin-left: -190px;
}

<contents>
右サイドバー
<article>
コンテンツ
</article>

●

center-areaにmargin-left: -190px;
を指定すると、要素全体が左に引きずら
れ、右サイドバーとの重複が一時的に解
消される。

<sidebar-left>
左サイドバー

29

●


.center-area{
width: 100%;
margin-left: -190px;
float: right;
}

●

さらに、center-areaにfloat: right;
を指定すると、親要素にある右サイドバー
に重複。

●

同時に、左サイドバーも回りこむ。どういう
わけか、はみ出しているエリアにではなく、

<contents>
右サイドバー
<sidebar-left>
左サイドバー
<article>
コンテンツ
</article>

<sidebar-left>
左サイドバー

main-area内に入るように描画される。
30

●


.main {
margin: 0 200px;
}
.leftside {
width: 170px;
float: left;
}

●

<contents>
右サイドバー
<sidebar-left>
左サイドバー
<article>
コンテンツ
</article>

サイドバーとコンテンツの重複を解消する
ため、mainの左右マージンを調整。

●

左サイドがcenter-areaの下に隠れるが、
float: left;で表に出てくる。

31

いくつかの欠点も…
● clearfixが使えない。
●

可読性が落ちる。
–
–
–

レイアウトのためのdiv要素
でコードが複雑になる。
閉じタグ忘れとかするとえら
いことになる。
ネガティブマージンとかぶっ
ちゃけ分かりにくい。

<contents>
右サイドバー
<sidebar-left>
左サイドバー
<article>
コンテンツ
</article>

32

【実装（5）】display:table;による実装
HTML

CSS

<div class=”contents”>
<aside class=”sidebar-left”>
</aside>
<section class=”main” role=”main”>
</section>
<aside class=”sidebar-right”>
</aside>
</div>
<contents>
<sidebar-left>
左サイドバー
<article>
コンテンツ
</article>
<sidebar-right>
右サイドバー

.contents {
display: table;
table-layout: fixed;
}
.sidebar-left {
display:table-cell;
vartical-align: top;
width: 180px;
}
.main {
display:table-cell;
}
.sidebar-right {
display:table-cell;
width: 180px;
}
33

利点
●
テーブルレイアウトに近いこと
ができる。
● vertical-align が使えて便利。
●

●

table-layout: fixed;　で均等
配置が可能。
レイアウト専用のdivが不要。

●

clearfix不要。

●

コードの可読性が高い。

<contents>
<sidebar-left>
左サイドバー
<article>
コンテンツ
</article>
<sidebar-right>
右サイドバー
34

欠点
●
左メニューではコンテンツファーストが不可能。
–
–
●

●

table-cellは、HTMLの記載順に左から埋めていく。
スキップリンク必須。

display:table-cell;に指定されたボックス内では横
のmarginが機能しない。
デフォルトでは隣のcellと行を揃えようとする。
–

ボックスの先頭部分は、vertical-align:top; で揃える。

35

まとめ
●
●
●

●

●

最初はdisplay:table;とスキップリンクが簡単。
細かいやり方はぐぐればたくさん出てくる。
気を使うところはたくさんあるけど、デザインってそ
ういうものだよね。
「使いやすさ」を追求すると、レスポンシブデザイン
とかモバイルファーストとかアクセシビリティファー
ストとかになる。
アクセシビリティに配慮することがそのままスマホ
などのユーザビリティに直結する。
36

【その他】microdataについて
●

検索結果を適切に表示するために
Yahoo,Microsoft,Googleが共同で策定した構造化
マークアップの規格。
–

●

●

Schema.org

「文脈」を示すことができる。（人名、地名、商品名、
金額など。）
Googleなどの検索結果に金額や評価などの情報
が出るようになる。
–

（参考：microdata について　Googleウェブマスターツールヘルプ）

37

microdataの実装
<div itemscope itemtype="http://schema.org/Organization">

定義のURL：
（企業・団体）

<span itemprop="name">団体名称</span>
語彙
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
住所:〒<span itemprop="postalCode">90*-****</span>
<span itemprop="addressLocality">都道府県</span>
<span itemprop="streetAddress">市町村*丁目</span>
</div>
Tel:<span itemprop="telephone">0*-****-****</span>,
Fax:<span itemprop="faxNumber">0**-***-****</span>,
E-mail: <span itemprop="email">hage@hogehoge.example</span>
</div>
参考：http://schema.org/Organization
38

参考文献など
●

スクリーンリーダーNVDA
–

●

CUD カラーユニバーサルデザイン
–

●

https://w3g.jp/blog/studies/lets_role_fit

floatプロパティによるコンテンツファーストデザイン
–

●

http://weba11y.jp/tools/cca/index.html

role属性について
–

●

NPO法人カラーユニバーサルデザイン機構著　ハート出版　ISBN978-89295565-5

カラーコントラストアナライザー
–

●

http://sourceforge.jp/projects/nvdajp/

http://www.css-designsample.com/csslayout/float-3column-w.html

microdata
–

http://schema-ja.appspot.com/
39

レスポンシブウェブデザインとアクセシビリティの勉強会

Recommandé

Recommandé

Contenu connexe

Similaire à レスポンシブウェブデザインとアクセシビリティの勉強会

Similaire à レスポンシブウェブデザインとアクセシビリティの勉強会 (20)

Plus de Akinori Kawamitsu

Plus de Akinori Kawamitsu (6)

Dernier

Dernier (8)

レスポンシブウェブデザインとアクセシビリティの勉強会