2020年5月1日に行われた、サイボウズ開発運用研修の発表資料です。 以下のリンクからPPT形式の資料をダウンロードできます： https://cybozu-my.sharepoint.com/:p:/g/personal/daisuke-kobayashi_cybozu_onmicrosoft_com/Ed2m5Do6A6VLi_bxG-VCacIBMOQv-2TgTtqhDuwddXvG1A?e=eiR9WU
サイボウズ開発運⽤研修 アクセシビリティ⼩林⼤輔デザイン＆リサーチアクセシビリティエキスパート
View Slide
• アクセシビリティとは︖• マシンリーダブル・ヒューマンリーダブルを理解する• アクセシビリティ確保 基本の「キ」10項⽬を理解するこの講義で学ぶこと復習
アクセシビリティとは︖復習
アクセシビリティ＝障害者・⾼齢者のための特別対応︖
アクセシビリティとは障害者・⾼齢者を含めて「すべての⼈」が製品やサービスを⽀障なく利⽤できること
⾒るロービジョン 全盲話す⾔語障害聞くろう難聴読むディスレクシア集中するうつADHD動く肢体不⾃由⾻折・怪我
⾒るロービジョン 全盲話す⾔語障害聞くろう難聴読むディスレクシア集中するうつADHD動く肢体不⾃由⾻折・怪我⼩さい画⾯電⾞内時差海外出張在宅ワーク⽇光下急な予定育児中満員電⾞運転中英⽂ 騒⾳静⾳環境
サイボウズの理想チームワークあふれる社会を創る
Accessibility = Access + Ability
ユーザは、わたしたちの製品にアクセスすることで何にアクセスしようとしているのか︖
ユーザ サイボウズ製品 チーム
サイボウズにとって、アクセシビリティとは「ユーザがチームにアクセスできる能⼒」
アクセシビリティを確保することは「チームに参加したい」というユーザのねがいを尊重すること
アクセシビリティに取り組むには︖
アクセシビリティ＝特別な対応︖
コンテンツがユーザに届くまで制作者 ユーザハードウェア（PC・スマホ…)ソフトウェア(ブラウザ・⽀援技術)⼊出⼒機器感覚情報（視覚・聴覚・触覚…）Webコンテンツ(HTML・CSS・JS…)
アクセシビリティを⾼める2つの要素マシンリーダブルヒューマンリーダブル制作者 ユーザ
マシンリーダブル
これでよいだろうか
画像の内容をブラウザに理解させよう
⾒出しであることをブラウザに理解させよう
ヒューマンリーダブル
1.4 判別可能コンテンツを、利⽤者にとって⾒やすく、聞きやすいものにすることこれには前景と背景を区別することも含む1. 知覚可能
2.2 ⼗分な時間利⽤者がコンテンツを読み、使⽤するために⼗分な時間を提供すること2.3 発作の防⽌発作を起こすようなコンテンツを設計しないこと2.4 ナビゲーション可能利⽤者がナビゲートしたり、コンテンツを探し出したり、 現在位置を確認したりすることを⼿助けする⼿段を提供すること2. 理解可能
3.1 読みやすさテキストのコンテンツを読みやすく理解可能にすること3.2 予測可能Webページの表⽰や挙動を予測可能にすること3.3 ⼊⼒⽀援⼊⼒者の間違いを防ぎ、修正を⽀援すること3. 操作可能
ある製品が、指定された利⽤者によって、指定された利⽤の状況下で、指定された⽬的を達成するために⽤いられる際の、有効さ、効率及び利⽤者の満⾜度の度合い。⽇本産業規格参考︓ユーザビリティ
アクセシビリティ確保 基本の「キ」
https://weba11y.jp/know-how/10basics/10basics_index/
• スクリーンリーダーが⼀番最初に読み上げる重要な情報(全盲のユーザは、ページを俯瞰してみることが難しい)• ブラウザのタブやお気に⼊りの⽂⾔としても使われる• 各ページに固有で、別のWebサイトと区別できるように1. 適切なページタイトルをつけよう社長挨拶 – サイボウズ株式会社
• スクリーンリーダーは「⾒出し」「リスト」など、構造を読む• ⾒出しごとにジャンプするなど、読み⾶ばすことができる2. ⾒出しやリストなどの⽂章構造をマークアップしようkintoneアプリストア
• リンク⽂⾔だけで意味がわかるようにする• 不適切な例︓「ここをクリック」「さらに表⽰」「詳細を⾒る」…• ⽂⾔を変えるのが難しければ、周囲の⾒出しと組み合わせる3. リンクテキストは、リンク先がわかる⽂⾔にする
• すべてのimg要素に適切なalt属性をつける• 装飾のみであればalt=""をつける4 情報を伝えている画像に代替テキストを提供する
スクリーンリーダーで聞いてみようaltなしhttps://jsfiddle.net/sukoyakarizumu/6zjcLs7u/alt=""alt="画像" alt="サイボウズ"
代替テキストの例 - 検索ボタン
代替テキストの例 – 円グラフ
代替テキストを省略する例Home
• ⾊のみに依存した情報を提供しない5 情報を伝える⾊の使い⽅に注意する
" " " " " " " " " "⽂字と背景⾊のコントラスト⽐を4.5:1以上にする5 情報を伝える⾊の使い⽅に注意する
Chrome Developer Toolで測定できるコントラスト⽐の測定
画⾯を200%拡⼤しても、内容を理解・操作できるか6 ユーザがコンテンツを拡⼤表⽰できるようにする
7 キーボードだけでも操作できるようにする保存
属性で修正しようとすると…tabindex="0" onKeyUp=… role="button">保存
クリックできる要素は a要素 や button要素 を使おう適切な要素を使おう保存
• ブラウザのデフォルトのCSSではキーボードが視認できる• outline: none; すると、デフォルトスタイルが消える• この場合、必ず:focusスタイルをつける• reset.css / normalize.css を使う場合は要注意︕キーボード操作を視認できるようにしようa:focus { text-decoration: underline; }
http://outlinenone.com/
• スクリーンリーダーはフォームにフォーカスしたときラベルを読み上げる• ラベルがついていないと、何を⼊⼒して良いかわからない8 フォームコントロールのラベルや説明をマークアップするユーザ名
ラベルをつける⽅法ラベルが配置できるときユーザ名ラベルが配置できないときplaceholder="ユーザ名を⼊⼒">
• ユーザがエラーが発⽣した箇所を特定できるようにする• ユーザがエラーメッセージを読んで修正⽅法を理解できるようにする• エラーを未然に防ぐ9 エラーメッセージではエラー箇所と修正⽅法を明⽰する
エラーの発⽣箇所や修正⽅法をわかりやすくするsukoyakarizum…メールアドレス*********パスワード[email protected]メールアドレス********パスワードエラーパスワードは8⽂字以上です必須
• 制約は⼊⼒前に⽰そう• ユーザの⼿間を省こう• ユーザの記憶をサポートしようエラーを未然に防ぐ
10 動画にキャプション（字幕）をつける• 「⾳声のみ」でも「映像のみ」でも、コンテンツを理解できるようにする
• 登場⼈物の発話内容• BGMなどの⾳楽• 拍⼿、歓声• 環境⾳ (電話の呼出⾳、ドアが開閉する⾳、チャイム、雷鳴など)キャプションに含めるべき情報
• アクセシビリティとは︖• マシンリーダブル・ヒューマンリーダブルを理解する• アクセシビリティ確保 基本の「キ」10項⽬を理解するこの講義で学んだこと復習
アクセシビリティにより深く取り組むには︖
• デザイニングWebアクセシビリティアクセシビリティ教科書の決定版• コーディングWebアクセシビリティよりマシンリーダブルなHTMLを書くために• インクルーシブHTML+CSS&JavaScript優れた書籍を読もう
• Web Content Accessibility Guideline 2.1https://waic.jp/docs/WCAG21/• W3Cが勧告しているアクセシビリティ基準リスト• 各国のアクセシビリティに関する法律は、この基準を採⽤ガイドラインを読んでみよう
多様なユーザの使い⽅を知ろう
sukoyakarizumu
masa5555
lwug
yokawasa
leveragestech
kazamori
cmusudakeisuke
niftycorp
replu
h1kita
k1low
inureyes
hiashisan
carmenintech
cassininazir
quramy
maggiecrowley
dotmariusz
bkeepers
zenorocha
lemiorhan
shlominoach
eileencodes
trallard
productmarketing