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