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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Shin Yasuda
August 31, 2023
0
24
Amebaブログにアクセシビリティを定着させる土台作り
Shin Yasuda
August 31, 2023
Tweet
Share
More Decks by Shin Yasuda
See All by Shin Yasuda
Amebaで取り組んでいるアクセシビリティ 2024
syasuda90
0
1.5k
アクセシビリティのテスト・取り組みとデザインシステムを活用した浸透
syasuda90
0
1.2k
Featured
See All Featured
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
480
Claude Code のすすめ
schroneko
67
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
410
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
130
Chasing Engaging Ingredients in Design
codingconduct
0
150
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
91
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.4k
Documentation Writing (for coders)
carmenintech
77
5.3k
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化する時に気をつけていること • 粒度は細かく • どの適合レベルに該当しているのか分かるように • アクセシビリティラベルをつけて絞り込みができるように
改善への取り組み アイコンだけで説明していたものに代替テキストを追加 見えなかったフォーカスを見えるように
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善 変更前 変更前 変更前 変更後 変更後 変更後
まとめ • 改善は無理せずこつこつと • なぜアクセシビリティをやるかを定期的に発信 • 継続して積み重ねていくためにチームで取り組む
おわり