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!