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

開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話

pastak
June 17, 2023
650

 開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話

pastak

June 17, 2023
Tweet

More Decks by pastak

Transcript

  1. • 質問は Slido #3629079 へ ◦ https://app.sli.do/event/9uXNnGetfdQ76KXC3nfbPF ◦ connpassのイベントページからもアクセスできます •

    感想はTwitter #helpfeel_tech へ 2 質問‧感想などをSlidoやTwitterで受け付けています!
  2. • Pasta-K / @pastak • Scrapboxチーム エンジニア ◦ 主な関⼼はWeb技術やフロントエンド •

    その他、採⽤‧技術イベントのプロデュースや運営なども ◦ このイベント (Helpfeel Tech Hour)やその他のエンジニア向けイベント ◦ Podcast 今出川FM ( https://podcasters.spotify.com/pod/show/notainc ) • 京都サンガF.C.サポーター 3 About me
  3. • マウスが壊れて、キーボード を使うしかなくなった • ⾻折して腕が⼀時的に使えな くなった • スマートフォンの画⾯が割れ て液晶が映らなくなった •

    視⼒が低い‧⾒えない 10 「あらゆるユーザー」の例 • イヤホンを忘れて、⾳声を再⽣ できない • ⽇本語を理解できない • ⼩さい字が読めない • ギガを使いすぎて通信制限に あった • ⾊覚特性を有している
  4. • アクセシビリティの重要度が理解されていないと、他業種から「もっと優先 度の⾼い開発事項があるからそっちをやってくれ」と⾔われることがある(*) ◦ N%ルールのようなものの範囲での取り組みでは影響に限界がある • 場合によっては顧客に影響のある改善や変更になることもあるので、顧客に 理解をしてもらうためのコミュニケーションを取ってもらう必要もある • ユーザビリティ改善、新機能開発、ビジネスのための開発などと同様に重要

    性のある取り組みだと理解してもらって、社内で相互にアクセシビリティ改 善を応援‧評価できる⼟壌を作っていきたい 18 アクセシビリティと開発優先度 *: 実際に社内で共有された、前職時にアクセシビリティ改善に取り組もうとしたところ、そのような意見がありアク セシビリティ改善に取り組むことが出来なかったというエピソードより
  5. • アクセシビリティへの向き合い⽅などを導⼊するための資料を⽤意した • 「Webアプリケーションアクセシビリティ」(技術評論社)などの書籍をはじ め、freeeさん(*1)やSmart HRさん(*2)などの各社が公開されているアクセシ ビリティに関する各種リソースなどを参考に社内向けにまとめ直したものを3 パート+1に分けて作成した ◦ 著者の皆さんや各社の関係者の皆さん、その他これまでアクセシビリティに関するあらゆる

    情報をオープンにしてくださっている皆さんに感謝 19 職種を跨いだ「アクセシビリティ勉強会」の実施 *1: 全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub https://developers.freee.co.jp/entry/a11y-training *2: アクセシビリティ | SmartHR Design System https://smarthr.design/accessibility/
  6. • アクセシビリティって誰のため?何のため? ◦ アクセシビリティの価値がどこにあるのかについて伝える • アクセシビリティ、初めの⼀歩 ◦ コントラストや画像‧動画表現、またはHTMLでコーディングする際などにまずは⾒てみたい項⽬を紹介 ◦ ⾃分たちの仕事のどういうポイントがまずはキッカケになるかを探してもらう狙い

    • アクセシビリティの低い状態を体験しよう ◦ Chromeの⾊覚多様性のエミュレート機能 ◦ スクリーンリーダーの体験 ◦ マウス禁⽌でどこまで操作できるか • アクセシビリティについて話し合ってみよう ◦ それらを受けて感じたことや出来そうな取り組みについて各々に話してもらう 20 「アクセシビリティ勉強会」の内容
  7. • Slackの #accessibility を開設。アクセシビリティの話題を誰でも持ち込んで 話せるように • アクセシビリティに関する社内のハブにする • インターネットなどで⾒掛けた、ちょっとしたアクセシビリティ関連の話題 を提供したりしている

    • ⾊んな⼈が混ざって話すことでモチベーションも維持できる ◦ ハードルが下がることにも繋がる(はず?) • 後述の a11y 作業Dayもこのチャンネルの Huddle を活⽤ 21 横断かつ継続的なコミュニケーション
  8. • エンジニアお茶会(*)でアクセシビリティ改善に関する発表を実施 ◦ 前述の社内向け資料に加えて、⼀般的なアクセシビリティ改善事例や具体的な社内のアプリ ケーション改善例などの紹介 • a11y作業DAYの開催 ◦ ⾃分(pastak)がアクセシビリティ改善を実際にやる様⼦をSlackのHuddleで1⽇中垂れ流す⽇ をやってみた

    ◦ この場で各プロダクトに対して横断的に取り組みをしていくための取っ掛かりを作るべく作 業をしていた ◦ 興味ある⼈に覗きに来てもらって⼀緒に作業したり、会話‧議論をしたりなどが出来た 24 エンジニアをモチベートしてアクセシビリティ改善を推進 *: いわゆる「社内勉強会」のHelpfeel社内での名称。隔週水曜日に開催しています。 詳しくは https://blog.notainc.com/entry/2021/12/16/090000 を
  9. • 各サービスでeslintでは検出されないような改善を⾏うPull Requestを作成 • 元々社内のプロダクトをお互いに普段からドッグフーディングしている関係 上、軽微な変更や改善などのPull Requestは越境して送る⽂化がある • ⽇常的なドッグフーディングからアクセシビリティの改善点について、以前 から気になっていた箇所などを中⼼にPull

    Requestを作成した ◦ <a>と<button>の適切な使い分け ◦ ランドマークロールの改善 ◦ モーダル関連のフォーカスの改善 • ⾃分たちのプロダクトのアクセシビリティが改善される様⼦を実際に⾒ても らって、a11y-jsxと併せて、モチベーションのキッカケに 26 各プロダクトに対して横断的に取り組みをしていくための取っ掛かり