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
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Agile that works and the tools we love
rasmusluckow
329
21k
4 Signs Your Business is Dying
shpigford
184
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Being A Developer After 40
akosma
90
590k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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化する時に気をつけていること • 粒度は細かく • どの適合レベルに該当しているのか分かるように • アクセシビリティラベルをつけて絞り込みができるように
改善への取り組み アイコンだけで説明していたものに代替テキストを追加 見えなかったフォーカスを見えるように
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善 変更前 変更前 変更前 変更後 変更後 変更後
まとめ • 改善は無理せずこつこつと • なぜアクセシビリティをやるかを定期的に発信 • 継続して積み重ねていくためにチームで取り組む
おわり