PostgreSQL における拡張インデクス機能を有する …DEIM Forum 2011 D8-2 PostgreSQLにおける拡張インデクス機能を有する表構造ファイルラッパ 藤田
キホンの「キ」 - CSS...
Transcript of キホンの「キ」 - CSS...
1
2016年のうちに再確認しておきたい
キホンの「キ」
アクセシビリティ
2
© Infoaxia, Inc. 2016. All rights reserved.
植⽊ 真(インフォアクシア) 千貫 りこ(KICKS Web)
© Infoaxia, Inc. 2016. All rights reserved.
2016年の「Webアクセシビリティ」
1. 「JIS X 8341-3」の改定
2. 「障害者差別解消法」の施⾏
3. 「みんなの公共サイト運⽤ガイドライン」の公開
4. 企業におけるWebアクセシビリティの取り組み
5. HTML5とWAI-ARIAによる実装が加速
3
© Infoaxia, Inc. 2016. All rights reserved.
JIS X 8341-3:20162016年3⽉22⽇ 公⽰
国際規格「ISO/IEC 40500:2012」(= W3C「WCAG 2.0」)と同じ内容の⼀致規格に
「JIS X 8341-3」=「WCAG 2.0」の⽇本語訳
達成基準には⼀切の変更ナシただし、「WCAG 2.0」の⽇本語訳を⼤幅に⾒直し
JIS X 8341-3:2016 解説 http://waic.jp/docs/jis2016/understanding/201604/
© Infoaxia, Inc. 2016. All rights reserved.
障害者差別解消法2016年4⽉1⽇ 施⾏
利⽤者からの改善要望があれば個別対応公的機関は法定義務、⺠間事業者は努⼒義務⾃治体のWebサイトに対して改善要望が出され始めている
Webアクセシビリティの確保は、先進国の多くでは法律によって義務化されている
障害を理由とする差別の解消の推進 http://www8.cao.go.jp/shougai/suishin/sabekai.html
4
© Infoaxia, Inc. 2016. All rights reserved.
みんなの公共サイト運⽤ガイドライン
2016年4⽉20⽇ 公開総務省が作成公的機関職員向けのJIS対応 ⼿順書
2018年3⽉末までにレベル AA準拠 を推奨先進国の多くで義務化されているレベルと同じ
「ウェブアクセシビリティ取組確認・評価表」を新たに提供
⾃⼰採点により毎年取り組み状況を評価し公表
http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html
© Infoaxia, Inc. 2016. All rights reserved.
Webアクセシビリティの⽅針や試験結果を公開
5
© Infoaxia, Inc. 2016. All rights reserved.
サイボウズ
https://cybozu.co.jp/efforts/accessibility/
© Infoaxia, Inc. 2016. All rights reserved.
https://havelog.ayumusato.com/develop/a11y/e720-a11y_informal_study.html
サイバーエージェント
6
© Infoaxia, Inc. 2016. All rights reserved.
http://yahoojapanpr.tumblr.com/post/144834658627/accessibility
ヤフーのアクセシビリティ⿊帯の取り組み
© Infoaxia, Inc. 2016. All rights reserved.
HTML5による実装が⼀般化し、WAI-ARIAの実装も加速
コーダー⽩書2016 http://www.slideshare.net/uzuflat/2016-66421027
7
© Infoaxia, Inc. 2016. All rights reserved.
HTML5による実装が⼀般化し、WAI-ARIAの実装も加速
コーダー⽩書2016 http://www.slideshare.net/uzuflat/2016-66421027
© Infoaxia, Inc. 2016. All rights reserved.
WAI-ARIA
https://www.w3.org/TR/wai-aria-1.1/⽇本語訳︓https://momdo.github.io/wai-aria-1.1/
8
© Infoaxia, Inc. 2016. All rights reserved.
WAI-ARIA
https://www.w3.org/TR/wai-aria-1.1/⽇本語訳︓https://momdo.github.io/wai-aria-1.1/
© Infoaxia, Inc. 2016. All rights reserved.
品質として、アクセシビリティを「感覚的に意識している」 52%
コーダー⽩書2016 http://www.slideshare.net/uzuflat/2016-66421027
9
© Infoaxia, Inc. 2016. All rights reserved.
個⼈的にはエーイレブンワイ
Webアクセシビリティの情報提供サイト「エー イレブン ワイ」http://weba11y.jp/
© Infoaxia, Inc. 2016. All rights reserved.
実例と体験談から学ぶ
アクセシビリティを⾼めるコツ
2016年のうちに再確認しておきたい キホンの「キ」
10
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトルHTML5のセクショニング要素等に
ランドマークroleを使う
© Infoaxia, Inc. 2016. All rights reserved.
Webページのセクションをマシンリーダブルに
ヘッダー <header>ナビゲーション <nav>
メインコンテンツ <main>
補⾜ <aside>
フッター <footer>
ホーム → 基礎知識 ホーム → 基礎知識
■■■■■■■■■■■■■■■■■■
■■■■■■■■
■■■■■■■■■■
■■■■■■■■
■■■■■■■■■■
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
11
© Infoaxia, Inc. 2016. All rights reserved.
スクリーンリーダーでページ内のセクションを移動
NVDA(Windows) VoiceOver(iOS)
© Infoaxia, Inc. 2016. All rights reserved.
当⾯はランドマークroleを併⽤
<header role=“banner”><nav role=“navigation”>{グロナビ}</nav><form role=“search”>{サイト内検索}</form>
</header><nav role=“navigation”>{パンくずリスト}</nav><main role=“main”>
{ここにメインコンテンツ}</main><nav role=“navigation”>{ローカルナビ}</nav><aside role=“complementary”>{バナーとか}</aside><footer role=“contentinfo”>{フッター}</footer>
12
© Infoaxia, Inc. 2016. All rights reserved.
参考︓ スクリーンリーダーは「PC-Talker」のシェアが断トツ
視覚障害者の携帯電話・スマートフォン・タブレット・パソコン利⽤状況調査 2013http://dspace.lib.niigata-u.ac.jp/dspace/bitstream/10191/27807/1/TAF_Report_H26.pdf
© Infoaxia, Inc. 2016. All rights reserved.
HTML5のセクションを⽰す主な要素 & 対応するランドマーク role
Webページにあるセクション HTML5の要素 ランドマークrole
ヘッダー header banner
ナビゲーション nav navigation
メインコンテンツ main main
補足情報 aside complementary
フッター footer contentinfo
13
© Infoaxia, Inc. 2016. All rights reserved.
スクリーンリーダーのユーザーは旧バージョンを使い続ける説
Results of the 2016 GOV.UK assistive technology surveyhttps://accessibility.blog.gov.uk/2016/11/01/results-of-the-2016-gov-uk-assistive-technology-survey/
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトルナビゲーションに
ラベルを付ける
14
© Infoaxia, Inc. 2016. All rights reserved.
ナビゲーションの区別がつかない
NVDA(Windows)
© Infoaxia, Inc. 2016. All rights reserved.
ラベルを付けて それぞれの違いをマシンリーダブルに
<nav role=“navigation” aria-label=“メインメニュー”>{ここにナビゲーションバー}
</nav>
<nav role=“navigation” aria-label=“現在位置”>{ここにパンくずリスト}
</nav>
<nav role=“navigation” aria-labelledby=“local-nav”><h2 id=“local-nav”>注⽬の⽤語</h2>
{ここにローカルナビゲーション}</nav>
15
© Infoaxia, Inc. 2016. All rights reserved.
スクリーンリーダーでページ内のセクションを移動
Before After
aria-labelaria-label
aria-labelledby
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトル写真だと分かる
代替テキストにする
16
© Infoaxia, Inc. 2016. All rights reserved.
代替テキストによって、画像と同等の情報をマシンリーダブルに
画像にある⽂字情報をalt属性に記述する
<img src=“banner.png” alt=“CSS Nite Shift2016-2017 2016.12.17”>
© Infoaxia, Inc. 2016. All rights reserved.
代替テキストによって、画像と同等の情報をマシンリーダブルに
そのページに写真があることも “情報”
<img src=“photo.jpg” alt=“写真︓⼩林製薬の⽷ようじ 60本⼊り”>
17
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトル画像リンクとテキストリンク
リンク先が同じなら1つにまとめる
© Infoaxia, Inc. 2016. All rights reserved.
リンク先が同じなら⼀つのリンクにまとめる
キーボード操作回数が半分に減る
<a href="http://amzn.to/2bCe8ep"><img src=“book.jpg" alt=""><span>デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ</span></a>
18
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトルSVGファイルを使うなら
<img> に role=“img” をつける
© Infoaxia, Inc. 2016. All rights reserved.
<img>要素でSVGファイルを指定するとき
<img src="logo.svg" alt="エー イレブン ワイ" role="img">
<img>要素に role=“img” をあえて指定Safariの旧バージョンにあるバグ対策
スクリーンリーダー「VoiceOver」が読み上げないMac版 9.1.1以上、iOS版 9.3.2以上だけが対象なら不要
19
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトルキーボードフォーカス見えてる?
© Infoaxia, Inc. 2016. All rights reserved.
フォーカスインジケータは常に表⽰させる
キーボード操作時にフォーカスの現在位置を⽰す
デフォルトでの表⽰ドットや⽔⾊の矩形 = 分かりづらいこともある
CSSで outline:none の指定があると⾮表⽰にキーボード操作時には致命的
20
© Infoaxia, Inc. 2016. All rights reserved.
フォーカスインジケータの表⽰を強調してみた
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトル文字色と背景色の
コントラスト比は 4.5:1以上
21
© Infoaxia, Inc. 2016. All rights reserved.
場所を選ばないからこそ、⾊のコントラストは重要
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトルWAI-ARIAを
手軽に賢く実装してみる
22
© Infoaxia, Inc. 2016. All rights reserved.
Accessibility Plugin for Bootstrap 3
https://paypal.github.io/bootstrap-accessibility-plugin/demo.html
© Infoaxia, Inc. 2016. All rights reserved.
Bootstrap Accessibility Plugin を使ってみた
タブとタブパネル
23
© Infoaxia, Inc. 2016. All rights reserved.
Bootstrap Accessibility Plugin を使ってみた
アコーディオン
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトルパンくずリストに
正解はある?
24
© Infoaxia, Inc. 2016. All rights reserved.
パンくずリストは「>」ではなく「→」で
https://momdo.github.io/html5/common-idioms.html#rel-up
© Infoaxia, Inc. 2016. All rights reserved.
パンくずリスト
25
© Infoaxia, Inc. 2016. All rights reserved.
まずはページタイトルその他、押さえておきたい
キホンの「キ」
© Infoaxia, Inc. 2016. All rights reserved.
さらに これらも実践できれば だいぶアクセシブル
ページの内容が分かるページタイトルを記述する
⾒出しやリストなどの⽂書構造をマークアップする
リンク先が分かるリンクテキストにする
ユーザーがコンテンツを拡⼤表⽰できるようにする
フォーム・コントロールのラベルをマークアップする
26
© Infoaxia, Inc. 2016. All rights reserved.
実例と体験談から学ぶ アクセシビリティを⾼めるコツ
1. ランドマークroleを使う
2. ナビゲーションにラベルをつける
3. 写真だと分かる代替テキスト
4. 画像リンクとテキストリンクを1つにまとめる
5. SVGファイルには role=“img” をつける
6. キーボードフォーカス⾒えてる︖
7. ⾊のコントラスト⽐は4.5:1以上
8. WAI-ARIAを⼿軽に賢く実装する
9. パンくずリストに正解はある︖
10. その他のキホンの「キ」 ページタイトル、⽂書構造、リンクテ
キスト、拡⼤表⽰、フォームのラベル
© Infoaxia, Inc. 2016. All rights reserved.
今取り組んでいるのは…
フォーム
27
© Infoaxia, Inc. 2016. All rights reserved.
⼼強い味⽅。
たにぐち まこと さん( H2O space )
© Infoaxia, Inc. 2016. All rights reserved.
MACO FormMore Accessible for Customers Online
MAKOTO MAKOTO RICO
28
© Infoaxia, Inc. 2016. All rights reserved.
MACO Form 2つの開発コンセプト
1. あえてWAI-ARIAを使わない
WAI-ARIAのサポートが⼗分ではない利⽤環境でも使えること
できるかぎりユーザーの利⽤環境を限定しない
© Infoaxia, Inc. 2016. All rights reserved.
MACO Form 2つの開発コンセプト
1. あえてWAI-ARIAを使わない
WAI-ARIAのサポートが⼗分ではない利⽤環境でも使えること
できるかぎりユーザーの利⽤環境を限定しない
2. ユーザビリティテストでよく⾒つかる問題点を解決
ユーザーの利⽤環境は多種多様
画⾯を⾒ているスクリーンリーダーを使⽤しているマウス&キーボードで操作しているキーボードだけで操作しているタッチ操作している
しかし、問題点には共通点が意外と多い︕
29
© Infoaxia, Inc. 2016. All rights reserved.
1. 必須項⽬を分かりやすく⽰す
必須 or 任意が分かりにくい ⾚字で【必須】と明⽰した
お問い合わせ
(例)⼭⽥ 太郎
(例)ヤマダ タロウ
(例)株式会社⼭⽥製作所
(例)総務部総務課
名前 *
フリガナ(カタカナ) *
会社名
所属部署
お問い合わせ
(例)⼭⽥ 太郎
(例)ヤマダ タロウ
(例)株式会社⼭⽥製作所
(例)総務部総務課
名前 [必須]
フリガナ(カタカナ) [必須]
会社名
所属部署
© Infoaxia, Inc. 2016. All rights reserved.
2. プレースホルダーをラベルにしない
ラベルがplaceholder属性の場合⼀度⼊⼒するとラベルが消えてしまう…
ラベルはラベル(label要素) プレースホルダーの⽂字⾊を指定して
コントラスト⽐を確保
お問い合わせ
名前
フリガナ(カタカナ)
会社名
所属部署
Eメールアドレス
問い合わせ内容
お問い合わせ
(例)⼭⽥ 太郎
(例)ヤマダ タロウ
(例)株式会社⼭⽥製作所
(例)総務部総務課
名前 [必須]
フリガナ(カタカナ) [必須]
会社名
所属部署
30
© Infoaxia, Inc. 2016. All rights reserved.
3. ⼊⼒エラーは エラー項⽬の場所で⽰す
エラーの説明とエラー項⽬が離れていて修正しにくい
⼊⼒エラーであることを該当箇所で⽰す
お問い合わせ
⼭⽥ 太郎
(例)ヤマダ タロウ
名前 *
フリガナ(カタカナ) *
⼊⼒エラー フリガナが⼊⼒されていません。 都道府県が選択されていません。 Eメールアドレスの⼊⼒に誤りが
あります。
ヤマダ タロウ
taro.yamada@example
株式会社⼭⽥製作所
フリガナ(カタカナ) *
Eメールアドレス *
会社名
⼭⽥ 太郎
メールアドレスの書式になっていません。正しく入力してください。
所属部署
© Infoaxia, Inc. 2016. All rights reserved.
4. エラー画⾯を出して エラーの項⽬だけ表⽰する
⼊⼒中にエラーをリアルタイムで通知しても気づかない
エラー画⾯でエラー項⽬だけを表⽰して修正しやすくする
ヤマダ タロウ
taro.yamada@example
株式会社⼭⽥製作所
フリガナ(カタカナ) *
Eメールアドレス *
会社名
⼭⽥ 太郎
入力内容に誤りがあります。
所属部署
taro.yamada@example
Eメールアドレス *
メールアドレスの書式になっていません。正しく入力してください。
⼊⼒エラーの修正次の項⽬が⼊⼒エラーです。⼊⼒内容を修正して[⼊⼒内容の確認]ボタンを押してください。
⼊⼒内容の確認
エラー項目 →
31
© Infoaxia, Inc. 2016. All rights reserved.
5. エラーメッセージは 具体的かつ簡潔な内容にする
エラーメッセージを読んでも修正⽅法が分からない
ユーザーを困らせないエラーメッセージ 3つの条件︕
1. どこがエラー(Where)2. なぜエラー(Why)3. どのように修正(How)
⽂⾔の⾒直しだけで離脱率が下がることも
お届け先の⼊⼒
⼭⽥ 太郎
(例)ヤマダ タロウ
宛名 *
フリガナ(カタカナ) *
⼊⼒エラー 住所が正しくありません。 電話番号が正しくありません。 ⽇付が正しくありません。
郵便番号 *
© Infoaxia, Inc. 2016. All rights reserved.
MACO FormMore Accessible for Customers Online
MAKOTO MAKOTO RICO
32
© Infoaxia, Inc. 2016. All rights reserved.
2017年のアクセシビリティ
© Infoaxia, Inc. 2016. All rights reserved.
TBD (To Be Developed)
WCAG 2.1CognitiveLow VisionMobile
障害者差別解消法
33
© Infoaxia, Inc. 2016. All rights reserved.
仙台
秋田
東京
浜松
名古屋
大阪岡山
高松
福岡
札幌
横浜詳しくは Webで :-)
http://bit.ly/2gh4D8j