はじめてのアクセシビリティ実践記

「アクセシビリティLT会 #2 with Mix Leap Study」の登壇資料です

Transcript

1. © LY Corporation LINEヤフー株式会社 コマースカンパニー ショッピング統括本部 尾崎勇一 はじめての アクセシビリティ実践記
2. © LY Corporation 尾崎勇一 LINEヤフー株式会社 コマースカンパニー ショッピング統括本部 2 2022年1月に旧ヤフーに中途入社 Yahoo!ショッピングの商品レビュー/ストアレビューの 開発を担当 所属はバックエンドチームですが Webフロントエンドへの技術も好きです アクセシビリティに興味を持ったきっかけは HTML5 Conference 2017でアクセシビリティのセッ ションを聞いたことです
3. © LY Corporation Yahoo!ショッピングの アクセシビリティ 3
4. © LY Corporation Yahoo!ショッピングは規模が大きく関わる人もとても多い • ショッピング統括本部所属の社員は約1000人 そのうち • エンジニアは約280人 • デザイナーは約30人 今回のLTがいい機会だったのでアクセシビリティの取組状況についてアンケートをとってみました 4 Yahoo!ショッピングの体制
5. © LY Corporation 5 取り組み状況のアンケート結果 ※ショッピング統括本部所属の企画、デザイナー、エンジニアの社員が対象
6. © LY Corporation Yahoo!ショッピングは社内の他のサービスと比べて積極的に取り組んでいるとは言えない状況 私見としては、 • Yahoo!ショッピングのサービス規模を考えるとアクセシビリティを担保する社会的責任がある • a11yの困り事がある人に「Amazonや楽天を使ってください」でいいと思ってる人はいないはず 6 Yahoo!ショッピングがa11yに取り組む意義
7. © LY Corporation アクセシビリティ実践記 7
8. © LY Corporation 入社以来所属はバックエンドチーム 1年ほど経った頃にフロントエンドに興味があると相談 ⇒フロントエンドチームの開発を手伝えることに アクセシビリティについて興味はあったが 本番サービスでの実践は今回がはじめて 8 背景
9. © LY Corporation • フォーム周り • 独自UIのドロップダウン/ラジオボタン/ファイル選択 ⇒対応が必要なことは分かるが、どう対応したらいいか悩むことが多かった • 見出し周りの整理 • なぜかh1のみのページが多く全体を整理 プルリクエストに自分でコメントをつけてレビュアーにも意識してもらえるように気をつかった 9 はじめてのアクセシビリティを意識した開発
10. © LY Corporation なんとか対応できて満足した気分でいたが… 自分が離れた後はうまく運用されていなかった • キーボード操作できるよう頑張ったコードが消えていた • 見出しレベルがガタガタになっていた • 見た目は同じなのに片方はh3タグでもう片方はpタグなんてことも ボトムアップでのアプローチも必要だが、トップダウンでの組織レベルでの浸透も必要 10 開発のその後
11. © LY Corporation 企画との関わり方 • 自分のプロジェクトの担当者はアクセシビリティにあまり馴染がなかった • アクセシビリティ確保基本の「キ」を紹介してみた • https://weba11y.jp/know-how/10basics/10basics_index/ • まずは受け入れ試験でキーボード操作ができるか見てほしいとお願いしてみた できるところから一歩ずつやっていくのがよさそう 11 他職種との関わり方
12. © LY Corporation デザイナーとの関わり方 • デザイナーチームがアクセシビリティの意識が高いかよく分からなかった • アクセシビリティに関する話が来たことがない • 自分(開発側)で判断していい感じに対応することが多かった • 画像のalt • キーボードインタラクション • 非同期での画面書き換え時のフォーカス等 エンジニアとデザイナーでアクセシビリティについてやりとりできるような文化にしていきたい 12 他職種との関わり方
13. © LY Corporation 共通UIコンポーネントのチーム • Yahoo!ショッピングの共通UIコンポーネントを提供しているチーム • アクセシビリティの意識が高くて信頼できる • アクセシビリティ改善のissueをあげたらいつも積極的に取り組んでくれる 共通部品の質が上がると間接的に全体の品質向上につながる 積極的にフィードバックして貢献したいと思えた 13 頼りになった人たち
14. © LY Corporation 全社横断のアクセシビリティチーム • 旧ヤフーと旧LINEのスペシャリストがあわさったチーム • 自分が作ったページが不安だった時に相談できた • 困った時に頼れる人が社内にいるのはとても心強い ボトムアップとトップダウンの両輪で推進していくためにも頼れるところは頼っていきたい 14 頼りになった人たち
15. © LY Corporation
16. © LY Corporation