Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amebaブログにアクセシビリティを定着させる土台作り
Search
Shin Yasuda
August 31, 2023
0
21
Amebaブログにアクセシビリティを定着させる土台作り
Shin Yasuda
August 31, 2023
Tweet
Share
More Decks by Shin Yasuda
See All by Shin Yasuda
Amebaで取り組んでいるアクセシビリティ 2024
syasuda90
0
1.1k
アクセシビリティのテスト・取り組みとデザインシステムを活用した浸透
syasuda90
0
1.1k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Scaling GitHub
holman
460
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Bash Introduction
62gerente
613
210k
Adopting Sorbet at Scale
ufuk
77
9.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Optimizing for Happiness
mojombo
379
70k
Into the Great Unknown - MozCon
thekraken
40
1.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Music & Morning Musume
bryan
46
6.7k
Transcript
Muddy Web #2 2021.11.12
Amebaブログにアクセシビリティを 定着させる土台作り
安田 慎 2016年度 中途入社 Ameba事業部 / フロントエンドエンジニア
今日お話しすること
• 定着させるための取り組み • 改善事例と気をつけているポイント
Amebaについて
None
None
誰もがいつでも、迷わず 「書く」「読む」「応える」 ができる状態を目指す
None
定着させるための取り組み
オンボーディング
オンボーディング
オンボーディング なぜAmebaでアクセシビリティに取り組むのか?
オンボーディング 資料は適宜アップデート
問題点や疑問点の集約
問題点や疑問点の集約 コミュニケーションツールの活用
問題点や疑問点の集約 フィードバックや疑問点の吸い上げを自動化
問題点や疑問点の集約 気軽に リアクションを
コードレビュー
コードレビュー GitHub Team Mensions
コードレビュー レビューで困った時は @ameba-accessibility-team
コードレビュー 困ったら聞いてみる
コードレビュー アクセシビリティ観点でレビュー 実際に手を動かしてレビューしてみる
コードレビュー • そもそもタイトル(titleタグ)が設定されていない • htmlタグにページの言語が指定されていない • outline: none;が指定されているためフォーカスが可視化さ れていない •
アニメーションがすごくチカチカする • 見出しレベル3の次が見出しレベル6だ
コードレビュー 画像に代替テキストが全然設定されていない 1.1.1 画像に代替テキストを提供する [A] https://a11y-guidelines.ameba.design/1/1/1/
コードレビュー キーボードの操作を受け付けてくれないリンク 2.1.1 キーボード、タッチデバイスで操作できる [A] https://a11y-guidelines.ameba.design/2/1/1/ <a href="https://ameblo.jp/accessibility" rel="noopener noreferrer"
target="_blank" tabIndex="-1" >もっと見る</a>
コードレビュー 色々と問題のあるフォーム 通常時 エラー時
改善への取り組み
改善への取り組み まずはissue化
改善への取り組み issue化する時に気をつけていること • 粒度は細かく • どの適合レベルに該当しているのか分かるように • アクセシビリティラベルをつけて絞り込みができるように
改善への取り組み アイコンだけで説明していたものに代替テキストを追加 見えなかったフォーカスを見えるように
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善 変更前 変更前 変更前 変更後 変更後 変更後
まとめ • 改善は無理せずこつこつと • なぜアクセシビリティをやるかを定期的に発信 • 継続して積み重ねていくためにチームで取り組む
おわり