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

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

このあとからできる アクセシビリティ向上 / 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.
    このあとからできる

    アクセシビリティ向上

    note tech meetup #2

    Kota Nonaka


    View Slide

  2. note inc.
    自己紹介

    野中 滉太(のなか こうた)

    ● フロントエンドエンジニア

    ● 2019.04 - 2021.07 Fringe81株式会社(現 Unipos株式会社)

    ● 2021.08 - note株式会社

    ○ カイゼンチーム

    ○ アクセシビリティ向上プロジェクト(2021.12 -)

    3
    note.com/mogamin3
 @mogamin3


    View Slide

  3. note inc.
    自己紹介

    野中 滉太(のなか こうた)

    ● フロントエンドエンジニア

    ● 2019.04 - 2021.07 Fringe81株式会社(現 Unipos株式会社)

    ● 2021.08 - note株式会社

    ○ カイゼンチーム

    ○ アクセシビリティ向上プロジェクト(2021.12 -) 👈

    4
    note.com/mogamin3
 @mogamin3


    View Slide

  4. 5
    以下、文字数削減のため

    アクセシビリティ 👉 a11y

    accessibility

    間が11文字だから略してa11y

    i18nとかと同じノリです

    ややこしい😅


    View Slide

  5. note inc.
    a11y 向上プロジェクト

    「noteのアクセシビリティ向上プロジェクトが始動
    」 https://note.jp/n/na23fead88b93 

    ● さまざまなユーザーにとって使いやすいサービスを目指すプロジェクト

    ● 社内の各チームから集まったメンバー + 外部アドバイザーで構成


    6
    2021年末からプロジェクトに参加、

    正直言って…a11yについては何も知りませんでした😇


    View Slide

  6. note inc.
    やってみるとわかること

    わからないまま参加したので調べたり聞きながら色々やってみた。

    約5ヶ月やってきて思ったこと。

    ● 対応が難しい・悩ましいケースは結構ある

    ○ 影響範囲が大きくすぐに着手できない

    ○ どのように対応するのがベターか検討する必要のあるもの

    ● ただし、多くのケースでは

    少しの知識と少しの実装があるだけでa11yは向上する!
    とも思った

    7

    View Slide

  7. note inc.
    この発表のゴール

    ● a11y観点でみたときに望ましくないけど、よくやってしまいがちな実装を知る

    ○ どう対応したらいいかわからなくとも、何となくよくなさそう?と気づける

    ● a11y向上、そんなに難しくないじゃん!と思ってもらう

    ○ もちろん難しいケースもあるが、まずは簡単なところだけでも抑えて60点くらいを目指す

    ● この後業務に戻ったら、a11yについて少し気にかけたくなる

    8
    既にa11y関連の技術や実装について知っている人にはかなり物足りない感じです 🙏 ゴメン


    View Slide

  8. note inc.
    お品書き

    1. 画像のalt属性

    2. クリックイベントのついた要素

    3. アイコンボタン

    9

    View Slide

  9. note inc.
    ① 画像のalt属性

    Q. 1〜3 どの実装がa11y的に望ましいでしょう?

    10

    View Slide

  10. note inc.
    ① 画像のalt属性

    Q. 1〜3 どの実装がa11y的に望ましいでしょう?

    A. 1 or 2が望ましい、どちらを採用すべきかは場合による。

    11

    View Slide

  11. note inc.
    ① 画像のalt属性

    スクリーンリーダーを利用してページを聞いた際に以下のような挙動になる

    1. 画像があり、その画像は猫のイラストであるということがわかる

    2. 無視される (画像があることも通知されない)

    3. 画像があるということがわかる

    12
    装飾用の画像など
    画像自体に意味がないケース

    View Slide

  12. note inc.
    ②クリックイベントのついた要素

    ボタンではない要素に対してクリックイベントを設定する

    ● Tabでフォーカスが当たらない

    ○ キーボード操作では触ることができないため
    要マウス操作

    ● スクリーンリーダーではクリック可能な要素であることがわからない

    ○ スクリーンリーダーからは使えない機能
    になってしまう

    13

    View Slide

  13. note inc.
    ②クリックイベントのついた要素

    じゃあどうするか

    1. div をbutton要素に置き換える

    2. role=”button”とtabIndexをつける

    14

    View Slide

  14. note inc.
    divをbutton要素に置き換える

    最もシンプルかつ望ましい方針

    ● tabIndexをつけなくてもTabでフォーカスが当たる

    ● スクリーンリーダーもボタンとして認識する

    15

    View Slide

  15. note inc.
    role=”button”とtabIndexをつける

    マークアップの都合上buttonタグを使えない時に検討する

    ● role=”button”を付与することでスクリーンリーダーがボタンとして認識するようになる

    ● tabIndexをつけることでタブ操作をしたときにフォーカスが当たるようにする

    ● キー操作でclickと同様の操作ができるようにする

    16

    View Slide

  16. note inc.
    role=”button”とtabIndexをつける

    ● 基本的にはHTMLの機能を使って表現する

    ○ タグを文脈によって使い分ける、など

    ● 表現しきれないときにWAI-ARIAの機能を使って補足してあげるのがベター

    17
    一点忘れてはいけないのが、 WAI-ARIA は必要な場合のみ使用する
    という点です。 理想的には、スクリーン
    リーダーのユーザーの理解に必要となる意味論の提供は、常に ネイティブの HTML 機能 を使用して行うべ
    きです。(中略)

    もう一度言いますが、必要な時だけ使ってください!

    https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics 


    View Slide

  17. note inc.
    ③アイコンボタン

    ● 視覚的に「ベルのマーク」というのがわかっているので、「通知かな?」と想像がつく

    ● 画面を見ることができないユーザーにはわからない

    altのない画像と同じで何もしないと
    「ボタンがある」ということだけしか伝わらない

    18

    View Slide

  18. 19
    押したら何が起こるかわからないボタンは押したくない 

    (ですよね?)


    View Slide

  19. note inc.
    20
    ③アイコンボタン

    ● aria-label属性を使うと要素に対して、ラベルをつけることができる

    ○ 画面には表示されないがスクリーンリーダーはこれを認識して読み上げてくれる

    ● 通知エリアの開閉を表現するためにaria-expanded/aria-haspopupなども設定している

    View Slide

  20. note inc.
    おわりに

    ● 見た目を大きく変えたりせずとも、属性の追加やマークアップなど

    少しの工夫でa11yを向上させることができる
    、と思いませんか…?

    ○ 思ってくれていたら嬉しい

    ● (時間の都合で紹介できませんでしたが)

    スクリーンリーダーを使って自分の作っているものや普段使うサイトを聞いてみるのもオススメ

    ○ 僕は自分のサイトが大変なことになっているので早く直したいです

    ● a11y向上やっていき!なフロントエンドエンジニアさん、求む

    ○ noteは実際にスクリーンリーダーを使うクリエイターさんの声が聞けたりと

    やりがいがある環境です(宣伝)

    21

    View Slide

  21. 22
    Thank you!


    View Slide

  22. View Slide