フロントエンドのテストからアクセシビリティをしれっと広めていく
by
Shota
×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
フロントエンドのテストから アクセシビリティを"しれっと"広めていく 各社の事例から学ぶウェブアクセシビリティ 〜フロントエンドの最前線〜 2024/08/23 @nano72mkn
Slide 2
Slide 2 text
自己紹介 スターフェスティバル株式会社 フロントエンドエンジニア ポメラニアンを撫でながら仕事をしています! ゲーム好きです Apex VALORANT しょうた 🍊なつみかん @nano72mkn
Slide 3
Slide 3 text
01 アクセシビリティを広めるの難しい問題
Slide 4
Slide 4 text
アクセシビリティの重要性を伝えるのは 比較的簡単!
Slide 5
Slide 5 text
実際の対応となると話は別 技術的な複雑さ、専門的な知識、リソースの制約 など 様々な障壁が立ちはだかる
Slide 6
Slide 6 text
結果として、 「大切なことは分かっているけれど、なかなか手をつけられない」 という状況に陥る
Slide 7
Slide 7 text
そこで "しれっと"アプローチできないか を考えました。
Slide 8
Slide 8 text
"しれっと"アプローチ三箇条 心理的ハードルを最低限に 1. 学習コストを最低限に 2. 気づいたら貢献出来ている 3.
Slide 9
Slide 9 text
フロントエンドのテスト ならいけそう感
Slide 10
Slide 10 text
02 フロントエンドのテスト と アクセシビリティ
Slide 11
Slide 11 text
なぜ フロントエンドのテスト なのか
Slide 12
Slide 12 text
フロントエンドのテストツールには getByRoleという関数が存在している
Slide 13
Slide 13 text
役割 意味 ボタン role属性について role属性はタグに や を示す
Slide 14
Slide 14 text
役割 意味 ボタン ボタン role属性について role属性はタグに や を示す
Slide 15
Slide 15 text
他にもあるよ!暗黙的なrole
リンク
タイトル
link heading textbox
Slide 16
Slide 16 text
role属性を持っているタグを セマンティック要素 と呼ぶ
Slide 17
Slide 17 text
role属性を使って要素を取得するのが getByRole
Slide 18
Slide 18 text
それで、アクセシビリティとの関係性は?
Slide 19
Slide 19 text
getByRole とアクセシビリティとの関係性 スクリーンリーダーなどの支援技術はrole属性から どんな要素なのかをアナウンスしてくれます。
Slide 20
Slide 20 text
まとめると
Slide 21
Slide 21 text
role属性が付与されていれば getByRoleで要素を取得できる
Slide 22
Slide 22 text
role属性が付与されていれば 支援技術で要素を認識できる アクセシブルなUI
Slide 23
Slide 23 text
getByRoleで取得できる = アクセシブルなUIである
Slide 24
Slide 24 text
03 getByRoleを使った "しれっと"した アクセシビリティ改善
Slide 25
Slide 25 text
getByRoleの使い方
Slide 26
Slide 26 text
マイページ
Slide 27
Slide 27 text
role属性 accessible name マイページ
Slide 28
Slide 28 text
簡単ですよね!
Slide 29
Slide 29 text
送信
Slide 30
Slide 30 text
送信 role属性 accessible name
Slide 31
Slide 31 text
送信
Slide 32
Slide 32 text
送信
Slide 33
Slide 33 text
送信
Slide 34
Slide 34 text
getByRoleを使うことで、 自然とアクセシビリティを考慮した セマンティックなHTMLを使用するようになる
Slide 35
Slide 35 text
04 まとめ
Slide 36
Slide 36 text
getByRoleを使えば“しれっと”アプローチができる 心理的ハードルを最低限に getByRoleを使うだけ 学習コストを最低限に getByRoleの使い方を覚える role属性は使うやつだけ覚える 気づいたら貢献出来ている セマンティックなHTMLを書くことが促されて自然とアクセシブ ルなUIになっていく
Slide 37
Slide 37 text
注意点! アクセシビリティに疎くても貢献できる入門レベル アクセシビリティの項目を網羅することはできません
Slide 38
Slide 38 text
getByRoleをきっかけに アクセシビリティを “しれっと”広めていきましょう!
Slide 39
Slide 39 text
Thank You!