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
350
このあとからできる アクセシビリティ向上 / 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
240
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
78
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.2k
Other Decks in Programming
See All in Programming
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Honoとフロントエンドの 型安全性について
yodaka
4
250
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Unity Android XR入門
sakutama_11
0
140
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Ruby on cygwin 2025-02
fd0
0
140
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Facilitating Awesome Meetings
lara
51
6.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Thoughts on Productivity
jonyablonski
69
4.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
4 Signs Your Business is Dying
shpigford
182
22k
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