Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
このあとからできる アクセシビリティ向上 / Accessibility improvements that can be made after this
Kota Nonaka
April 22, 2022
Programming
0
71
このあとからできる アクセシビリティ向上 / 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
140
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
uutarou10
1
940
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
320
CSS ド入門ハンズオン/CSS beginner's hands-on
uutarou10
2
52
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3k
Other Decks in Programming
See All in Programming
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
4
520
"What's new in Swift"の要約 / swift_5_7_summary
uhooi
1
290
ドメインモデル方式のクラス設計 座談会
masuda220
PRO
3
1k
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
300
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
170
Custom Design Systems in Compose UI
rharter
5
520
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
290
heyにおけるCI/CDの現状と課題
fufuhu
2
550
Power Automateドリブンのチームマネジメント
hanaseleb
0
180
Mobile Product Engineering
championswimmer
0
290
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
marchin1989
2
600
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
110
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
In The Pink: A Labor of Love
frogandcode
131
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
How to Ace a Technical Interview
jacobian
265
21k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
KATA
mclloyd
7
8.7k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Designing the Hi-DPI Web
ddemaree
272
32k
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