Pro Yearly is on sale from $80 to $50! »

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

サイボウズ開発運用研修_アクセシビリティ(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

Dbe3bc2c72aa0b8175561b3a948a80fb?s=128

Daisuke Kobayashi

May 01, 2020
Tweet

Transcript

  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. マシンリーダブル

  19. None
  20. これでよいだろうか <img src="appstore.png" />

  21. 画像の内容をブラウザに理解させよう <img src="appstore.png" alt="kintoneアプリストア"/>

  22. None
  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.

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

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

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

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

    – サイボウズ株式会社</title>
  33. None
  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 ユーザがコンテンツを拡⼤表⽰できるようにする

  45. None
  46. None
  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. 多様なユーザの使い⽅を知ろう