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
このあとからできる アクセシビリティ向上 / Accessibility improvemen...
Search
Kota Nonaka
April 22, 2022
Programming
0
330
このあとからできる アクセシビリティ向上 / Accessibility improvements that can be made after this
2022/04/22 note tech meetup #2 にて発表したスライドです
Kota Nonaka
April 22, 2022
Tweet
Share
More Decks by Kota Nonaka
See All by Kota Nonaka
React Nativeと半年間戦ってわかったコト / What I learned after fighting React Native for half a year
uutarou10
1
230
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
uutarou10
1
1.1k
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
410
CSS ド入門ハンズオン/CSS beginner's hands-on
uutarou10
2
77
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.2k
Other Decks in Programming
See All in Programming
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
860
僕がつくった48個のWebサービス達
yusukebe
18
17k
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
Macとオーディオ再生 2024/11/02
yusukeito
0
200
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
Golang と Erlang
taiyow
8
1.9k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Why Our Code Smells
bkeepers
PRO
334
57k
Rails Girls Zürich Keynote
gr2m
93
13k
Practical Orchestrator
shlominoach
186
10k
Ruby is Unlike a Banana
tanoku
96
11k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Faster Mobile Websites
deanohume
304
30k
Teambox: Starting and Learning
jrom
132
8.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
For a Future-Friendly Web
brad_frost
175
9.4k
Transcript
note inc. このあとからできる アクセシビリティ向上 note tech meetup #2 Kota Nonaka
note inc. 自己紹介 野中 滉太(のなか こうた) • フロントエンドエンジニア • 2019.04
- 2021.07 Fringe81株式会社(現 Unipos株式会社) • 2021.08 - note株式会社 ◦ カイゼンチーム ◦ アクセシビリティ向上プロジェクト(2021.12 -) 3 note.com/mogamin3 @mogamin3
note inc. 自己紹介 野中 滉太(のなか こうた) • フロントエンドエンジニア • 2019.04
- 2021.07 Fringe81株式会社(現 Unipos株式会社) • 2021.08 - note株式会社 ◦ カイゼンチーム ◦ アクセシビリティ向上プロジェクト(2021.12 -) 👈 4 note.com/mogamin3 @mogamin3
5 以下、文字数削減のため アクセシビリティ 👉 a11y accessibility 間が11文字だから略してa11y i18nとかと同じノリです ややこしい😅
note inc. a11y 向上プロジェクト 「noteのアクセシビリティ向上プロジェクトが始動 」 https://note.jp/n/na23fead88b93 • さまざまなユーザーにとって使いやすいサービスを目指すプロジェクト
• 社内の各チームから集まったメンバー + 外部アドバイザーで構成 6 2021年末からプロジェクトに参加、 正直言って…a11yについては何も知りませんでした😇
note inc. やってみるとわかること わからないまま参加したので調べたり聞きながら色々やってみた。 約5ヶ月やってきて思ったこと。 • 対応が難しい・悩ましいケースは結構ある
◦ 影響範囲が大きくすぐに着手できない ◦ どのように対応するのがベターか検討する必要のあるもの • ただし、多くのケースでは 少しの知識と少しの実装があるだけでa11yは向上する! とも思った 7
note inc. この発表のゴール • a11y観点でみたときに望ましくないけど、よくやってしまいがちな実装を知る ◦ どう対応したらいいかわからなくとも、何となくよくなさそう?と気づける •
a11y向上、そんなに難しくないじゃん!と思ってもらう ◦ もちろん難しいケースもあるが、まずは簡単なところだけでも抑えて60点くらいを目指す • この後業務に戻ったら、a11yについて少し気にかけたくなる 8 既にa11y関連の技術や実装について知っている人にはかなり物足りない感じです 🙏 ゴメン
note inc. お品書き 1. 画像のalt属性 2. クリックイベントのついた要素 3. アイコンボタン
9
note inc. ① 画像のalt属性 Q. 1〜3 どの実装がa11y的に望ましいでしょう? 10
note inc. ① 画像のalt属性 Q. 1〜3 どの実装がa11y的に望ましいでしょう? A. 1
or 2が望ましい、どちらを採用すべきかは場合による。 11
note inc. ① 画像のalt属性 スクリーンリーダーを利用してページを聞いた際に以下のような挙動になる 1. 画像があり、その画像は猫のイラストであるということがわかる 2.
無視される (画像があることも通知されない) 3. 画像があるということがわかる 12 装飾用の画像など 画像自体に意味がないケース
note inc. ②クリックイベントのついた要素 ボタンではない要素に対してクリックイベントを設定する • Tabでフォーカスが当たらない ◦ キーボード操作では触ることができないため
要マウス操作 • スクリーンリーダーではクリック可能な要素であることがわからない ◦ スクリーンリーダーからは使えない機能 になってしまう 13
note inc. ②クリックイベントのついた要素 じゃあどうするか 1. div をbutton要素に置き換える 2. role=”button”とtabIndexをつける
14
note inc. divをbutton要素に置き換える 最もシンプルかつ望ましい方針 • tabIndexをつけなくてもTabでフォーカスが当たる • スクリーンリーダーもボタンとして認識する
15
note inc. role=”button”とtabIndexをつける マークアップの都合上buttonタグを使えない時に検討する • role=”button”を付与することでスクリーンリーダーがボタンとして認識するようになる • tabIndexをつけることでタブ操作をしたときにフォーカスが当たるようにする
• キー操作でclickと同様の操作ができるようにする 16
note inc. role=”button”とtabIndexをつける • 基本的にはHTMLの機能を使って表現する ◦ タグを文脈によって使い分ける、など •
表現しきれないときにWAI-ARIAの機能を使って補足してあげるのがベター 17 一点忘れてはいけないのが、 WAI-ARIA は必要な場合のみ使用する という点です。 理想的には、スクリーン リーダーのユーザーの理解に必要となる意味論の提供は、常に ネイティブの HTML 機能 を使用して行うべ きです。(中略) もう一度言いますが、必要な時だけ使ってください! https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics
note inc. ③アイコンボタン • 視覚的に「ベルのマーク」というのがわかっているので、「通知かな?」と想像がつく • 画面を見ることができないユーザーにはわからない altのない画像と同じで何もしないと
「ボタンがある」ということだけしか伝わらない 18
19 押したら何が起こるかわからないボタンは押したくない (ですよね?)
note inc. 20 ③アイコンボタン • aria-label属性を使うと要素に対して、ラベルをつけることができる ◦ 画面には表示されないがスクリーンリーダーはこれを認識して読み上げてくれる
• 通知エリアの開閉を表現するためにaria-expanded/aria-haspopupなども設定している
note inc. おわりに • 見た目を大きく変えたりせずとも、属性の追加やマークアップなど 少しの工夫でa11yを向上させることができる 、と思いませんか…? ◦ 思ってくれていたら嬉しい
• (時間の都合で紹介できませんでしたが) スクリーンリーダーを使って自分の作っているものや普段使うサイトを聞いてみるのもオススメ ◦ 僕は自分のサイトが大変なことになっているので早く直したいです • a11y向上やっていき!なフロントエンドエンジニアさん、求む ◦ noteは実際にスクリーンリーダーを使うクリエイターさんの声が聞けたりと やりがいがある環境です(宣伝) 21
22 Thank you!
None