Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

チームで取り組む!アクセシビリティコーディング&デザイン

2,096 views

Published on

2017/11/11に開催されたJapan Accessibility Conferenceの登壇資料です。

Published in: Internet
  • Be the first to comment

  • Be the first to like this

チームで取り組む!アクセシビリティコーディング&デザイン

  1. 1. チームで取り組む! アクセシビリティコーディング&デザイン ⼩林⼤輔 & 伊敷 政英
  2. 2. ⾃⼰紹介 ⼩林⼤輔 サイボウズ kintoneチーム @sukoyakarizumu 伊敷 政英 Cocktailz
  3. 3. アクセシビリティの広がり ひとりで取り組む チームで取り組む 全社で取り組む
  4. 4. アクセシブルな コーディング&デザイン
  5. 5. 今回テストするWebサービス
  6. 6. ユーザビリティテスト
  7. 7. キーボード操作に要注意! キーボード操作不能 ハイライト視認不能
  8. 8. div要素やspan要素をボタンに⾒せかけていませんか? キーボード操作 <div onClick=...>さらに表示</div>
  9. 9. div要素やspan要素のままで対応するとしたら… キーボード操作 <div onClick=... tabindex=“0” onKeyup=... role=“button” >さらに表示</div>
  10. 10. ボタンにはbutton要素を使おう キーボード操作 <button onClick=...>さらに表示</button>
  11. 11. ⾒出しやリスト ⾒出しとしてマークアップ リストとしてマークアップ
  12. 12. キーボードフォーカス順序 ▌CSSで要素の位置を変えた場合は要注意 ▌Tabキーを使って検証しよう
  13. 13. コントラスト⽐ ▌Color Contrast Checkerなどで確認しよう
  14. 14. 1. 適切なマークアップをしよう 2. 多様なユーザに注意をはらってデザインしよう スクリーンリーダー、ロービジョン、拡⼤… 3. 百聞は⼀⾒に如かず!ユーザを観察しよう アクセシブルコーディング&デザインのポイント
  15. 15. チームで アクセシビリティに取り組む⽅法
  16. 16. ▌ ヘッダーのキーボードフォーカス順序を改修! ▌ 「さらに読む」をキーボード操作できるように改修! ▌ 「+」ボタンをキーボード操作できるように改修! ▌ プルダウンのフォーカスが⾒えるように改修! 11/12 アップデートでアクセシビリティを改善!
  17. 17. チームで取り組むための2つの要素 ま マインドルール
  18. 18. ルールづくりの観点1 どの程度の厳密さを求めるか?
  19. 19. 25項⽬(A基準)
  20. 20. コンテンツのすべての機能は、個々のキーストロークに特定の タイミングを要することなく、キーボードインタフェースを通じ て操作可能である。ただし、その根本的な機能が利⽤者の動作に よる始点から終点まで続く⼀連の軌跡に依存して実現されている 場合は除く。 (レベル A) WCAG2.0の例 2.1.1 キーボード
  21. 21. ▌ ⽂書の分量が多い ▌ ⽂書が難解で抽象的 ▌ プロダクトによっては関係ない項⽬が書かれている (動画、⾳声、閃光、アニメーションなど) WCAG2.0をいきなり適⽤しようとすると…
  22. 22. ルールづくりの観点2 ルールを誰に守ってもらうか?
  23. 23. 他の職能に説明することから逃げない 上流も下流も巻き込まないと、アクセシビリティ対応できない 要件定義 デザイン 実装 テスト
  24. 24. kintoneのアクセシビリティチェックリスト デザイン チェックリスト 実装 チェックリスト 実装 チェックリスト 詳説
  25. 25. 1. ⾒出し 2. キーボード操作 3. 画像 4. 感覚⾮依存(⾊、位置、形など) 5. 拡⼤と縮⼩ 6. 動きのあるコンテンツ kintone デザインチェックリスト⽬次
  26. 26. デザインチェックリストの例 l 複雑な画像を使っていない (画像を⾮表⽰にしても、周囲の⽂章や代替テキストによって 同等の情報を伝えることができる) l ⽂字を画像で表現していない 画像
  27. 27. kintone アクセシビリティ実装チェックリスト⽬次 1. マークアップの原則 2. 画像 3. ボタンとリンク 4. ⼊⼒フォーム 5. ⾒出し 6. ホバーとフォーカス
  28. 28. 実装チェックリストの例 ボタンとリンク l キーボードのみで操作可能にする l ページ遷移する場合: a要素を使う.必ずhref属性をつける l ページ遷移しない処理を⾏う場合: button要素を使う (div要素やspan要素を使わない)
  29. 29. チームで取り組むための2つの要素 ま マインドルール
  30. 30. 当事者が使っている様⼦をみんなで観察する
  31. 31. 外部の⽅による講演
  32. 32. 他に優先すべきタスクがある 今のプロダクトにとって重要?
  33. 33. Accessibility = Access + Ability
  34. 34. ユーザは、わたしたちの製品にアクセスすることで 何にアクセスしようとしているのか?
  35. 35. サイボウズの理想 チームワークあふれる社会を創る
  36. 36. ユーザ サイボウズ製品 チーム
  37. 37. サイボウズにとって、アクセシビリティとは 「ユーザがチームにアクセスできる能⼒」
  38. 38. アクセシビリティを確保することは 「チームに参加したい」というユーザのねがいを 尊重すること
  39. 39. チームでアクセシビリティに取り組むために ü当事者の使い⽅をみんなで観察しよう üアクセシビリティに取り組む意味を考えよう ま ü無理のない項⽬数からスタートしよう ü多くの職能を巻き込もう
  40. 40. おわり

×