$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amebaブログにアクセシビリティを定着させる土台作り
Search
Shin Yasuda
August 31, 2023
0
23
Amebaブログにアクセシビリティを定着させる土台作り
Shin Yasuda
August 31, 2023
Tweet
Share
More Decks by Shin Yasuda
See All by Shin Yasuda
Amebaで取り組んでいるアクセシビリティ 2024
syasuda90
0
1.4k
アクセシビリティのテスト・取り組みとデザインシステムを活用した浸透
syasuda90
0
1.2k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.2k
A better future with KSS
kneath
240
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Agile that works and the tools we love
rasmusluckow
331
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
Mobile First: as difficult as doing things right
swwweet
225
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Balancing Empowerment & Direction
lara
5
800
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Navigating Team Friction
lara
191
16k
A Modern Web Designer's Workflow
chriscoyier
698
190k
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化する時に気をつけていること • 粒度は細かく • どの適合レベルに該当しているのか分かるように • アクセシビリティラベルをつけて絞り込みができるように
改善への取り組み アイコンだけで説明していたものに代替テキストを追加 見えなかったフォーカスを見えるように
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善
改善への取り組み コントラスト比の改善 変更前 変更前 変更前 変更後 変更後 変更後
まとめ • 改善は無理せずこつこつと • なぜアクセシビリティをやるかを定期的に発信 • 継続して積み重ねていくためにチームで取り組む
おわり