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

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のうち、大半が同じ問題！  • それが「虚空」 

Windows NVDAの場合 

Mac VoiceOverの場合 

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

つまり…  • 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>

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>

Mac VoiceOverの場合 

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

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

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

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

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

a11yチェックシートとは 

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

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

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

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

More Decks by Rikiya Ihara / magi

Featured

Transcript