$30 off During Our Annual Pro Sale. View Details »

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

Daisuke Kobayashi

May 01, 2020
Tweet

More Decks by Daisuke Kobayashi

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Accessibility = Access + Ability

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. アクセシビリティ=特別な対応︖

    View Slide

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

    View Slide

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

    View Slide

  18. マシンリーダブル

    View Slide

  19. View Slide

  20. これでよいだろうか

    View Slide

  21. 画像の内容をブラウザに理解させよう

    View Slide

  22. View Slide

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



    View Slide

  24. ヒューマンリーダブル

    View Slide

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

    View Slide

  26. 2.2 ⼗分な時間
    利⽤者がコンテンツを読み、使⽤するために⼗分な時間を提供するこ

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

    View Slide

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

    View Slide

  28. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide




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

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

  45. View Slide

  46. View Slide

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

    View Slide

  48. 属性で修正しようとすると…
    tabindex="0" onKeyUp=… role="button">保存

    View Slide

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

    保存

    View Slide

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

    View Slide

  51. http://outlinenone.com/

    View Slide

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

    View Slide

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

    ラベルが配置できないとき
    placeholder="ユーザ名を⼊⼒">

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide