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
noteアクセシビリティ勉強会〜虚空編〜
Search
Rikiya Ihara / magi
August 13, 2021
0
7.3k
noteアクセシビリティ勉強会〜虚空編〜
Rikiya Ihara / magi
August 13, 2021
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
アクセシビリティに取り組むメリット
magi1125
1
220
CMS管理画面のアクセシビリティ
magi1125
8
2.3k
AIで加速するアクセシビリティのこれから
magi1125
3
590
アクセシビリティの社内浸透
magi1125
0
52
信念を持つ方法
magi1125
0
32
スマホのアクセシビリティ機能お試し大会
magi1125
0
34
『モバイルアプリアクセシビリティ入門』入門
magi1125
0
17
最速[要出典]アクセシビリティチェック
magi1125
3
340
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
16
10k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Writing Fast Ruby
sferik
628
62k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Rails Girls Zürich Keynote
gr2m
95
14k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
noteアクセシビリティ勉強会 〜虚空編〜 WEB+DB PRESS Vol.116 特集3 「アプリケーションアクセシビリティ」より 伊原 力也 2021.08.13
amazonでの購入はこちら
このセッションの流れ • noteに多数存在した「虚空」 • 虚空とは何か:8つの型 • どうすれば解決できるのか • 虚空を生み出さないために
伊原 力也 4 • freee株式会社 UX部 デザインリサーチチーム マネジャー • HCD-Net
評議委員 / 認定人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員
5 HCD-Net
6 ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)
7 伊原 力也: 本
noteに多数存在した「虚空」
GitHubリポジトリを検索 • 今回、note(web)に存在しているアクセシビリティ課題を 実例として題材にするべくnoteのGitHubリポジトリのIssueを検索した (A11y OR Accessibility OR アクセシビリティ) •
すると驚きの事実が……。約60件のIssueのうち、大半が同じ問題! • それが「虚空」
None
Windows NVDAの場合
Mac VoiceOverの場合
None
虚空は知覚・理解・操作できない キーボード利用時 • キーボードフォーカスが合わないため操作できない スクリーンリーダー利用時 • カーソルを合わせられる場合でも、それがボタンなのかどうか、 なんのボタンなのかわからない(「ブランク」とだけ読む) • スクリーンリーダーによってはカーソルが合わないため操作できない
つまり… • noteにある多くのボタンやリンクは 「存在がわからない、キーボードで押せない、ボタンなのかわからない、 何をするボタンかわからない」という状態だった! • これはウェブアプリケーションのアクセシビリティ問題あるある第1位、 どの会社でも一番多い。noteさんだけが例外ではない • いまはfukayaさん主導で修正が進んでいます
虚空とは何か:8つの型
虚空には型がある • 虚空には問題の組み合わせによりさまざまなタイプがある • 8つの型に分類してご紹介 • 7の型まではすべてnote内で観測された実例
8つの型のパターン テキストラベル ついてない ついているが不適切 適切 マークアッ プの意味づ け ついてない 1の虚空
2の虚空、3の虚空 4の虚空 ついている が不適切 5の虚空 (今回は紹介なし) (今回は紹介なし) 適切 6の虚空 7の虚空 8の虚空
1の虚空 • 見た目はボタンやリンクだが、 divかspanでできている • 中身はアイコンフォント、代替ラベルなし • 基本にして最悪の型
1の虚空の例 <div> <span class="button" onclick="edit()"> <i class="far fa-edit"></i></span> <span class="button"
onclick="copy()"> <i class="far fa-copy"></i></span> <span class="button" onclick="remove()"> <i class="far fa-trash-alt"></i></span> </div>
1の虚空の問題 • divやspanはインタラクティブ要素ではない →キーボードフォーカスを受け取れない • divやspanはセマンティクスを持っていない →ボタンやリンクという意味を伝えない • アイコンフォントはテキストを持っていない →それが何なのかを読み上げることができない
2の虚空 • 1の虚空とほぼ同じだが、 アイコンフォントにラベルが付いている • ただし、ついているのは font awesomeなどのデフォルトのラベル
2の虚空の例 <div> <span class="button" onclick="edit()"> <i class="far fa-edit" title=”pencil”></i></span> <span
class="button" onclick="copy()"> <i class="far fa-copy" title=”papers”></i></span> <span class="button" onclick="remove()"> <i class="far fa-trash-alt" title=”garbage can”></i></span> </div>
2の虚空の問題 • 1と同じく、キーボードフォーカスを受け取れない、 ボタンやリンクと読まない • アイコンに対するテキストはあるが、 アイコンが何を意味しているのかがわからない • title属性はスクリーンリーダーによっては読み上げない
3の虚空 • ボタンの意味を示した テキストラベルが付いている • 一見よさそうだが、 アイコン名の読み上げが残ってしまっている
3の虚空の例 <div> <span class="button" onclick="edit()"> <i class="far fa-edit" title=”pencil”></i>編集</span> <span
class="button" onclick="copy()"> <i class="far fa-copy" title=”papers”></i>コピー</span> <span class="button" onclick="remove()"> <i class="far fa-trash-alt" title=”garbage can”></i>削除</span> </div>
3の虚空の問題 • 1や2と同じく、キーボードフォーカスを受け取れない、 ボタンやリンクと読まない • 読み上げさせると 「pencil編集」「papersコピー」「garbage can削除」 と読み上げてしまい、不適切
4の虚空 • 正しくテキストラベルが付いた • まだdiv or span製のまま
4の虚空の例 <div> <span class="button" onclick="edit()"> <i class="far fa-edit"></i> 編集</span> <span
class="button" onclick="copy()"> <i class="far fa-copy"></i> コピー</span> <span class="button" onclick="remove()"> <i class="far fa-trash-alt"></i> 削除</span> </div>
Windows NVDAの場合
4の虚空の問題 • ラベルは正しく読めるようになった! • まだボタンやリンクと読まない ◦ この例は、たまたま機能っぽいラベルだったから、ボタンだと類推可能かもしれない ◦ しかし「スキ」だったらどうだろう?
◦ スキとだけ読まれて、それがボタンと判断するのは難しいのではないか • まだキーボードフォーカスを受け取れない
5の虚空 • 正しいテキストラベルはある • a要素になっている!が、しかし…
5の虚空の例 <div> <a class="button" onclick="edit()"> <i class="far fa-edit"></i> 編集</a> <a
class="button" onclick="copy()"> <i class="far fa-copy"></i> コピー</a> <a class="button" onclick="remove()"> <i class="far fa-trash-alt"></i> 削除</a> </div>
5の虚空の問題 • テキストラベルは読める • a要素はhref属性がないとインタラクティブ要素にならない • なのでこれはリンクと読まない、キーボードフォーカスを受け取れない
6の虚空 • きちんとbutton要素として実装されている • 中身はアイコンフォント • しかし代替ラベルなし……
6の虚空の例 <div> <button type=”button” onclick="edit()"> <i class="far fa-edit"></i></ button> <button
type=”button” onclick="copy()"> <i class="far fa-copy"></i></ button> <button type=”button” onclick="remove()"> <i class="far fa-trash-alt"></i></ button> </div>
6の虚空の問題 • button要素はインタラクティブ要素なので キーボードフォーカスは受け取れる • buttonというセマンティクスがあるので スクリーンリーダーも「ボタン」と読み上げる • しかし、何のボタンかは分からない。「ボタン」とだけ読む
7の虚空 • きちんとbutton要素として実装されている • 中身はアイコンフォント • 代替ラベルも付いている!のだが……
7の虚空の例 <div> <button type=”button” aria-label=”pencil” onclick="edit()"> <i class="far fa-edit"></i></ button>
<button type=”button” aria-label=”papers” onclick="copy()"> <i class="far fa-copy"></i></ button> <button type=”button” aria-label=”garbage can” onclick="remove()"> <i class="far fa-trash-alt"></i></ button> </div>
7の虚空の問題 • button要素なのでキーボードフォーカスは受け取れるし、 スクリーンリーダーも「ボタン」と読み上げる • アイコンに対するテキストはあるし、aria-labelなのでちゃんと読む。 しかしアイコンが何を意味しているのかがわからない。 • よって「pencil、ボタン」と読む。惜しい!
8の虚空 • 一見すべての問題を解決している • しかしそれは誤った道に踏み込んでいた
8の虚空の例 <div> <span role="button" tabindex="0" class=”button” onclick="edit()"> <i class="far fa-edit"></i>
編集</span> <span role="button" tabindex="0” class=”button” onclick="copy()"> <i class="far fa-copy"></i> コピー</span> <span role="button" tabindex="0" class=”button” onclick="remove()"> <i class="far fa-trash-alt"></i> 削除</span> </div>
8の虚空の問題 • spanをrole=”button”でbuttonに変身させ、さらに tabindex=”0”でキーボードフォーカスが合うようにしている • これはUsing ARIAの1つ目のルールに違反している ◦ もしセマンティクスを持っているHTMLの要素にroleを上書きした場合、
不整合が起きて意味をうまく読み取れなくなる ◦ このケースでは「roleだけ対応してキーボードでは操作できない」 みたいな片手落ちの実装を行う可能性もある
どうすれば解決できるのか
正しい実装はシンプル • 前提:button要素か、hrefありのa要素を使う。 divやspanでボタンやリンクを作らない! • A:アイコン+テキストボタンの場合: アイコン側にラベルは付けず、テキストラベルを表示する • B:アイコンのみボタンの場合: アイコン側にラベルは付けず、button要素にaria-labelでラベルを記載する
正しい実装 A:アイコン+テキスト <div> <button type=”button” onclick="edit()"> <i class="far fa-edit"></i> 編集</button>
<button type=”button” onclick="copy()"> <i class="far fa-copy"></i> コピー</button> <button type=”button” onclick="remove()"> <i class="far fa-trash-alt"></i> 削除</button> </div>
正しい実装 B:アイコンのみ+代替ラベル <div> <button type=”button” aria-label=”編集” onclick="edit()"> <i class="far fa-edit"></i></
button> <button type=”button” aria-label=”コピー” onclick="copy()"> <i class="far fa-copy"></i></ button> <button type=”button” aria-label=”削除” onclick="remove()"> <i class="far fa-trash-alt"></i></ button> </div>
Windows NVDAの場合
Mac VoiceOverの場合
虚空を生み出さないために
虚空を生み出さないプロセス • まずテキストありのボタンにできないかを考える。 アイコンだけ置くときはデザイナーが代替ラベルを考慮する • 実装者は先の例のような正しい実装を行う。 正しい実装に導いてくれるコンポーネントを使用する • 問題になりそうな実装をlintでひっかける。 キーボードとスクリーンリーダーでチェックする
noteではどうしていくか • コンポーネントやlintのお話 by fukaya ◦ (※発表当時は実装のデモでした) • デザイナーに対してのお話
by sawanobori • 対応の松竹梅 by sawanobori
デザイナーに対してのお話 押下要素に気をつけろ!!!
対応の松竹梅 アクセシビリティやっていきたいぜ!な方向けに、チームが使っている チェックシートを誰でも発行できるようになりました 松 竹 梅 今日の内容 Accessibility Insights Lighthouse
a11y チェックシート Lint
a11yチェックシートとは
💥 a11yチェックシートとは /a11y-checklist どのチャンネルでもOK! /a まで打てば候補がでるよ アクセシビリティやっていきたいぜ!な方向けに、チームが使っている チェックシートを誰でも発行できるようになりました
a11yチーム
None
何か新しく作るときは #pjt-accessibility で相談! • 7周年で、取り組み記事で、アクセシビリティ向上について宣言している • これからnoteが世に出すものはアクセシブルであることが期待されている • なによりアクセシビリティを必要とするクリエイターが存在し、 その人たちがnoteの動きに期待している
• 「だれもが創作をはじめ、続けられるようにする。」を、 みんなで実現していきましょう!