noteアクセシビリティ勉強会〜虚空編〜

Transcript

1. noteアクセシビリティ勉強会
 〜虚空編〜
 WEB+DB PRESS Vol.116 特集3
 「アプリケーションアクセシビリティ」より
 伊原 力也
 2021.08.13

2. amazonでの購入はこちら
3. このセッションの流れ
 • noteに多数存在した「虚空」
 • 虚空とは何か：8つの型
 • どうすれば解決できるのか
 • 虚空を生み出さないために

4. 伊原 力也
 4
 • freee株式会社 UX部 デザインリサーチチーム マネジャー
 • HCD-Net 評議委員 / 認定人間中心設計専門家
 • ウェブアクセシビリティ基盤委員会 WG1委員

5. 5
 HCD-Net
6. 6
 ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)
7. 7
 伊原 力也: 本
8. noteに多数存在した「虚空」

9. GitHubリポジトリを検索
 • 今回、note（web）に存在しているアクセシビリティ課題を
 実例として題材にするべくnoteのGitHubリポジトリのIssueを検索した
 （A11y OR Accessibility OR アクセシビリティ）
 • すると驚きの事実が……。約60件のIssueのうち、大半が同じ問題！
 • それが「虚空」

11. Windows NVDAの場合

12. Mac VoiceOverの場合

14. 虚空は知覚・理解・操作できない
 キーボード利用時
 • キーボードフォーカスが合わないため操作できない
 スクリーンリーダー利用時
 • カーソルを合わせられる場合でも、それがボタンなのかどうか、
 なんのボタンなのかわからない（「ブランク」とだけ読む）
 • スクリーンリーダーによってはカーソルが合わないため操作できない

15. つまり…
 • noteにある多くのボタンやリンクは
 「存在がわからない、キーボードで押せない、ボタンなのかわからない、
 何をするボタンかわからない」という状態だった！
 • これはウェブアプリケーションのアクセシビリティ問題あるある第1位、
 どの会社でも一番多い。noteさんだけが例外ではない
 • いまはfukayaさん主導で修正が進んでいます

16. 虚空とは何か：8つの型

17. 虚空には型がある
 • 虚空には問題の組み合わせによりさまざまなタイプがある
 • 8つの型に分類してご紹介
 • 7の型まではすべてnote内で観測された実例

18. 8つの型のパターン
 テキストラベル ついてない ついているが不適切 適切 マークアッ プの意味づ け ついてない 1の虚空 2の虚空、3の虚空 4の虚空 ついている が不適切 5の虚空 （今回は紹介なし） （今回は紹介なし） 適切 6の虚空 7の虚空 8の虚空
19. 1の虚空
 • 見た目はボタンやリンクだが、
 divかspanでできている
 • 中身はアイコンフォント、代替ラベルなし
 • 基本にして最悪の型

20. 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>
21. 1の虚空の問題
 • divやspanはインタラクティブ要素ではない
 →キーボードフォーカスを受け取れない
 • divやspanはセマンティクスを持っていない
 →ボタンやリンクという意味を伝えない
 • アイコンフォントはテキストを持っていない
 →それが何なのかを読み上げることができない

22. 2の虚空
 • 1の虚空とほぼ同じだが、
 アイコンフォントにラベルが付いている
 • ただし、ついているのは
 font awesomeなどのデフォルトのラベル

23. 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>
24. 2の虚空の問題
 • 1と同じく、キーボードフォーカスを受け取れない、
 ボタンやリンクと読まない
 • アイコンに対するテキストはあるが、
 アイコンが何を意味しているのかがわからない
 • title属性はスクリーンリーダーによっては読み上げない

25. 3の虚空
 • ボタンの意味を示した
 テキストラベルが付いている
 • 一見よさそうだが、
 アイコン名の読み上げが残ってしまっている

26. 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>
27. 3の虚空の問題
 • 1や2と同じく、キーボードフォーカスを受け取れない、
 ボタンやリンクと読まない
 • 読み上げさせると
 「pencil編集」「papersコピー」「garbage can削除」
 と読み上げてしまい、不適切

28. 4の虚空
 • 正しくテキストラベルが付いた
 • まだdiv or span製のまま

29. 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>
30. Windows NVDAの場合

31. 4の虚空の問題
 • ラベルは正しく読めるようになった！
 • まだボタンやリンクと読まない
 ◦ この例は、たまたま機能っぽいラベルだったから、ボタンだと類推可能かもしれない 
 ◦ しかし「スキ」だったらどうだろう？ 
 ◦ スキとだけ読まれて、それがボタンと判断するのは難しいのではないか 
 • まだキーボードフォーカスを受け取れない

32. 5の虚空
 • 正しいテキストラベルはある
 • a要素になっている！が、しかし…

33. 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>
34. 5の虚空の問題
 • テキストラベルは読める
 • a要素はhref属性がないとインタラクティブ要素にならない
 • なのでこれはリンクと読まない、キーボードフォーカスを受け取れない

35. 6の虚空
 • きちんとbutton要素として実装されている
 • 中身はアイコンフォント
 • しかし代替ラベルなし……

36. 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>
37. 6の虚空の問題
 • button要素はインタラクティブ要素なので
 キーボードフォーカスは受け取れる
 • buttonというセマンティクスがあるので
 スクリーンリーダーも「ボタン」と読み上げる
 • しかし、何のボタンかは分からない。「ボタン」とだけ読む

38. 7の虚空
 • きちんとbutton要素として実装されている
 • 中身はアイコンフォント
 • 代替ラベルも付いている！のだが……

39. 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>
40. 7の虚空の問題
 • button要素なのでキーボードフォーカスは受け取れるし、
 スクリーンリーダーも「ボタン」と読み上げる
 • アイコンに対するテキストはあるし、aria-labelなのでちゃんと読む。
 しかしアイコンが何を意味しているのかがわからない。
 • よって「pencil、ボタン」と読む。惜しい！

41. 8の虚空
 • 一見すべての問題を解決している
 • しかしそれは誤った道に踏み込んでいた

42. 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>
43. 8の虚空の問題
 • spanをrole=”button”でbuttonに変身させ、さらに
 tabindex=”0”でキーボードフォーカスが合うようにしている
 • これはUsing ARIAの1つ目のルールに違反している
 ◦ もしセマンティクスを持っているHTMLの要素にroleを上書きした場合、 
 不整合が起きて意味をうまく読み取れなくなる 
 ◦ このケースでは「roleだけ対応してキーボードでは操作できない」 
 みたいな片手落ちの実装を行う可能性もある 

44. どうすれば解決できるのか

45. 正しい実装はシンプル
 • 前提：button要素か、hrefありのa要素を使う。
 divやspanでボタンやリンクを作らない！
 • A：アイコン＋テキストボタンの場合：
 アイコン側にラベルは付けず、テキストラベルを表示する
 • B：アイコンのみボタンの場合：
 アイコン側にラベルは付けず、button要素にaria-labelでラベルを記載する

46. 正しい実装 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>
47. 正しい実装 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>
48. Windows NVDAの場合

49. Mac VoiceOverの場合

50. 虚空を生み出さないために

51. 虚空を生み出さないプロセス
 • まずテキストありのボタンにできないかを考える。
 アイコンだけ置くときはデザイナーが代替ラベルを考慮する
 • 実装者は先の例のような正しい実装を行う。
 正しい実装に導いてくれるコンポーネントを使用する
 • 問題になりそうな実装をlintでひっかける。
 キーボードとスクリーンリーダーでチェックする

52. noteではどうしていくか
 • コンポーネントやlintのお話 by fukaya
 ◦ （※発表当時は実装のデモでした） 
 • デザイナーに対してのお話 by sawanobori
 • 対応の松竹梅 by sawanobori

53. デザイナーに対してのお話
 押下要素に気をつけろ！！！

54. 対応の松竹梅
 アクセシビリティやっていきたいぜ！な方向けに、チームが使っている チェックシートを誰でも発行できるようになりました
 松
 竹
 梅
 今日の内容
 Accessibility Insights
 Lighthouse
 a11y
 チェックシート
 Lint

55. a11yチェックシートとは

56. 💥
 a11yチェックシートとは
 /a11y-checklist どのチャンネルでもOK！ 
 /a まで打てば候補がでるよ 
 アクセシビリティやっていきたいぜ！な方向けに、チームが使っている チェックシートを誰でも発行できるようになりました
 a11yチーム

58. 何か新しく作るときは #pjt-accessibility で相談!
 • 7周年で、取り組み記事で、アクセシビリティ向上について宣言している
 • これからnoteが世に出すものはアクセシブルであることが期待されている
 • なによりアクセシビリティを必要とするクリエイターが存在し、
 その人たちがnoteの動きに期待している
 • 「だれもが創作をはじめ、続けられるようにする。」を、
 みんなで実現していきましょう！