Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Daisuke Kobayashi
November 28, 2018

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

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

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

Daisuke Kobayashi

November 28, 2018
Tweet

More Decks by Daisuke Kobayashi

Other Decks in Design

Transcript

  1. UX Cafe: チームで取り組む!
    サイボウズのアクセシビリティ
    TCチームのアクセシビリティ
    山本絵理・近藤有紀

    View Slide

  2. こんにちは、TCです。
    • TC(てぃーしー)
    • 正式名はTechnical Communication
    • マニュアル制作
    • 製品文言の制定 など
    • 多言語対応している製品は、翻訳対応もあり
    こんにちは
    Hello
    你好

    View Slide

  3. こんにちは、TCです。
    • 東京、松山、上海の三拠点
    • ライター、コーダー、翻訳者が所属
    • たまにプログラミングしたりするメンバーもいる
    • ゆるーい英語の勉強会があったりする
    • 日報はほぼ、ご飯の話
    白クマピース
    上海
    東京 松山

    View Slide

  4. 自己紹介
    • ライティング担当が書いたものをコーダーがHTML化してWeb
    に公開するスタイル。
    • アクセシビリティについては、それぞれの担当分野でまず大ま
    かなアクセシビリティのルールを考えた。
    • 最後は話し合って決定。悩んだら一緒に考える。
    山本
    ライティング担当
    近藤
    コーディング担当

    View Slide

  5. サイボウズ Officeとは
    企業内の情報共有やコミュニケーションを活性化などを支援する
    グループウェア。
    11年連続シェアNo.1の使いやすい、すばらしい製品です。
    https://products.cybozu.co.jp/office/

    View Slide

  6. の、ヘルプサイト
    • 「ユーザーの状況や環境に左右されないアクセシブルなサイト」を
    コンセプトに、導入する人、管理する人、操作する人…など、あら
    ゆるユーザーに思いを寄せ、「ほしい情報にたどりつけるように」
    を目指したサイトです。
    https://jp.cybozu.help/ja/o/
    https://jp.cybozu.help/ja/of10/

    View Slide

  7. ヘルプサイト
    • アンケートもありますのでぜひ「お役に立ちましたか?」
    「はい」をクリックしていただけるとうれしいです
    https://jp.cybozu.help/ja/o/
    https://jp.cybozu.help/ja/of10/

    View Slide

  8. きっかけ

    View Slide

  9. アクセシビリティを知った
    勉強会 小林さんのお話に衝撃を受ける
    気持ち アクセシビリティと小林さんに興味がわく
    勉強会 理解を深めるために勉強会に参加・発表、チームに共有
    決意 マニュアルに取り入れよう

    View Slide

  10. リニューアルのチャンス
    チャンス サイボウズ Officeのリニューアルがある
    チャンス 製品とマニュアルは連動している
    チャンス マニュアルリニューアルのチャンス

    View Slide

  11. 現状を分析した
    Google
    Analytics
    ・モバイルからのセッションが増加している
    ➡レスポンシブ未対応であるため閲覧しづらいのではないか
    ・トップページの直帰率が高い
    ➡トップページの探索性が悪いのではないか
    ユーザー
    アンケート
    ・マニュアルにどのような改善を希望するか?
    ➡検索性(探しやすさ)を回答する割合が多い
    ・マニュアルの希望媒体は何か?
    ➡スマートフォン対応を回答する割合が増加している
    ・製品の使いかたがわからないときどうするか?
    ➡マニュアル、FAQを調べると回答する割合が多い

    View Slide

  12. やりたいことを実現するために
    アクセシビリティが最適解だった
    ユーザーの状況や環境に左右されないアクセシブルなサイト
    気持ち
    コンセプト
    アクセシビリティやるぞと心に決めてはいたものの
    現状のサイトを分析した結果を素直に読み解くと
    アクセシビリティの観点を取り入れることが
    解決策になる分析結果だったから
    殊更にアクセシビリティやるぞと強調する必要がないのでは…

    View Slide

  13. 何をどこまでやるか

    View Slide

  14. WCAG基準リストアプリを作った
    気持ち なんか難しい…レコードにまとめたい

    View Slide

  15. WCAG基準リストアプリを作った
    アプリ化 ほかのチームの対応を真似してアプリ化した

    View Slide

  16. 要件を決めた
    アプリ化 WCAG基準アプリと対応させて要件化した

    View Slide

  17. スタイルガイドに取り込む

    View Slide

  18. スタイルガイド(参考資料)

    View Slide

  19. スタイルガイドに取り込む(手順)


    View Slide

  20. スタイルガイドに取り込む(表)

    View Slide

  21. スタイルガイドに取り込む(表)

    View Slide

  22. スタイルガイドに取り込む(alt属性)


    height="82" alt="「前後の予定の確認」画面">

    View Slide

  23. スタイルガイドに取り込む(参照リンク)


    View Slide

  24. デザインとマークアップ

    View Slide

  25. HTMLきれいきれい
    • 可能な限りHTMLのsemanticsに従ったタグを使用したい。
    • 見出しに背景画像、リストに背景画像、手順に背景画像、タイ
    トルに背景画像…悪いことではないけれどこれが本当に必要?
    • divタグ書きすぎじゃないの??

    View Slide

  26. 同じ一つの手順だと本当に判断できる?



    「詳細設定」タブをクリックする






    個人フォルダをクリックする



    View Slide

  27. こうした



    「詳細設定」タブをクリックする


    個人フォルダをクリックする



    View Slide

  28. 文字
    • ヘルプは製品からリンクされている。
    • 製品からヘルプへ移動した時、フォントの大きさや間隔があま
    りにも違うとユーザーは戸惑うのでは?
    • 製品のイメージとあまり離れすぎないように考慮が必要。本来
    なら製品にすべて合わせるのがよい。
    • けれど製品が歴史あるもの。どうしても変わらないところがあ
    る。
    ゴゴゴゴゴ

    View Slide

  29. タイミングよくサイボウズの
    企業サイトがリニューアル中
    • 全てを製品に合わすことができない。
    • ちょうどサイボウズの企業サイトがリ
    ニューアルの最中。
    • サイボウズの企業サイトもアクセシビリ
    ティ化に取り組んでいたのでこれを参考
    にしよう!
    • ヘルプはWebに公開しているのでサイボ
    ウズのサイトの一部でもある。
    https://cybozu.co.jp/

    View Slide

  30. キーボード対応
    • サブナビゲーション、メガドロップダウン、アンカーリンクの
    表示、アンケートはキーボードでも操作できるように対応。
    • 「ここは操作できて、ここは操作できない」というのはしない。
    • 当時自分たちのやりたいことに一番近かったのは、アクセシビ
    リティを頑張っていた、Target(https://www.target.com/)。
    とても勉強になった。
    • ここは特に大変だったので、何度か小林さんに見ていただいた。
    enter
    return

    View Slide

  31. 当時の様子
    ↓解読頑張っている
    ↑うまくいくと山本さん褒めてくれる
    ←壊れた

    View Slide

  32. 他チームの存在
    • 先行してアクセシビリティを取り入れたチームが、スレッドを
    立てて情報を発信。
    • いつも覗いてた。取り入れられるものは取り入れた。
    • 形に残して共有することはとても大切。たとえ実装することが
    違っていても、情報があるのとないのでは大違い。
    • 当時これを「神々の投稿」と呼んでいた(個人的に)。

    View Slide

  33. つらみ

    View Slide

  34. リライト
    クラウド版 999ページのリライト、3464枚の画像のalt指定
    1377ページのリライト、3572枚の画像のalt指定
    もう無理<<<<<<<<<<<<<<<<サイボウズ Office 愛
    やりきったことに悔いなし
    パッケージ版

    View Slide

  35. 色の調整は最初にやろう
    • 神様(河内山さん)は言いました。「リンクの色が基準を満た
    していませんよ。」
    • 平民はこう言いました。「わかりました!タスクとして修正す
    るようにします。」
    • しかし平民はリンクの色の変更を最後のタスクにしてしまいま
    した。
    • さて、リンクの色を変えてみました。ところが背景の色と合わ
    せると基準を満たしていません。
    • ではその背景の色を変えました。今度は本文のテキストの色と
    の基準を満たしていません。
    • ではでは、そのテキストの色をかえt・・・
    地獄
    あっちを直すと
    こっちも直す

    View Slide

  36. 最後に

    View Slide

  37. アクセシビリティに終わりはない
    • ルール制定、取り入れたコードはテンプレート化。
    次に活かせる!
    • 残念ながらまだヘルプサイトはほんの一部しか対応できていな
    い。
    今後どんどん広げていく予定!
    • 状況は日々変わるが、焦らず長い目でこつこつやっていく。

    View Slide

  38. ご静聴ありがとうございました。

    View Slide