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

by Daisuke Kobayashi

Slide 1

Slide 1 text

サイボウズ開発運⽤研修アクセシビリティ⼩林⼤輔デザイン＆リサーチアクセシビリティエキスパート

Slide 2

Slide 2 text

• アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保基本の「キ」10項⽬を理解するこの講義で学ぶこと復習

Slide 3

Slide 3 text

アクセシビリティとは︖ 復習

Slide 4

Slide 4 text

アクセシビリティ＝障害者・⾼齢者のための特別対応︖

Slide 5

Slide 5 text

アクセシビリティとは障害者・⾼齢者を含めて「すべての⼈」が製品やサービスを⽀障なく利⽤できること

Slide 6

Slide 6 text

⾒るロービジョン全盲話す⾔語障害聞くろう難聴読むディスレクシア集中するうつ ADHD 動く肢体不⾃由⾻折・怪我

Slide 7

Slide 7 text

⾒るロービジョン全盲話す⾔語障害聞くろう難聴読むディスレクシア集中するうつ ADHD 動く肢体不⾃由⾻折・怪我⼩さい画⾯電⾞内時差海外出張在宅ワーク⽇光下急な予定育児中満員電⾞運転中英⽂騒⾳静⾳環境

Slide 8

Slide 8 text

サイボウズの理想チームワークあふれる社会を創る

Slide 9

Slide 9 text

Accessibility = Access + Ability

Slide 10

Slide 10 text

ユーザは、わたしたちの製品にアクセスすることで何にアクセスしようとしているのか︖

Slide 11

Slide 11 text

ユーザサイボウズ製品チーム

Slide 12

Slide 12 text

サイボウズにとって、アクセシビリティとは「ユーザがチームにアクセスできる能⼒」

Slide 13

Slide 13 text

アクセシビリティを確保することは「チームに参加したい」というユーザのねがいを尊重すること

Slide 14

Slide 14 text

アクセシビリティに取り組むには︖

Slide 15

Slide 15 text

アクセシビリティ＝特別な対応︖

Slide 16

Slide 16 text

コンテンツがユーザに届くまで制作者ユーザハードウェア（PC・スマホ…) ソフトウェア (ブラウザ・⽀援技術) ⼊出⼒機器感覚情報（視覚・聴覚・触覚…） Webコンテンツ (HTML・CSS・JS…)

Slide 17

Slide 17 text

アクセシビリティを⾼める2つの要素マシンリーダブルヒューマンリーダブル制作者ユーザ

Slide 18

Slide 18 text

マシンリーダブル

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

これでよいだろうか

Slide 21

Slide 21 text

画像の内容をブラウザに理解させよう kintoneアプリストア

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

⾒出しであることをブラウザに理解させよう

Slide 24

Slide 24 text

ヒューマンリーダブル

Slide 25

Slide 25 text

1.4 判別可能コンテンツを、利⽤者にとって⾒やすく、聞きやすいものにすることこれには前景と背景を区別することも含む 1. 知覚可能

Slide 26

Slide 26 text

2.2 ⼗分な時間利⽤者がコンテンツを読み、使⽤するために⼗分な時間を提供すること 2.3 発作の防⽌発作を起こすようなコンテンツを設計しないこと 2.4 ナビゲーション可能利⽤者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを⼿助けする⼿段を提供すること 2. 理解可能

Slide 27

Slide 27 text

3.1 読みやすさテキストのコンテンツを読みやすく理解可能にすること 3.2 予測可能 Webページの表⽰や挙動を予測可能にすること 3.3 ⼊⼒⽀援⼊⼒者の間違いを防ぎ、修正を⽀援すること 3. 操作可能

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

ある製品が、指定された利⽤者によって、指定された利⽤の状況下で、指定された⽬的を達成するために⽤いられる際の、有効さ、効率及び利⽤者の満⾜度の度合い。⽇本産業規格参考︓ユーザビリティ

Slide 30

Slide 30 text

アクセシビリティ確保基本の「キ」

Slide 31

Slide 31 text

https://weba11y.jp/know- how/10basics/10basics_index/

Slide 32

Slide 32 text

• スクリーンリーダーが⼀番最初に読み上げる重要な情報 (全盲のユーザは、ページを俯瞰してみることが難しい) • ブラウザのタブやお気に⼊りの⽂⾔としても使われる • 各ページに固有で、別のWebサイトと区別できるように 1. 適切なページタイトルをつけよう社長挨拶 – サイボウズ株式会社

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

• スクリーンリーダーは「⾒出し」「リスト」など、構造を読む • ⾒出しごとにジャンプするなど、読み⾶ばすことができる 2. ⾒出しやリストなどの⽂章構造をマークアップしよう

kintoneアプリストア

Slide 35

Slide 35 text

• リンク⽂⾔だけで意味がわかるようにする • 不適切な例︓「ここをクリック」「さらに表⽰」「詳細を⾒る」… • ⽂⾔を変えるのが難しければ、周囲の⾒出しと組み合わせる 3. リンクテキストは、リンク先がわかる⽂⾔にする

Slide 36

Slide 36 text

• すべてのimg要素に適切なalt属性をつける • 装飾のみであればalt=""をつける 4 情報を伝えている画像に代替テキストを提供する

Slide 37

Slide 37 text

スクリーンリーダーで聞いてみよう altなし https://jsfiddle.net/sukoyakarizumu/6zjcLs7u/ alt="" alt="画像" alt="サイボウズ"

Slide 38

Slide 38 text

代替テキストの例 - 検索ボタン

Slide 39

Slide 39 text

Pie chart:
Browser Share - Internet Explorer 25%,
Firefox 40%, Chrome 25%, Safari 6% and Opera
4%.

代替テキストの例 – 円グラフ

Slide 40

Slide 40 text

代替テキストを省略する例

Home

Slide 41

Slide 41 text

• ⾊のみに依存した情報を提供しない 5 情報を伝える⾊の使い⽅に注意する

Slide 42

Slide 42 text

" " " " " " " " " " ⽂字と背景⾊のコントラスト⽐を4.5:1以上にする 5 情報を伝える⾊の使い⽅に注意する

Slide 43

Slide 43 text

Chrome Developer Toolで測定できるコントラスト⽐の測定

Slide 44

Slide 44 text

画⾯を200%拡⼤しても、内容を理解・操作できるか 6 ユーザがコンテンツを拡⼤表⽰できるようにする

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

7 キーボードだけでも操作できるようにする

保存

Slide 48

Slide 48 text

属性で修正しようとすると…

保存

Slide 49

Slide 49 text

クリックできる要素は a要素や button要素を使おう適切な要素を使おう保存

Slide 50

Slide 50 text

• ブラウザのデフォルトのCSSではキーボードが視認できる • outline: none; すると、デフォルトスタイルが消える • この場合、必ず:focusスタイルをつける • reset.css / normalize.css を使う場合は要注意︕ キーボード操作を視認できるようにしよう a:focus { text-decoration: underline; }

Slide 51

Slide 51 text

http://outlinenone.com/

Slide 52

Slide 52 text

• スクリーンリーダーはフォームにフォーカスしたときラベルを読み上げる • ラベルがついていないと、何を⼊⼒して良いかわからない 8 フォームコントロールのラベルや説明をマークアップするユーザ名

Slide 53

Slide 53 text

ラベルをつける⽅法ラベルが配置できるときユーザ名ラベルが配置できないとき

Slide 54

Slide 54 text

• ユーザがエラーが発⽣した箇所を特定できるようにする • ユーザがエラーメッセージを読んで修正⽅法を理解できるようにする • エラーを未然に防ぐ 9 エラーメッセージではエラー箇所と修正⽅法を明⽰する

Slide 55

Slide 55 text

エラーの発⽣箇所や修正⽅法をわかりやすくする sukoyakarizum… メールアドレス* ******** パスワード [email protected] メールアドレス ******** パスワードエラーパスワードは8⽂字以上です必須

Slide 56

Slide 56 text

• 制約は⼊⼒前に⽰そう • ユーザの⼿間を省こう • ユーザの記憶をサポートしようエラーを未然に防ぐ

Slide 57

Slide 57 text

10 動画にキャプション（字幕）をつける • 「⾳声のみ」でも「映像のみ」でも、コンテンツを理解できるようにする

Slide 58

Slide 58 text

• 登場⼈物の発話内容 • BGMなどの⾳楽 • 拍⼿、歓声 • 環境⾳ (電話の呼出⾳、ドアが開閉する⾳、チャイム、雷鳴など) キャプションに含めるべき情報

Slide 59

Slide 59 text

• アクセシビリティとは︖ • マシンリーダブル・ヒューマンリーダブルを理解する • アクセシビリティ確保基本の「キ」10項⽬を理解するこの講義で学んだこと復習

Slide 60

Slide 60 text

アクセシビリティにより深く取り組むには︖

Slide 61

Slide 61 text

• デザイニングWebアクセシビリティアクセシビリティ教科書の決定版 • コーディングWebアクセシビリティよりマシンリーダブルなHTMLを書くために • インクルーシブHTML+CSS&JavaScript 優れた書籍を読もう

Slide 62

Slide 62 text

• Web Content Accessibility Guideline 2.1 https://waic.jp/docs/WCAG21/ • W3Cが勧告しているアクセシビリティ基準リスト • 各国のアクセシビリティに関する法律は、この基準を採⽤ガイドラインを読んでみよう

Slide 63

Slide 63 text

多様なユーザの使い⽅を知ろう