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
Design Foundational Data Engineering Observability
sucitw
3
200
旅行プランAIエージェント開発の裏側
ippo012
2
930
Testing Trophyは叫ばない
toms74209200
0
890
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
530
Laravel Boost 超入門
fire_arlo
3
220
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
AIでLINEスタンプを作ってみた
eycjur
1
230
Cache Me If You Can
ryunen344
2
3.1k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Producing Creativity
orderedlist
PRO
347
40k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Designing Experiences People Love
moore
142
24k
Typedesign – Prime Four
hannesfritz
42
2.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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