20181128_TCチームのアクセシビリティ/ 20181128 Accessibility TC

UXCafe: チームで取り組む！サイボウズのアクセシビリティ
トーク2: TCチームのアクセシビリティ

イベントページ: https://cybozu.connpass.com/event/106185/

1. UX Cafe: チームで取り組む！ サイボウズのアクセシビリティ TCチームのアクセシビリティ 山本絵理・近藤有紀
2. こんにちは、TCです。 • TC（てぃーしー） • 正式名はTechnical Communication • マニュアル制作 • 製品文言の制定 など • 多言語対応している製品は、翻訳対応もあり こんにちは Hello 你好
3. こんにちは、TCです。 • 東京、松山、上海の三拠点 • ライター、コーダー、翻訳者が所属 • たまにプログラミングしたりするメンバーもいる • ゆるーい英語の勉強会があったりする • 日報はほぼ、ご飯の話 白クマピース 上海 東京 松山
4. 自己紹介 • ライティング担当が書いたものをコーダーがHTML化してWeb に公開するスタイル。 • アクセシビリティについては、それぞれの担当分野でまず大ま かなアクセシビリティのルールを考えた。 • 最後は話し合って決定。悩んだら一緒に考える。 山本 ライティング担当 近藤 コーディング担当
5. サイボウズ Officeとは 企業内の情報共有やコミュニケーションを活性化などを支援する グループウェア。 11年連続シェアNo.1の使いやすい、すばらしい製品です。 https://products.cybozu.co.jp/office/
6. の、ヘルプサイト • 「ユーザーの状況や環境に左右されないアクセシブルなサイト」を コンセプトに、導入する人、管理する人、操作する人…など、あら ゆるユーザーに思いを寄せ、「ほしい情報にたどりつけるように」 を目指したサイトです。 https://jp.cybozu.help/ja/o/ https://jp.cybozu.help/ja/of10/
7. ヘルプサイト • アンケートもありますのでぜひ「お役に立ちましたか？」 「はい」をクリックしていただけるとうれしいです https://jp.cybozu.help/ja/o/ https://jp.cybozu.help/ja/of10/
8. きっかけ
9. アクセシビリティを知った 勉強会 小林さんのお話に衝撃を受ける 気持ち アクセシビリティと小林さんに興味がわく 勉強会 理解を深めるために勉強会に参加・発表、チームに共有 決意 マニュアルに取り入れよう
10. リニューアルのチャンス チャンス サイボウズ Officeのリニューアルがある チャンス 製品とマニュアルは連動している チャンス マニュアルリニューアルのチャンス
11. 現状を分析した Google Analytics ・モバイルからのセッションが増加している ➡レスポンシブ未対応であるため閲覧しづらいのではないか ・トップページの直帰率が高い ➡トップページの探索性が悪いのではないか ユーザー アンケート ・マニュアルにどのような改善を希望するか？ ➡検索性（探しやすさ）を回答する割合が多い ・マニュアルの希望媒体は何か？ ➡スマートフォン対応を回答する割合が増加している ・製品の使いかたがわからないときどうするか？ ➡マニュアル、FAQを調べると回答する割合が多い
12. やりたいことを実現するために アクセシビリティが最適解だった ユーザーの状況や環境に左右されないアクセシブルなサイト 気持ち コンセプト アクセシビリティやるぞと心に決めてはいたものの 現状のサイトを分析した結果を素直に読み解くと アクセシビリティの観点を取り入れることが 解決策になる分析結果だったから 殊更にアクセシビリティやるぞと強調する必要がないのでは…
13. 何をどこまでやるか
14. WCAG基準リストアプリを作った 気持ち なんか難しい…レコードにまとめたい
15. WCAG基準リストアプリを作った アプリ化 ほかのチームの対応を真似してアプリ化した
16. 要件を決めた アプリ化 WCAG基準アプリと対応させて要件化した
17. スタイルガイドに取り込む
18. スタイルガイド（参考資料）
19. スタイルガイドに取り込む（手順） 昔 今
20. スタイルガイドに取り込む（表） 昔
21. スタイルガイドに取り込む（表） 今
22. スタイルガイドに取り込む（alt属性） 昔 今 <img src="/office/user_app/img/schedule_11.gif" width="450" height="82" alt="「前後の予定の確認」画面"> <img src="/ja/of10/user_app/sh/view/img/availability_01.png" alt=" この日の予定を表示した画像" data-action="zoom" tabindex="0">
23. スタイルガイドに取り込む（参照リンク） 昔 今
24. デザインとマークアップ
25. HTMLきれいきれい • 可能な限りHTMLのsemanticsに従ったタグを使用したい。 • 見出しに背景画像、リストに背景画像、手順に背景画像、タイ トルに背景画像…悪いことではないけれどこれが本当に必要？ • divタグ書きすぎじゃないの？？
26. 同じ一つの手順だと本当に判断できる？ <div class="process01"> <ol start="1"> <li> <strong>「詳細設定」タブをクリックする</strong> </li> </ol> </div> <div class="process02"> <ol start="2"> <li> <strong>個人フォルダをクリックする</strong> </li> </ol> </div>
27. こうした <div class="process"> <ol> <li> <strong>「詳細設定」タブをクリックする</strong> </li> <li> <strong>個人フォルダをクリックする</strong> </li> </ol> </div>
28. 文字 • ヘルプは製品からリンクされている。 • 製品からヘルプへ移動した時、フォントの大きさや間隔があま りにも違うとユーザーは戸惑うのでは？ • 製品のイメージとあまり離れすぎないように考慮が必要。本来 なら製品にすべて合わせるのがよい。 • けれど製品が歴史あるもの。どうしても変わらないところがあ る。 ゴゴゴゴゴ
29. タイミングよくサイボウズの 企業サイトがリニューアル中 • 全てを製品に合わすことができない。 • ちょうどサイボウズの企業サイトがリ ニューアルの最中。 • サイボウズの企業サイトもアクセシビリ ティ化に取り組んでいたのでこれを参考 にしよう！ • ヘルプはWebに公開しているのでサイボ ウズのサイトの一部でもある。 https://cybozu.co.jp/
30. キーボード対応 • サブナビゲーション、メガドロップダウン、アンカーリンクの 表示、アンケートはキーボードでも操作できるように対応。 • 「ここは操作できて、ここは操作できない」というのはしない。 • 当時自分たちのやりたいことに一番近かったのは、アクセシビ リティを頑張っていた、Target（https://www.target.com/）。 とても勉強になった。 • ここは特に大変だったので、何度か小林さんに見ていただいた。 enter return
31. 当時の様子 ↓解読頑張っている ↑うまくいくと山本さん褒めてくれる ←壊れた
32. 他チームの存在 • 先行してアクセシビリティを取り入れたチームが、スレッドを 立てて情報を発信。 • いつも覗いてた。取り入れられるものは取り入れた。 • 形に残して共有することはとても大切。たとえ実装することが 違っていても、情報があるのとないのでは大違い。 • 当時これを「神々の投稿」と呼んでいた（個人的に）。
33. つらみ
34. リライト クラウド版 999ページのリライト、3464枚の画像のalt指定 1377ページのリライト、3572枚の画像のalt指定 もう無理＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜サイボウズ Office 愛 やりきったことに悔いなし パッケージ版
35. 色の調整は最初にやろう • 神様（河内山さん）は言いました。「リンクの色が基準を満た していませんよ。」 • 平民はこう言いました。「わかりました！タスクとして修正す るようにします。」 • しかし平民はリンクの色の変更を最後のタスクにしてしまいま した。 • さて、リンクの色を変えてみました。ところが背景の色と合わ せると基準を満たしていません。 • ではその背景の色を変えました。今度は本文のテキストの色と の基準を満たしていません。 • ではでは、そのテキストの色をかえｔ・・・ 地獄 あっちを直すと こっちも直す
36. 最後に
37. アクセシビリティに終わりはない • ルール制定、取り入れたコードはテンプレート化。 次に活かせる！ • 残念ながらまだヘルプサイトはほんの一部しか対応できていな い。 今後どんどん広げていく予定！ • 状況は日々変わるが、焦らず長い目でこつこつやっていく。
38. ご静聴ありがとうございました。