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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. きっかけ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 何をどこまでやるか

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


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

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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



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






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



    View full-size slide

  27. こうした



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


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



    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide