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
15
Amebaブログにアクセシビリティを定着させる土台作り
Shin Yasuda
August 31, 2023
Tweet
Share
More Decks by Shin Yasuda
See All by Shin Yasuda
Amebaで取り組んでいるアクセシビリティ 2024
syasuda90
0
290
アクセシビリティのテスト・取り組みとデザインシステムを活用した浸透
syasuda90
0
920
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Designing Experiences People Love
moore
138
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Done Done
chrislema
181
16k
Thoughts on Productivity
jonyablonski
67
4.2k
Designing for humans not robots
tammielis
249
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
GraphQLとの向き合い方2022年版
quramy
43
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
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化する時に気をつけていること • 粒度は細かく • どの適合レベルに該当しているのか分かるように • アクセシビリティラベルをつけて絞り込みができるように
改善への取り組み アイコンだけで説明していたものに代替テキストを追加 見えなかったフォーカスを見えるように
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善 変更前 変更前 変更前 変更後 変更後 変更後
まとめ • 改善は無理せずこつこつと • なぜアクセシビリティをやるかを定期的に発信 • 継続して積み重ねていくためにチームで取り組む
おわり