多様なユーザーニーズに応える�フロントエンドデザインパターン�〜ベーシック編〜
書籍「インクルーシブHTML+CSS & JavaScript」より
伊原 力也 / 太田 良典
2017.11.04
CSS Nite LP54「Coder's High 2017」
1
自己紹介
太田 良典
HTML4.01のW3C仕様書を翻訳した「HTML4仕様書邦訳計画補完委員会」の委員を務めた後、2001年にBAに参加。Web技術の分野で幅広い専門性を持ち、セキュリティ分野においては「第二回IPA賞（情報セキュリティ部門）」を受賞。アクセシビリティ分野では、ウェブアクセシビリティ基盤委員会（WAIC）の委員として活動している。
伊原 力也
freee株式会社 IA/UX。アクセシブルなインタラクションデザインの実践を標榜し、Webサービスやスマートフォンアプリの設計業務に従事。ウェブアクセシビリティ基盤委員会（WAIC）理解と普及作業部会委員としても活動。HCD-Net認定 人間中心設計専門家および評議委員。クリエイティブユニットmokuva所属。
2
3
4
Amazonで「アクセシビリティ」と検索！
5
このセッションの流れ
6
インクルーシブ・デザインパターン
7
原著名: インクルーシブ・デザインパターン
Inclusive Design Patterns�Coding Accessibility Into Web Design�
8
インクルーシブとは?
Inclusive
ここでは、「誰でも受け入れる」�「特定の人を除外しない」のような意味
= どんな人、どんな環境でもアクセスできる�「アクセシビリティ」とほぼ同義
9
アクセシビリティ系の記事のよくあるパターン
10
この本は?
普及しているUIについて、アクセシブルなデザインパターンを提供
11
ボタン vs ボタン
12
インクルーシブなボタン
インタラクティブ要素である「スタート」と書かれたボタンを、�3種類のデザイナーの視点で見てみます。
Webというメディアに対する少しの知識が、よりシンプルかつ�インクルーシブな解決策を導き出すことに注目してください。
13
3種類のデザイナー
14
みなさんなら、どのように実装しますか？
15
グラフィックデザイナー
彼らにとってボタンは視覚的な成果物であり、�Adobe IllustratorやSketchで作るものです。�本物のボタンのように見えるか、�全体のブランディングにフィットしているかを常に考えています。�そのボタンをどうやってWebページに実装するか、�どうやって動作させるかはまったく考えていません。
16
グラフィックデザイナーの「スタート」ボタン
17
コードを書くデザイナー
2番目にとりあげるデザイナーは、�最初のデザイナーとほとんど同じスキルをもっていますが、�ひとつ大きな違いがあります。
彼らは、Webページ内にボタンを表示し、�JavaScriptのイベントリスナーを指定できるだけの�HTML、CSS、JavaScriptの知識を持っています。
18
コードを書くデザイナーの「スタート」ボタン
<div class="button"></div>
.button {� width: 200px;� height: 70px;� background: url('../images/button.png');�}
button.addEventListener('click', function() {� // クリックでイベント発火�});
19
インクルーシブデザイナー
インクルーシブデザイナーは、�コードを書くデザイナーのボタンを、�潜在ユーザーを想定したさまざまな観点から検討します。�そうすると、この実装の問題点が次々と見えてきます。
20
コードを書くデザイナーのボタンにはこんな問題が
21
22
インクルーシブデザイナーの「スタート」ボタン
<button>スタート</button>
23
「賛成」ボタンをどう修正する?
25
「コードを書くデザイナー」によるマークアップ
<div class="upvote" data-action="upvote"></div>
26
アクセシビリティチェックで登録されたチケット
27
1.1.1「非テキストコンテンツ」に対応
<div class="upvote" data-action="upvote" aria-label="賛成！"></div>
28
2.1.1「キーボード」に対応
<div class="upvote" data-action="upvote" aria-label="賛成！"� tabindex="0"></div>
29
4.1.2「名前（name）・役割（role）及び値（value）」に対応
<div class="upvote" data-action="upvote" aria-label="賛成！"� tabindex="0" role="button"></div>
30
賛成ボタンもbutton要素で
<button data-action="upvote" aria-label="賛成！"></button>
32
画像を背景から前景に変更
<button data-action="upvote">� <svg aria-label="賛成！">� <use xlink:href="#upvote"></use>� </svg>�</button>
33
よくあるメニューボタンの実装
34
ボタンらしい見た目 + ラベルがおすすめ
35
アイコンの実装方法あれこれ
36
背景画像で実装した場合の問題点
Windowsでハイコントラストモードに切り替えると�背景画像は表示されなくなります。
「メニュー」というテキストも提供していれば、�ぶち壊しにはなりません�（ハイコントラストモードにしたとき、背景色とともに� テキストの色も反転するため、引き続き読めるのです）。
37
前景画像にするとどうか?
38
ハイコントラストモードの黒背景では、�アイコンは白枠で囲まれて異なる見え方になるうえに、�「メニュー」というテキストとも分離して見えます。
アイコンフォントによる実装
最近よく見られるが、いくつか問題がある
39
豆腐
Unicode標準の記号を使う
40
☰
U+2630 'TRIGRAM FOR HEAVEN'�（「八卦」の「天」）
U+2630（☰）を使った実装の問題
41
読み上げられないようにする
<button>� <span aria-hidden="true">☰</span>� メニュー�</button>
42
SVGスプライト
SVGスプライトは、急速にアイコン表示の�事実上標準の解決策となりつつあります�――それには正当な理由があります。
Googleによる305バイトのロゴ実装が証明したように、�アセットを非常に小さくできます。劣化せずに拡大縮小でき、�フォントカラーの変更に合わせて色を変えることもできます。
43
SVGスプライトの準備
<svg style="display: none;">� <symbol id="navicon" viewBox="0 0 20 20">� <path � d="m0-0v4h20v-4h-20zm0 8v4h20v-4h-20zm0 8v4h20v-4h-20z"
fill="currentColor" />
</symbol>� <!-- 他にも<symbol>要素がたくさん -->
</svg>
44
SVGスプライトの使用
<button>� <svg><use xlink:href="#navicon"></use></svg>� メニュー�</button>
button svg {� width: 1em;� height: 1em;�}
45
アイコン単体で使いたいときは?
前述したとおり、ボタンに「メニュー」というテキストを含める�ことには認知面のメリットがあります。�また、何らかの理由でアイコンが表示されなかった場合でも、�<button>のわかりやすさが保たれます。
それでもやはり、アイコン単体で使いたい場合もあるでしょう。�その場合は、スクリーンリーダーユーザーにも�確実に「メニューボタン」と伝わるようにすることが重要です。
46
SVGに加えて非表示の<span>でラベルを追加
<button>� <svg><use xlink:href="#navicon"></use></svg>� <span class="visually-hidden">メニュー</span>�</button>
47
ボタン全体にaria-label属性でラベルを追加
<button aria-label="メニュー">� <svg><use xlink:href="#navicon"></use></svg>�</button>
48
記号文字のボタンにaria-labelでラベルを追加
<button aria-label="メニュー">� ☰�</button>
49
開閉するメニューを実装して完成
<nav aria-label="サイト">� <button aria-expanded="false">� <svg><use xlink:href="#navicon"></use></svg>� メニュー� </button>� <ul hidden>� <li><a href="#main">ホーム</a></li>� <li><a href="/about">企業情報</a></li>� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>�</nav>
50
開閉メニュー実装時のポイント
51
ボタンのまとめ
52
ナビゲーション領域
53
サイト内共通のナビゲーション
<nav>� <ul>� <li><a href="/">ホーム</a></li>� <li><a href="/about">企業情報</a></li>� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>�</nav>
54
スクリーンリーダーでは?
最初に「ナビゲーション ランドマーク」と読み上げられた後、�「リスト 5項目」と続き、�最後に「home リンク」と読み上げられたとします。
これにより、自分がいまnavigationランドマークにいること、�そしてそこには全部で5つのリンクがあることがわかります。�望むなら、すぐに最初のリンク先をたどることもできます。
55
外観と配置
56
CSSが読み込めなかったときも何なのかわかる
57
現在位置は色以外でも区別する
58
さらに大胆にしても良い
59
スクリーンリーダーのサポート：方法1
<nav>� <ul>� <li><a href="/">ホーム</a></li>� <li><a href="/about"><span� class="visually-hidden">現在のページ</span> 企業情報</a></li>� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>�</nav>
60
スクリーンリーダーのサポート：方法2
<nav>� <ul>� <li><a href="/">ホーム</a></li>� <li><a href="/about"� aria-describedby="current">企業情報</a></li>� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>� <div hidden id="current">現在のページ</div>�</nav>
61
※結果：iOS VoiceOverでは効果なし：
スクリーンリーダーのサポート：方法3
<nav>� <ul>� <li><a href="/">ホーム</a></li>� <li><a href="/about" aria-current="page">企業情報</a></li>� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>�</nav>
62
冗長なリンクは取り除くべき？
<nav>� <ul>� <li><a href="/">ホーム</a></li>
� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>�</nav>
63
冗長なリンクはスキップリンクに？
<nav>� <ul>� <li><a href="/">ホーム</a></li>� <li><a href="#main">企業情報</a></li>� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>�</nav>
64
サイトロゴと「ホーム」のリンクかぶり問題
<header role="banner">� <a href="/home"><img src="images/logo.svg" alt="ホーム"></a>� <nav>� <ul>� <li><a href="#main">ホーム</a></li>� <li><a href="/about">企業情報</a></li>� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>� </nav>�</header>
65
重複をなくす？
<nav>� <ul>� <li><a href="#main"><img src="images/logo.svg"� alt="ホーム"></a></li>� <li><a href="/about">企業情報</a></li>� <li><a href="/products">製品情報</a></li>� <li><a href="/contact">お問い合わせ</a></li>� <li><a href="/login">ログイン</a></li>� </ul>�</nav>
66
ナビゲーションのまとめ
67
ブログ記事
68
見出しレベルに注意
<h1>ブログ記事のマークアップ方法</h1>�<!-- 序文コンテンツ-->�<h3>「セマンティック」という単語について</h3>�<!-- 待って！2番目のネストレベルはどこに？-->
69
セクションの構造
70
見出しのレベルとスタイルを分離するのはどうか？
<h2 class="h3">私は何でしょう？</h2>
71
インクルーシブ＝体験を等価なものにすること
コンテンツを視覚的に扱う一方で、非視覚的には別の方法で�コンテンツを処理するということは、見えているユーザーと�見えていないユーザーを分離し始めているということです。
RSSリーダーなどを通じて表示される際には、�異なるスタイルシートが適用されるため、�視覚的な構造が異なるものになることもあります。
72
見出しジャンプで読み飛ばされる情報に注意する
73
<article>要素は使うべきなのか？
<main id="main">� <article>� <h1>インクルーシブなブログ記事のマークアップ方法</h1>� <div class="meta">公開日 <time� datetime="2017-12-12">2017/12/12</time></div>� <!-- ここに記事のコンテンツ -->� </article>�</main>
74
JAWSとiOS VoiceOverは開始・終了を読み上げる
<article>� ここに最初の記事のコンテンツ�</article>�<article>� ここに2番目の記事のコンテンツ�</article>�<article>� ここに3番目の記事のコンテンツ�</article>
75
要素を選ぶときは、ユーザー体験の観点から
セマンティックな要素を選ぶときは、�ユーザー体験の観点から考えるようにしましょう。
技術的に正しい要素を使用していても、�それが全くサポートされておらず、�誰が見ても何の効果も発揮しないことがあります。
また、効果が間違いなく発揮される場合でも、混乱を招いたり、�一貫性がなかったり、じゃまだったりする場合もあります。
76
見出しのテキストにも注意（NGな例）
<h2>無料ですって？それならください！</h2>
77
何が無料なのでしょう？
ダイレクトで説明的な見出しは、あとに続く内容を明確にし、�全体的な理解も助けます。言い換えれば、もったいぶったり、�風変わりにしたりしても、ろくなことがないということです!
さらに、スクリーンリーダーユーザーにとっては�別の意味合いもあります。�スクリーンリーダーは、動的に見出しをピックアップし、�選択できるリストとして提供します。
78
見出しのテキスト（OKな例）
<h2>フラップジャックが無料ですって？ください！</h2>
79
ブログ記事のまとめ
80
まとめ
81
このセッションのまとめ
82
83
Amazonで「インクルーシブHTML」と検索！
84
Amazonで「インクルーシブHTML」と検索！
85
Amazonで「インクルーシブHTML」と検索！
今日からあなたも�インクルーシブデザイナー！
86
ありがとうございました
@bakera
@magi1125
スクリーンリーダー：VoiceOver (iOS 11.1)
87