入社したばかりでもできる、 アクセシビリティ改善の第一歩

2025/11/19 開発組織でアクセシビリティを進める技術 by SmartHR の登壇資料です

Transcript

1. © LayerX Inc. ⼊社したばかりでもできる、 アクセシビリティ改善の第⼀歩 2025/11/19 開発組織でアクセシビリティを進める技術 by SmartHR una / 夛⽥⼩百合(@unachang113)
2. © LayerX Inc. 2 • LayerX バクラク事業部 (2025-08 -) ◦ CRE グループ所属 エンジニア ◦ 現在はバクラク申請‧経費精算 で SWE • Like ◦ しろたん ◦ 野球観戦（DeNA ベイスターズが好き） ◦ 裁縫 una (@unachang113 / 夛⽥⼩百合) ⾃⼰紹介
3. 3 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに、AI SaaSとAI DXの事業を展開 事業紹介 バクラク事業 企業活動のインフラとなる業務を 効率化するクラウドサービス Fintech事業 ソフトウェアを駆使したアセットマネジ メント‧証券事業を合弁会社にて展開 Ai Workforce事業 社内のナレッジやノウハウをデータ ベース化するAIプラットフォーム AI SaaSドメイン AI DXドメイン
4. © LayerX Inc. 4 ⼊社 3 ヶ⽉でどうアクセシビリティ向上にコミットしていったかの話をします • 新⼊社員がアクセシビリティの品質を上げる対応をどうやって進めていくか • 具体的に⾏った施策 今⽇の内容 今⽇の内容
5. どうやってアクセシビリティ 向上を進めるか
6. © LayerX Inc. 6 • ⾃⼰紹介でa11y に興味があるよ〜 ってまずは話してみる ◦ ⾃分がどういう⼈かをまずは知ってもらう • 社内にアクセシビリティのチャンネルがあるならまず⼊ってみる ① アクセシビリティに興味がある⼈として認知してもらう 今⽇の内容
7. © LayerX Inc. 7 • ⾃分がこれからよくしていくプロダクトのコードに⽬を向ける ◦ コードを修正しながらここは HTML 直せそうだなみたいな箇所を探す ◦ 使いづらい箇所をチケットとして起票してみる • とりあえずキーボードだけで操作できるか触ってみる ◦ タブフォーカスや操作がスキップされたものがあったらコードを確認するを繰り返す ② コードを読み、プロダクト触る どうやってアクセシビリティ向上を進めるか
8. © LayerX Inc. 8 ⾃分が所属している LayerX の申請‧経費精算チームの場合、 • フロントエンド‧バックエンドの職種が分かれていない ◦ ⼈によってバックボーンや強みが異なるので HTML‧アクセシビリティの理解にグラ デーションがある • チーム外からコントリビュートされることが多いプロダクト • アクセシビリティは⼤事だって理解してるけど⼿が回ってない状態 ③ チームを観察する どうやってアクセシビリティ向上を進めるか
9. アクセシビリティ改善を すすめていく
10. © LayerX Inc. 10 • まずは HTML をセマンティックにするところから ◦ プロダクトを観察してる中で HTML が正しく書かれてないことに起因する表⽰崩れを⾒ つけた • HTML のこと意識しなくても HTML の品質が担保される状態を作りたい ◦ HTML の理解度が異なるのでコードレビュー時に品質の担保は難しい ◦ エンジニア間で HTML わからん...という話を Slack で⾒た プロダクト‧チームを⾒て思ったこと アクセシビリティ改善を進めていく
11. © LayerX Inc. 11 reviewdog を⽤いてプルリクエストの差分に対して Markuplint を実⾏するよう にした Markuplint: HTML の静的解析ツール reviewdog: リンターツールと組み合わせてレビューコメントをプルリクエストに⾃動的に投稿で きるツール Markuplint を⼩さくいれてみた アクセシビリティ改善を進めていく
12. © LayerX Inc. 12 • ⾃分が Markuplint の導⼊経験があり、細かいカスタマイズに慣れていた • reviewdog がすでに GitHub Action 上で動いていた • Markuplint のルールを全部オフにして徐々に適⽤していく対応は開発スピー ドに合っていなかった ◦ ⾃分のチーム内での機能改善‧追加に加えチーム外からコントリビュートされることが 多いプロダクト ◦ 徐々にルールを適⽤すると新規のコードが増える度にいたちごっこになる懸念 → まずは新規で⼊ってくるコードに対してガードレールを追加することにした Markuplint×reviewdogの選定理由 アクセシビリティ改善を進めていく
13. © LayerX Inc. 13 reviewdog はRDFormat(Reviewdog Diagnostic Format)という形式で渡す とプルリクエストにコメントを追加してくれる • Markuplint は JSON 出⼒はサポートしているが RDFormat は対応していないため、変 換⽤のスクリプトを作成 ◦ https://gist.github.com/unachang113/fe44d6efcde36cad7c03d376218112c5 ◦ Markuplint でエラーを検知した場合のみ CI を fail させるようにした 導⼊⽅法 アクセシビリティ改善を進めていく
14. © LayerX Inc. 14 • HTML に関するエラー数が⾒える化できたのがよかった ◦ 現状 error,warning 合わせて 400 件以上あり、伸びしろしかない状態 • 独⾃コンポーネントやライブラリで要素を wrap してる箇所が多く、エラー が思ったより検知できてない ◦ これは別の⽅法で検知できるように対応する必要がある • チームへの変化はまだこれから ◦ まだ導⼊して⽇が浅いため、チームがどう変化していくのかはこれから観察していく 実際⼊れてみてどうだったか アクセシビリティ改善を進めていく
15. © LayerX Inc. 15 • 独⾃コンポーネントの検知 • すでに存在しているエラーの修正 ◦ スプリントの空き時間や改善デーで対応していく 参考: 後回しにされがちな問題を改善するための「改善デー」「やさしさデー」のご紹介 #LayerX テックアドカレhttps://tech.layerx.co.jp/entry/2023/12/27/171319 これからの課題 アクセシビリティ改善を進めていく
16. © LayerX Inc. 16 • まずはチーム‧プロダクトの観察から ◦ 現状を把握してアクセシビリティ品質を向上できるところを探す • いきなり全部やるのは⼤変なので⼩さく、できるところから始める ◦ 差分に対しての lint なら既存コードに影響なく導⼊できる まとめ アクセシビリティ改善を進めていく