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
フロントエンドのテストからアクセシビリティをしれっと広めていく
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Shota
August 22, 2024
Programming
3
1.1k
フロントエンドのテストからアクセシビリティをしれっと広めていく
Shota
August 22, 2024
Tweet
Share
More Decks by Shota
See All by Shota
おじいちゃんに優しいUIをつくってみた
nano72mkn
2
1.8k
アクセシビリティを理解するとフロントエンドのテストが楽になる!
nano72mkn
1
4.2k
OpenAI APIを触ってみた
nano72mkn
0
1.3k
年末年始にFlutter入門
nano72mkn
0
320
Other Decks in Programming
See All in Programming
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう!
neruneruo
4
2.6k
dchart: charts from deck markup
ajstarks
3
970
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
920
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
1.9k
組織で育むオブザーバビリティ
ryota_hnk
0
140
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
philipschwarz
PRO
0
150
Patterns of Patterns
denyspoltorak
0
1.3k
[AI Engineering Summit Tokyo 2025] LLMは計画業務のゲームチェンジャーか? 最適化業務における活⽤の可能性と限界
terryu16
2
430
SourceGeneratorのススメ
htkym
0
130
Architectural Extensions
denyspoltorak
0
240
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
180
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
210
24k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
160
Faster Mobile Websites
deanohume
310
31k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.9k
The Spectacular Lies of Maps
axbom
PRO
1
450
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
84
Site-Speed That Sticks
csswizardry
13
1k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
36k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
Evolving SEO for Evolving Search Engines
ryanjones
0
100
My Coaching Mixtape
mlcsv
0
31
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Transcript
フロントエンドのテストから アクセシビリティを"しれっと"広めていく 各社の事例から学ぶウェブアクセシビリティ 〜フロントエンドの最前線〜 2024/08/23 @nano72mkn
自己紹介 スターフェスティバル株式会社 フロントエンドエンジニア ポメラニアンを撫でながら仕事をしています! ゲーム好きです Apex VALORANT しょうた 🍊なつみかん @nano72mkn
01 アクセシビリティを広めるの難しい問題
アクセシビリティの重要性を伝えるのは 比較的簡単!
実際の対応となると話は別 技術的な複雑さ、専門的な知識、リソースの制約 など 様々な障壁が立ちはだかる
結果として、 「大切なことは分かっているけれど、なかなか手をつけられない」 という状況に陥る
そこで "しれっと"アプローチできないか を考えました。
"しれっと"アプローチ三箇条 心理的ハードルを最低限に 1. 学習コストを最低限に 2. 気づいたら貢献出来ている 3.
フロントエンドのテスト ならいけそう感
02 フロントエンドのテスト と アクセシビリティ
なぜ フロントエンドのテスト なのか
フロントエンドのテストツールには getByRoleという関数が存在している
役割 意味 <button type=”button”>ボタン</button> role属性について role属性はタグに や を示す
役割 意味 <button type=”button”>ボタン</button> <button type=”button” role=”button”>ボタン</button> role属性について role属性はタグに や
を示す
他にもあるよ!暗黙的なrole <a href=”~~~”>リンク</a> <h1>タイトル</h1> <input type=”text” /> link heading textbox
role属性を持っているタグを セマンティック要素 と呼ぶ
role属性を使って要素を取得するのが getByRole
それで、アクセシビリティとの関係性は?
getByRole とアクセシビリティとの関係性 スクリーンリーダーなどの支援技術はrole属性から どんな要素なのかをアナウンスしてくれます。 <button id=”lensSearchButton” class=”lensSearchButton” title=”画像で検索”/>
まとめると
role属性が付与されていれば getByRoleで要素を取得できる
role属性が付与されていれば 支援技術で要素を認識できる アクセシブルなUI
getByRoleで取得できる = アクセシブルなUIである
03 getByRoleを使った "しれっと"した アクセシビリティ改善
getByRoleの使い方
マイページ
role属性 accessible name マイページ
簡単ですよね!
送信
送信 role属性 accessible name
送信
送信
送信
getByRoleを使うことで、 自然とアクセシビリティを考慮した セマンティックなHTMLを使用するようになる
04 まとめ
getByRoleを使えば“しれっと”アプローチができる 心理的ハードルを最低限に getByRoleを使うだけ 学習コストを最低限に getByRoleの使い方を覚える role属性は使うやつだけ覚える 気づいたら貢献出来ている セマンティックなHTMLを書くことが促されて自然とアクセシブ ルなUIになっていく
注意点! アクセシビリティに疎くても貢献できる入門レベル アクセシビリティの項目を網羅することはできません
getByRoleをきっかけに アクセシビリティを “しれっと”広めていきましょう!
Thank You!