インターンから2年 新卒フロントエンドエンジニアから見た サイボウズのアクセシビリティ

Transcript

1. インターンから2年 新卒フロントエンドエンジニアから見た サイボウズのアクセシビリティ
2. 自己紹介 名前 たくぼう 所属 サイボウズ kintone開発 アプリチーム 経歴 2024年 インターン → 2026年 新卒入社 2
3. 目次 01 サイボウズがアクセシビリティに取り組む理由 02 表とグラフを切り替えるタブ実装 03 ユーザー・組織選択改善 04 実際に改善に取り組んでみて感じたこと 3
4. サイボウズがアクセシビリティに 取り組む理由
5. すべての人がチームにアクセスできる状態 リリリリリリリリリリリリ リリ リリリリリリリリ リ リ リリ ・騒 騒騒騒 騒騒 騒騒騒 ・リリリリ リリ リリリリ リリリリ リ リリ リリリ リリ … 騒 騒騒騒 騒 騒騒 騒 騒 騒騒騒騒騒 リ リリリリ リリ リリリリ リリ リリリリ リリ ・聴力が低く、製品内の音声が聴こえづらい ・リリリリリ リリリ リ リリリリ リリ リリリリ リリ リリリリ 5
6. 特定の障害がある人だけの問題ではない ・騒 騒騒騒 騒騒 騒騒騒 騒 騒騒 騒 騒 騒騒騒騒騒 ・騒騒 騒 騒 騒 騒 騒騒 騒 騒 騒騒騒騒騒 騒 騒騒騒騒 騒 騒騒騒騒 騒 騒 特性や利用状況などによって共通の困難になり得る 6
7. インターンで取り組んだ事例 表とグラフの切り替えタブ
8. 実装した画面：表タブとグラフタブ 表タブ選択時 グラフタブ選択時 8
9. 論点：現在表示中のページへのリンクをどう扱うか ・タブは表とグラフのページをつなぐリンク ・現在のタブは、押しても同じページのまま ・リンクとして残すか、押せない形にするか 9
10. 採用した実装：現在のタブは div タグで非活性化 条件分岐で、a タグとdiv タグを切り替え 10
11. 判断理由：意図しない操作を防ぐ • 今回のタブはページ遷移のリンク • 一般的なタブは矢印キーでの操作できるようにするのが一般的 リリ リリ /Tab リリリ リリ リ リリ リリリリリリリ リリ リリリ リリ リリリリリリ リリリ リ リリ リリリ 11
12. インターンで学んだこと ユーザーへの伝わりやすさみたいなものは、デザインによる ものがほとんどだと思っていた HTML リリ リ リ リ リ リ リリ リ リ リリ リ リ リリ リリリリリリ リ リリリ リ リリリ 12
13. 入社後に取り組み事例 ユーザー・組織選択
14. ユーザーや組織を選択 選択されているユーザーの表示 候補のサジェスト表示 14
15. 選択済みのユーザーが候補に残る違和感 選択されているユーザーの表示 候補のサジェスト表示 15
16. 案：選択済みを候補から除外 懸念点 選択済みユーザーがサジェストに 隠れている ・検索結果に出ない理由が不明 ・選択済みか検索不一致かが不明 16
17. 案：選択済みを候補から除外 懸念点 ・リリリ リリ リリ リリリリリリリリリ リ リリ リリ リ リ リ リ リリリリリ リリリリ リ >>解除機能を持たせる場合候補を閉じないようにする必 要がある 操作性の観点でUI全体の設計を見直す必要が出てくる 17
18. 操作性と認知、両面の課題 ・クリックで選択解除できるように見える（操作性） ・検索結果に出ない理由が不明（認知） ・選択済みかどうかが伝わりにくい（認知） 操作性だけではなく、 ユーザーがどう認知するかまで考えられていた 18
19. 実際に改善に取り組んでみて感じたこと
20. 実際に改善に取り組んでみて感じたこと • アクセシビリティの要件を満たすだけでなく、実際に使う人が 迷わず操作できるかまで向き合っている • デザインやUX的観点も含めて領域の垣根なく検討されている 支援技術や障害特性を考慮するすることだけが アクセシビリティじゃない 20
21. 身近な気づきから始められる ・「ここ、使いづらくない？」も取り組むきっかけとして十分 ・使いやすさを追求することが アクセシビリティにつながるこ ともある 小さな改善から始めることが大事 21
22. ご清聴ありがとうございました