Microsoft PowerPoint - Shift Video.ppt [互換モード]

Size: px

Start display at page:

Download "Microsoft PowerPoint - Shift Video.ppt [互換モード]"

えつみいくのや
4 years ago
Views:

1 アクセシビリティ 2016 年のうちに再確認しておきたいキホンのキ 1

2 植真 ( インフォアクシア ) 千貫りこ (KICKS Web) 2016 年の Web アクセシビリティ 1. JIS X の改定 2. 障害者差別解消法の施 3. みんなの公共サイト運ガイドラインの公開 4. 企業におけるWebアクセシビリティの取り組み 5. HTML5とWAI-ARIAによる実装が加速 2

JIS X 8341-3:2016 2016 年 3 22 公国際規格 ISO/IEC 40500:2012 (= W3C WCAG 2.

0 の本語訳を幅に直し JIS X 8341-3:2016 解説 http://waic.

者からの改善要望があれば個別対応公的機関は法定義務間事業者は努義務治体の Web サイトに対して改善要望が出され始めている Web

3 JIS X : 年 3 22 公国際規格 ISO/IEC 40500:2012 (= W3C WCAG 2.0 ) と同じ内容の致規格に JIS X = WCAG 2.0 の本語訳達成基準には切の変更ナシただし WCAG 2.0 の本語訳を幅に直し JIS X :2016 解説障害者差別解消法 2016 年 4 1 施利者からの改善要望があれば個別対応公的機関は法定義務間事業者は努義務治体の Web サイトに対して改善要望が出され始めている Web アクセシビリティの確保は先進国の多くでは法律によって義務化されている障害を理由とする差別の解消の推進 3

ウェブアクセシビリティ取組確認評価表を新たに提供採点により毎年取り組み状況を評価し公表 http://www.

4 みんなの公共サイト運ガイドライン 2016 年 4 20 公開総務省が作成公的機関職員向けの JIS 対応順書 2018 年 3 末までにレベル AA 準拠を推奨先進国の多くで義務化されているレベルと同じウェブアクセシビリティ取組確認評価表を新たに提供採点により毎年取り組み状況を評価し公表 Web アクセシビリティの針や試験結果を公開 4

5 サイボウズサイバーエージェント 5

com/post/144834658627/accessibility HTML5

6 ヤフーのアクセシビリティ帯の取り組み HTML5 による実装が般化し WAI-ARIA の実装も加速コーダー書

HTML5 による実装が般化し WAI-ARIA の実装も加速コーダー書 2016 http://www.slideshare.

7 HTML5 による実装が般化し WAI-ARIA の実装も加速コーダー書 WAI-ARIA 本語訳 : 7

8 WAI-ARIA 本語訳 : 品質としてアクセシビリティを感覚的に意識している 52% コーダー書

個的にはエーイレブンワイ Webアクセシビリティの情報提供サイトエーイレブンワイ http://weba11y.

9 個的にはエーイレブンワイ Webアクセシビリティの情報提供サイトエーイレブンワイ実例と体験談から学ぶアクセシビリティをめるコツ 2016 年のうちに再確認しておきたいキホンのキ 9

10 まずはページタイトル Web ページのセクションをマシンリーダブルにホーム基礎知識ヘッダー <header> ナビゲーション <nav> ホーム基礎知識メインコンテンツ <main> 補 <aside> フッター <footer> 10

navigation >{ パンくずリスト }</nav> <main role= main > { ここにメインコンテンツ } </main> <nav role= navigation >{

11 スクリーンリーダーでページ内のセクションを移動 NVDA(Windows) VoiceOver(iOS) <header role= banner > 当はランドマーク role を併 <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> 11

12 参考 : スクリーンリーダーは PC-Talker のシェアが断トツ視覚障害者の携帯電話スマートフォンタブレットパソコン利状況調査 HTML5 のセクションをす主な要素 & 対応するランドマーク role header banner nav navigation main main aside complementary footer contentinfo 12

13 スクリーンリーダーのユーザーは旧バージョンを使い続ける説 Results of the 2016 GOV.UK assistive technology survey まずはページタイトル 13

14 ナビゲーションの区別がつかない NVDA(Windows) ラベルを付けてそれぞれの違いをマシンリーダブルに <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> 14

15 スクリーンリーダーでページ内のセクションを移動 aria-label aria-label aria-labelledby Before After まずはページタイトル 15

16 代替テキストによって画像と同等の情報をマシンリーダブルに画像にある字情報を alt 属性に記述する <img src= banner.png alt= CSS Nite > Shift 代替テキストによって画像と同等の情報をマシンリーダブルにそのページに写真があることも情報 <img src= photo.jpg alt= 写真 : 林製薬のようじ 60 本り > 16

まずはページタイトルリンク先が同じならつのリンクにまとめるキーボード操作回数が半分に減る <a href="http://amzn.

17 まずはページタイトルリンク先が同じならつのリンクにまとめるキーボード操作回数が半分に減る <a href=" <img src= book.jpg" alt=""> <span> デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ </span> </a> 17

18 まずはページタイトル <img> 要素で SVG ファイルを指定するとき <img src="logo.svg" alt=" エーイレブンワイ " role="img"> <img> 要素に role= img をあえて指定 Safari の旧バージョンにあるバグ対策スクリーンリーダー VoiceOver が読み上げない Mac 版以上 ios 版以上だけが対象なら不要 18

19 まずはページタイトルフォーカスインジケータは常に表させるキーボード操作時にフォーカスの現在位置をすデフォルトでの表ドットやの矩形 = 分かりづらいこともある CSSで outline:none の指定があると表にキーボード操作時には致命的 19

20 フォーカスインジケータの表を強調してみたまずはページタイトル 20

21 場所を選ばないからこそのコントラストは重要 WAI-ARIAをまずはページタイトル手軽に賢く実装してみる 21

22 Accessibility Plugin for Bootstrap 3 Bootstrap Accessibility Plugin を使ってみたタブとタブパネル 22

23 Bootstrap Accessibility Plugin を使ってみたアコーディオンまずはページタイトル 23

24 パンくずリストは > ではなくでパンくずリスト 24

25 まずはページタイトルさらにこれらも実践できればだいぶアクセシブルページの内容が分かるページタイトルを記述する出しやリストなどの書構造をマークアップするリンク先が分かるリンクテキストにするユーザーがコンテンツを拡表できるようにするフォームコントロールのラベルをマークアップする 25

26 実例と体験談から学ぶアクセシビリティをめるコツ 1. ランドマーク role を使う 6. キーボードフォーカスえてる? 2. ナビゲーションにラベルをつける 3. 写真だと分かる代替テキスト 4. 画像リンクとテキストリンクを 1つにまとめる 5. SVGファイルには role= img をつける 7. のコントラストは4.5:1 以上 8. WAI-ARIAを軽に賢く実装する 9. パンくずリストに正解はある? 10. その他のキホンのキページタイトル書構造リンクテキスト拡表フォームのラベル今取り組んでいるのはフォーム 26

27 強い味たにぐちまことさん ( H2O space ) MACO Form More Accessible for Customers Online MAKOTO MAKOTO RICO 27

28 MACO Form 2 つの開発コンセプト 1. あえて WAI-ARIA を使わない WAI-ARIA のサポートが分ではない利環境でも使えることできるかぎりユーザーの利環境を限定しない MACO Form 2 つの開発コンセプト 1. あえて WAI-ARIA を使わない WAI-ARIA のサポートが分ではない利環境でも使えることできるかぎりユーザーの利環境を限定しない 2. ユーザビリティテストでよくつかる問題点を解決ユーザーの利環境は多種多様画をているスクリーンリーダーを使しているマウス & キーボードで操作しているキーボードだけで操作しているタッチ操作しているしかし問題点には共通点が意外と多い! 28

29 1. 必須項を分かりやすくす必須 or 任意が分かりにくい字で必須と明したお問い合わせ名前 * ( 例 ) 太郎フリガナ ( カタカナ ) * ( 例 ) ヤマダタロウ会社名 ( 例 ) 株式会社製作所所属部署 ( 例 ) 総務部総務課お問い合わせ名前 [ 必須 ] ( 例 ) 太郎フリガナ ( カタカナ ) [ 必須 ] ( 例 ) ヤマダタロウ会社名 ( 例 ) 株式会社製作所所属部署 ( 例 ) 総務部総務課 2. プレースホルダーをラベルにしないラベルが placeholder 属性の場合度するとラベルが消えてしまうラベルはラベル (label 要素 ) プレースホルダーの字を指定してコントラストを確保お問い合わせ名前フリガナ ( カタカナ ) 会社名所属部署 Eメールアドレス問い合わせ内容お問い合わせ名前 [ 必須 ] ( 例 ) 太郎フリガナ ( カタカナ ) [ 必須 ] ( 例 ) ヤマダタロウ会社名 ( 例 ) 株式会社製作所所属部署 ( 例 ) 総務部総務課 29

30 3. エラーはエラー項の場所ですエラーの説明とエラー項が離れていて修正しにくいお問い合わせエラーフリガナがされていません都道府県が選択されていません Eメールアドレスのに誤りがあります名前 * 太郎フリガナ ( カタカナ ) * ( 例 ) ヤマダタロウエラーであることを該当箇所です太郎フリガナ ( カタカナ ) * ヤマダタロウ Eメールアドレス * メールアドレスの書式になっていません正しく入力してください taro.yamada@example 会社名株式会社製作所所属部署 4. エラー画を出してエラーの項だけ表する中にエラーをリアルタイムで通知しても気づかない太郎フリガナ ( カタカナ ) * ヤマダタロウエラー画でエラー項だけを表して修正しやすくするエラーの修正次の項がエラーです内容を修正して [ 内容の確認 ] ボタンを押してください Eメールアドレス * taro.yamada@example 入力内容に誤りがあります会社名株式会社製作所 E メールアドレス * メールアドレスの書式になっていません正しく入力してください taro.yamada@example 内容の確認所属部署 30

31 5. エラーメッセージは具体的かつ簡潔な内容にするエラーメッセージを読んでも修正法が分からないお届け先のエラー住所が正しくありません電話番号が正しくありません付が正しくありません宛名 * 太郎フリガナ ( カタカナ ) * ( 例 ) ヤマダタロウユーザーを困らせないエラーメッセージ 3つの条件! 1. どこがエラー (Where) 2. なぜエラー (Why) 3. どのように修正 (How) の直しだけで離脱率が下がることも郵便番号 * MACO Form More Accessible for Customers Online MAKOTO MAKOTO RICO 31

32 2017 年のアクセシビリティ TBD (To Be Developed) WCAG 2.1 Cognitive Low Vision Mobile 障害者差別解消法 32

33 札幌秋田仙台 Web :-) 福岡岡山高松大阪浜松名古屋東京 33

JIS X :2016 附属書 JB に基づく試験結果表示 ( ウェブページ単位 ) 規格の規格番号及び改正年 JIS X :2016 対象範囲以下のウェブページただし外の以

JIS X :2016 附属書 JB に基づく試験結果表示 ( ウェブページ単位 ) 規格の規格番号及び改正年 JIS X :2016 対象範囲以下のウェブページただし外の以 JIS X 8341-3:2016 附属書 JB に基づく試験結果表示 ( ウェブページ単位 ) 規格の規格番号及び改正年 JIS X 8341-3:2016 対象範囲 https://www.amed.go.jp/ 以下のウェブページただし https://www.amed.go.jp/ 外の以下のウェブページ外部サービスを利用したお問い合わせフォーム及び Ustream.tv で公開しているコンテンツは対象範囲外とします