ゼロから始めるアクセシビリティ啓蒙活動

2023/11/06 ZOZO Tech Meetup - Webフロントエンド で登壇した内容です。

イベントURL: https://zozotech-inc.connpass.com/event/297226/

Transcript

1. © ZOZO, Inc.
   ゼロから始める
   アクセシビリティ啓蒙活動
   ZOZOTOWN開発3部
   フロントエンドリプレイスブロック
   ⽥嶋幸智⼦
   2023/11/06 ZOZO Tech Meetup - Webフロントエンド
   #zozomeetup
   

   View Slide

2. © ZOZO, Inc.
   ⾃⼰紹介
   ⽥嶋 幸智⼦（たじまん）
   ● フロントエンドエンジニア
   ● 21新卒⼊社 今年3年⽬
   ● ZOZOTOWN をリプレイスするチームにて、
   Classic ASP から Next.js にする仕事をしてる
   ● アクセシビリティに関して興味があったもの
   の深くキャッチアップし出したのは最近
   ● デザイナー業務にも興味あり
   ● ⽇本酒‧バイク (ｴｽﾄﾚﾔ)‧漫画
   

   View Slide

3. © ZOZO, Inc.
   こんなことを話します
   ZOZO で働くフロントエンドエンジニアが、どういった⽅法で「アクセシビリティ改善運動」を広げて
   いくのか、前提状況や⾏動計画など語っていきます。
   フロントエンドの技術的な話は他の登壇者にまかせました。
   ZOZOTOWNの公式キャラクター
   「箱猫マックス」くん
   

   View Slide

4. © ZOZO, Inc.
   アクセシビリティとは
   ● accessibility と書き a11y と略される
   ● 特定状況下での使いやすさを⽰す「ユーザビリティ」とは異なり、どのような状況でもプロダク
   トやサービスを使⽤することができる度合いのことを指す
   伊原 力也、小林 大輔、桝田 草一、山本 伶「Webアプリケーションアクセシ
   ビリティ──今日から始める現場からの改善」
   まず初めに
   

   View Slide

5. © ZOZO, Inc.
   なぜアクセシビリティを⾼める必要があるのか？
   ● ユーザーを増やせる
   ○ 状況や障がいの有無にかかわらずアクセスできない⼈が減らせる
   ● ユーザビリティを⾼められる
   ○ セマンティクスに配慮した⽂章構造や、操作性の向上はユーザービリティの向上につながる
   ● 権利を守り、訴訟リスクを減らせる
   ○ アクセシブルなサービスにすることで障害者基本法や障害者差別解消法の対応につながる
   ● 企業のミッションを守れる
   ○ アクセシビリティを⾼めることで真の意味で全ての⼈にサービスを届けられるようになる
   ○ 企業のミッションに「誰もが」という⾔葉や理念を伝えるという意味がこめられている場
   合、アクセシビリティは必要不可⽋になる
   Webアクセシビリティの担保をすることで得られるメリット
   

   View Slide

6. © ZOZO, Inc.
   当初の社内フロントエンドチームの状況
   ● アクセシビリティへの興味関⼼を抱いている⼈がちらほらいた
   ○ テストやユーザービリティの改善の⼀貫として、アクセシビリティに興味がある⼈がいた
   ○ 個々でアクセシビリティの改善対応をしている⼈がいた
   ● デザイナーを中⼼として、サービス横断のデザインシステムを作ろうという動きが始まっていた
   

   View Slide

7. © ZOZO, Inc.
   アクセシビリティのフロントエンドの社内状況
   ZOZOTOWN フロントエンドエンジニアにアンケートを取ったところ、アクセシビリティへの興味関⼼
   を持つ⽅が多いことが判明した
   

   View Slide

8. © ZOZO, Inc.
   当初のZOZOTOWNのアクセシビリティ対応状況
   最近 Next.js へリプレイスされた ZOZOTOWN
   トップページ を axe DevTools で計測してみる
   と、Total Issues 337 という⼤きい数字
   (2023/10/25 時点) になった
   個々でアクセシビリティの改善タスクに取り組
   むエンジニアはいたが、開発時の必須要件に組
   み込まれていないためどうしても後回しになる
   という課題があった
   

   View Slide

9. © ZOZO, Inc.
   アクセシビリティ改善活動への準備
   ボトムアップでアクセシビリティ改善活動を⾏うために次の２つを準備した
   ● なぜアクセシビリティに取り組むかの⾔語化
   ○ 直接的に売上に貢献しない改善活動であるため、なぜやる必要があるかを⾔語化する
   ○ ⾼いモチベーションを持つことで活動への熱を仲間に伝搬させる
   ● アクセシビリティ改善活動のロードマップを作成
   ○ このプロジェクトを流さないために、具体的な活動案と筋道を⽴てる
   

   View Slide

10. © ZOZO, Inc.
    なぜアクセシビリティに取り組むかの⾔語化
    アクセシビリティは前述のように「 UI‧UX へ
    のこだわり」ではなく「どんな状況でもサービ
    スが利⽤できる」という幅広さの指針である
    そのためアクセシビリティを担保しないと、全
    く使⽤できないという状況が⽣まれる
    つまり、アクセシビリティを担保しないと「世
    界中をカッコよく、世界中に笑顔を」という企
    業理念を達成できなくなる！
    アクセシビリティ改善活動への準備
    

    View Slide

11. © ZOZO, Inc.
    半期に活動するマイルストーンを設定する
    まず⼤まかにアクセシビリティ改善活動を３つ
    に分類した。改善活動は書籍などを参考にし
    て、Miro に付箋を貼りつつタスクの⼤きさや分
    類に分けた。
    1. 仲間を⾒つける
    2. ⼿を動かす仲間を増やす
    3. 外部へ発表する
    アクセシビリティ改善活動への準備
    

    View Slide

12. © ZOZO, Inc.
    1. 仲間を⾒つける
    アクセシビリティに興味がある⽅へ向けて情報を受け取れる場所を提供することを⽬的にする。
    ● Slack チャンネルを作ってアクセシビリティの話題を話せる場を作る
    ○ Web 関連の会社のアクセシビリティ関連の話題や⾯⽩い情報を流す場をつくる
    ● 社内で⾏われているLT会や、チームの勉強会にアクセシビリティの話題を持っていく
    ○ テストの話や、デザインシステムに絡めることでその話題に対し興味を持つ⼈の幅が広が
    る。
    

    View Slide

13. © ZOZO, Inc.
    2. ⼿を動かす仲間を増やす
    アクセシビリティ改善活動が閉じた活動にならないように、誰でも受け⼊れられるよという体制を取
    る。
    ● アクセシビリティ改善タスクを GitHub Project で管理し誰でも⼀覧で⾒えるようにする
    ● アクセシビリティ改善モブプロ会を実施し、アクセシビリティ改善のハードルを下げる
    

    View Slide

14. © ZOZO, Inc.
    3. 成果を社内外に発信する
    途中参加のメンバー歓迎の意味や、⾃分への⿎舞のために定期的にアクセシビリティ改善の対応状況や
    成果を発信する。
    ● 定期的にアクセシビリティ改善結果を発信し、社内の実績をつくる
    ● フロントエンド以外の職能チームへ、アクセシビリティの共有をする
    ● 社外向けにアクセシビリティ改善活動の記事を書く
    

    View Slide

15. © ZOZO, Inc.
    ゆるゆるロードマップを作成しました
    

    View Slide

16. © ZOZO, Inc.
    10⽉〜今現在どんなかんじ？
    ● アクセシビリティ会話のためのチャンネルを作成し、興味のあるひとを集めることに成功した
    ● ZOZOTOWN トップページのアクセシビリティチェックを専⾨の⽅へお願いができ、修正項⽬のタ
    スク化が完了した
    ○ マークアップ‧代替テキスト‧⽂字画像‧キーボード操作‧コントラスト⽐‧動きのあるコ
    ンテンツの 6 つに分類し、合計 37 個の改善案のリストアップができた
    

    View Slide

17. © ZOZO, Inc.
    おわりに
    ● アクセシビリティ改善活動はまだ始まったばかりでやることはまだ無限⼤にある
    ● とはいえ、アクセシビリティ熱が上がっている段階なのでいいタイミングに開始ができた
    ● アクセシビリティ改善を始め、ZOZOTOWN フロントエンドでは⾯⽩い仕事がたくさんありま
    す！⼀緒に仕事する仲間を募集してます！
    

    View Slide

18. © ZOZO, Inc.
    ありがとうございました
    X (Twitter) : @schktjm
    bsky: @schktjm.bsky.social
    

    View Slide