Upgrade to Pro — share decks privately, control downloads, hide ads and more …

このあとからできる アクセシビリティ向上 / Accessibility improvemen...

このあとからできる アクセシビリティ向上 / Accessibility improvements that can be made after this

2022/04/22 note tech meetup #2 にて発表したスライドです

Kota Nonaka

April 22, 2022
Tweet

More Decks by Kota Nonaka

Other Decks in Programming

Transcript

  1. note inc. 自己紹介
 野中 滉太(のなか こうた)
 • フロントエンドエンジニア
 • 2019.04

    - 2021.07 Fringe81株式会社(現 Unipos株式会社) 
 • 2021.08 - note株式会社
 ◦ カイゼンチーム
 ◦ アクセシビリティ向上プロジェクト(2021.12 -) 
 3 note.com/mogamin3
 @mogamin3

  2. note inc. 自己紹介
 野中 滉太(のなか こうた)
 • フロントエンドエンジニア
 • 2019.04

    - 2021.07 Fringe81株式会社(現 Unipos株式会社) 
 • 2021.08 - note株式会社
 ◦ カイゼンチーム
 ◦ アクセシビリティ向上プロジェクト(2021.12 -) 👈
 4 note.com/mogamin3
 @mogamin3

  3. note inc. a11y 向上プロジェクト
 「noteのアクセシビリティ向上プロジェクトが始動 」 https://note.jp/n/na23fead88b93 
 • さまざまなユーザーにとって使いやすいサービスを目指すプロジェクト

    
 • 社内の各チームから集まったメンバー + 外部アドバイザーで構成 
 
 6 2021年末からプロジェクトに参加、
 正直言って…a11yについては何も知りませんでした😇

  4. note inc. やってみるとわかること
 わからないまま参加したので調べたり聞きながら色々やってみた。 
 約5ヶ月やってきて思ったこと。 
 • 対応が難しい・悩ましいケースは結構ある 


    ◦ 影響範囲が大きくすぐに着手できない 
 ◦ どのように対応するのがベターか検討する必要のあるもの 
 • ただし、多くのケースでは
 少しの知識と少しの実装があるだけでa11yは向上する! とも思った
 7
  5. note inc. この発表のゴール
 • a11y観点でみたときに望ましくないけど、よくやってしまいがちな実装を知る 
 ◦ どう対応したらいいかわからなくとも、何となくよくなさそう?と気づける 
 •

    a11y向上、そんなに難しくないじゃん!と思ってもらう 
 ◦ もちろん難しいケースもあるが、まずは簡単なところだけでも抑えて60点くらいを目指す 
 • この後業務に戻ったら、a11yについて少し気にかけたくなる 
 8 既にa11y関連の技術や実装について知っている人にはかなり物足りない感じです 🙏 ゴメン

  6. note inc. ① 画像のalt属性
 Q. 1〜3 どの実装がa11y的に望ましいでしょう? 
 A. 1

    or 2が望ましい、どちらを採用すべきかは場合による。 
 11
  7. note inc. ① 画像のalt属性
 スクリーンリーダーを利用してページを聞いた際に以下のような挙動になる 
 1. 画像があり、その画像は猫のイラストであるということがわかる 
 2.

    無視される (画像があることも通知されない) 
 3. 画像があるということがわかる 
 12 装飾用の画像など 画像自体に意味がないケース
  8. note inc. ②クリックイベントのついた要素
 ボタンではない要素に対してクリックイベントを設定する 
 • Tabでフォーカスが当たらない 
 ◦ キーボード操作では触ることができないため

    要マウス操作
 • スクリーンリーダーではクリック可能な要素であることがわからない 
 ◦ スクリーンリーダーからは使えない機能 になってしまう
 13
  9. note inc. role=”button”とtabIndexをつける
 • 基本的にはHTMLの機能を使って表現する 
 ◦ タグを文脈によって使い分ける、など 
 •

    表現しきれないときにWAI-ARIAの機能を使って補足してあげるのがベター 
 17 一点忘れてはいけないのが、 WAI-ARIA は必要な場合のみ使用する という点です。 理想的には、スクリーン リーダーのユーザーの理解に必要となる意味論の提供は、常に ネイティブの HTML 機能 を使用して行うべ きです。(中略)
 もう一度言いますが、必要な時だけ使ってください! 
 https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics 

  10. note inc. おわりに
 • 見た目を大きく変えたりせずとも、属性の追加やマークアップなど 
 少しの工夫でa11yを向上させることができる 、と思いませんか…?
 ◦ 思ってくれていたら嬉しい


    • (時間の都合で紹介できませんでしたが) 
 スクリーンリーダーを使って自分の作っているものや普段使うサイトを聞いてみるのもオススメ 
 ◦ 僕は自分のサイトが大変なことになっているので早く直したいです 
 • a11y向上やっていき!なフロントエンドエンジニアさん、求む 
 ◦ noteは実際にスクリーンリーダーを使うクリエイターさんの声が聞けたりと 
 やりがいがある環境です(宣伝) 
 21