サイボウズ開発運用研修_アクセシビリティ(2020年度) / Cybozu Dev Traininng Accessibility 2020

2020年5月1日に行われた、サイボウズ開発運用研修の発表資料です。
以下のリンクからPPT形式の資料をダウンロードできます：
https://cybozu-my.sharepoint.com/:p:/g/personal/daisuke-kobayashi_cybozu_onmicrosoft_com/Ed2m5Do6A6VLi_bxG-VCacIBMOQv-2TgTtqhDuwddXvG1A?e=eiR9WU

1. サイボウズ 開発運⽤研修 アクセシビリティ ⼩林⼤輔 デザイン＆リサーチ アクセシビリティエキスパート
2. • アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保 基本の「キ」10項⽬を理解する この講義で学ぶこと 復習
3. アクセシビリティとは︖ 復習
4. アクセシビリティ＝障害者・⾼齢者のための特別対応︖
5. アクセシビリティとは 障害者・⾼齢者を含めて「すべての⼈」が 製品やサービスを⽀障なく利⽤できること
6. ⾒る ロービジョン 全盲 話す ⾔語障害 聞く ろう 難聴 読む ディスレクシア 集中する うつ ADHD 動く 肢体不⾃由 ⾻折・怪我
7. ⾒る ロービジョン 全盲 話す ⾔語障害 聞く ろう 難聴 読む ディスレクシア 集中する うつ ADHD 動く 肢体不⾃由 ⾻折・怪我 ⼩さい画⾯ 電⾞内 時差 海外出張 在宅ワーク ⽇光下 急な予定 育児中 満員電⾞ 運転中 英⽂ 騒⾳ 静⾳環境
8. サイボウズの理想 チームワークあふれる社会を創る
9. Accessibility = Access + Ability
10. ユーザは、わたしたちの製品にアクセスすることで 何にアクセスしようとしているのか︖
11. ユーザ サイボウズ製品 チーム
12. サイボウズにとって、アクセシビリティとは 「ユーザがチームにアクセスできる能⼒」
13. アクセシビリティを確保することは 「チームに参加したい」という ユーザのねがいを尊重すること
14. アクセシビリティに取り組むには︖
15. アクセシビリティ＝特別な対応︖
16. コンテンツがユーザに届くまで 制作者 ユーザ ハードウェア （PC・スマホ…) ソフトウェア (ブラウザ・⽀援技術) ⼊出⼒ 機器 感覚情報 （視覚・聴覚・触覚…） Webコンテンツ (HTML・CSS・JS…)
17. アクセシビリティを⾼める2つの要素 マシン リーダブル ヒューマン リーダブル 制作者 ユーザ
18. マシンリーダブル
20. これでよいだろうか <img src="appstore.png" />
21. 画像の内容をブラウザに理解させよう <img src="appstore.png" alt="kintoneアプリストア"/>
23. ⾒出しであることをブラウザに理解させよう <h2> <img src="appstore.png" alt="kintoneアプリストア" /> </h2>
24. ヒューマンリーダブル
25. 1.4 判別可能 コンテンツを、利⽤者にとって⾒やすく、聞きやすいものにすること これには前景と背景を区別することも含む 1. 知覚可能
26. 2.2 ⼗分な時間 利⽤者がコンテンツを読み、使⽤するために⼗分な時間を提供するこ と 2.3 発作の防⽌ 発作を起こすようなコンテンツを設計しないこと 2.4 ナビゲーション可能 利⽤者がナビゲートしたり、コンテンツを探し出したり、 現在位置 を確認したりすることを⼿助けする⼿段を提供すること 2. 理解可能
27. 3.1 読みやすさ テキストのコンテンツを読みやすく理解可能にすること 3.2 予測可能 Webページの表⽰や挙動を予測可能にすること 3.3 ⼊⼒⽀援 ⼊⼒者の間違いを防ぎ、修正を⽀援すること 3. 操作可能
29. ある製品が、指定された利⽤者によって、指定された利⽤の状 況下で、指定された⽬的を達成するために⽤いられる際の、 有効さ、効率及び利⽤者の満⾜度の度合い。 ⽇本産業規格 参考︓ユーザビリティ
30. アクセシビリティ確保 基本の「キ」
31. https://weba11y.jp/know- how/10basics/10basics_index/
32. • スクリーンリーダーが⼀番最初に読み上げる重要な情報 (全盲のユーザは、ページを俯瞰してみることが難しい) • ブラウザのタブやお気に⼊りの⽂⾔としても使われる • 各ページに固有で、別のWebサイトと区別できるように 1. 適切なページタイトルをつけよう <title>社長挨拶 – サイボウズ株式会社</title>
34. • スクリーンリーダーは「⾒出し」「リスト」など、構造を読む • ⾒出しごとにジャンプするなど、読み⾶ばすことができる 2. ⾒出しやリストなどの⽂章構造をマークアップしよう <h3>kintoneアプリストア</h3>
35. • リンク⽂⾔だけで意味がわかるようにする • 不適切な例︓「ここをクリック」「さらに表⽰」「詳細を⾒る」… • ⽂⾔を変えるのが難しければ、周囲の⾒出しと組み合わせる 3. リンクテキストは、リンク先がわかる⽂⾔にする
36. • すべてのimg要素に適切なalt属性をつける • 装飾のみであればalt=""をつける 4 情報を伝えている画像に代替テキストを提供する <img src="logo.png" alt="サイボウズ">
37. スクリーンリーダーで聞いてみよう altなし https://jsfiddle.net/sukoyakarizumu/6zjcLs7u/ alt="" alt="画像" alt="サイボウズ"
38. <button> <img src="images/search.png" alt="検索"> </button> 代替テキストの例 - 検索ボタン
39. <img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%."> 代替テキストの例 – 円グラフ
40. 代替テキストを省略する例 <img src="home.gif" alt="">Home
41. • ⾊のみに依存した情報を提供しない 5 情報を伝える⾊の使い⽅に注意する
42.    " " " " " " " " " " ⽂字と背景⾊のコントラスト⽐を4.5:1以上にする 5 情報を伝える⾊の使い⽅に注意する
43. Chrome Developer Toolで測定できる コントラスト⽐の測定
44. 画⾯を200%拡⼤しても、内容を理解・操作できるか 6 ユーザがコンテンツを拡⼤表⽰できるようにする
47. 7 キーボードだけでも操作できるようにする <div class="save-button" onclick=…>保存</div>
48. 属性で修正しようとすると… <div class="save-button" onclick=… tabindex="0" onKeyUp=… role="button">保存 </div>
49. クリックできる要素は a要素 や button要素 を使おう 適切な要素を使おう <button class="save-button" onclick=…> 保存 </button>
50. • ブラウザのデフォルトのCSSではキーボードが視認できる • outline: none; すると、デフォルトスタイルが消える • この場合、必ず:focusスタイルをつける • reset.css / normalize.css を使う場合は要注意︕ キーボード操作を視認できるようにしよう a:focus { text-decoration: underline; }
51. http://outlinenone.com/
52. • スクリーンリーダーはフォームにフォーカスしたとき ラベルを読み上げる • ラベルがついていないと、何を⼊⼒して良いかわからない 8 フォームコントロールのラベルや説明をマークアップする <span>ユーザ名</span> <input type="text" />
53. ラベルをつける⽅法 ラベルが配置できるとき <label for="username">ユーザ名</label> <input type="text" id="username"> ラベルが配置できないとき <input type="text" aria-label="ユーザ名" placeholder="ユーザ名を⼊⼒">
54. • ユーザがエラーが発⽣した箇所を特定できるようにする • ユーザがエラーメッセージを読んで 修正⽅法を理解できるようにする • エラーを未然に防ぐ 9 エラーメッセージではエラー箇所と修正⽅法を明⽰する
55. エラーの発⽣箇所や修正⽅法をわかりやすくする sukoyakarizum… メールアドレス* ******** パスワード sukoyakarizumu@gmail.com メールアドレス ******** パスワード エラー パスワードは8⽂字以上です 必須
56. • 制約は⼊⼒前に⽰そう • ユーザの⼿間を省こう • ユーザの記憶をサポートしよう エラーを未然に防ぐ
57. 10 動画にキャプション（字幕）をつける • 「⾳声のみ」でも「映像のみ」でも、 コンテンツを理解できるようにする
58. • 登場⼈物の発話内容 • BGMなどの⾳楽 • 拍⼿、歓声 • 環境⾳ (電話の呼出⾳、ドアが開閉する⾳、チャイム、雷鳴など) キャプションに含めるべき情報
59. • アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保 基本の「キ」10項⽬を理解する この講義で学んだこと 復習
60. アクセシビリティに より深く取り組むには︖
61. • デザイニングWebアクセシビリティ アクセシビリティ教科書の決定版 • コーディングWebアクセシビリティ よりマシンリーダブルなHTMLを書くために • インクルーシブHTML+CSS&JavaScript 優れた書籍を読もう
62. • Web Content Accessibility Guideline 2.1 https://waic.jp/docs/WCAG21/ • W3Cが勧告しているアクセシビリティ基準リスト • 各国のアクセシビリティに関する法律は、この基準を採⽤ ガイドラインを読んでみよう
63. 多様なユーザの使い⽅を知ろう