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
390
このあとからできる アクセシビリティ向上 / 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
250
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
uutarou10
1
1.2k
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
420
CSS ド入門ハンズオン/CSS beginner's hands-on
uutarou10
2
83
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.3k
Other Decks in Programming
See All in Programming
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
190
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
210
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
19
4.4k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
1
370
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
3
1.1k
複雑なドメインに挑む.pdf
yukisakai1225
5
940
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
250
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.7k
tool ディレクティブを導入してみた感想
sgash708
1
160
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
370
testingを眺める
matumoto
1
130
Design Foundational Data Engineering Observability
sucitw
2
130
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Docker and Python
trallard
45
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Thoughts on Productivity
jonyablonski
69
4.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Agile that works and the tools we love
rasmusluckow
330
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
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