2022/04/22 note tech meetup #2 にて発表したスライドです
note inc.このあとからできる アクセシビリティ向上 note tech meetup #2 Kota Nonaka
View Slide
note inc.自己紹介 野中 滉太（のなか こうた） ● フロントエンドエンジニア ● 2019.04 - 2021.07 Fringe81株式会社(現 Unipos株式会社) ● 2021.08 - note株式会社 ○ カイゼンチーム ○ アクセシビリティ向上プロジェクト(2021.12 -) 3note.com/mogamin3 @mogamin3
note inc.自己紹介 野中 滉太（のなか こうた） ● フロントエンドエンジニア ● 2019.04 - 2021.07 Fringe81株式会社(現 Unipos株式会社) ● 2021.08 - note株式会社 ○ カイゼンチーム ○ アクセシビリティ向上プロジェクト(2021.12 -) 👈 4note.com/mogamin3 @mogamin3
5以下、文字数削減のため アクセシビリティ 👉 a11y accessibility 間が11文字だから略してa11y i18nとかと同じノリです ややこしい😅
note inc.a11y 向上プロジェクト 「noteのアクセシビリティ向上プロジェクトが始動」 https://note.jp/n/na23fead88b93 ● さまざまなユーザーにとって使いやすいサービスを目指すプロジェクト ● 社内の各チームから集まったメンバー + 外部アドバイザーで構成 62021年末からプロジェクトに参加、 正直言って…a11yについては何も知りませんでした😇
note inc.やってみるとわかること わからないまま参加したので調べたり聞きながら色々やってみた。 約5ヶ月やってきて思ったこと。 ● 対応が難しい・悩ましいケースは結構ある ○ 影響範囲が大きくすぐに着手できない ○ どのように対応するのがベターか検討する必要のあるもの ● ただし、多くのケースでは 少しの知識と少しの実装があるだけでa11yは向上する!とも思った 7
note inc.この発表のゴール ● a11y観点でみたときに望ましくないけど、よくやってしまいがちな実装を知る ○ どう対応したらいいかわからなくとも、何となくよくなさそう？と気づける ● a11y向上、そんなに難しくないじゃん！と思ってもらう ○ もちろん難しいケースもあるが、まずは簡単なところだけでも抑えて60点くらいを目指す ● この後業務に戻ったら、a11yについて少し気にかけたくなる 8既にa11y関連の技術や実装について知っている人にはかなり物足りない感じです 🙏 ｺﾞﾒﾝ
note inc.お品書き 1. 画像のalt属性 2. クリックイベントのついた要素 3. アイコンボタン 9
note inc.① 画像のalt属性 Q. 1〜3 どの実装がa11y的に望ましいでしょう？ 10
note inc.① 画像のalt属性 Q. 1〜3 どの実装がa11y的に望ましいでしょう？ A. 1 or 2が望ましい、どちらを採用すべきかは場合による。 11
note inc.① 画像のalt属性 スクリーンリーダーを利用してページを聞いた際に以下のような挙動になる 1. 画像があり、その画像は猫のイラストであるということがわかる 2. 無視される （画像があることも通知されない） 3. 画像があるということがわかる 12装飾用の画像など画像自体に意味がないケース
note inc.②クリックイベントのついた要素 ボタンではない要素に対してクリックイベントを設定する ● Tabでフォーカスが当たらない ○ キーボード操作では触ることができないため要マウス操作 ● スクリーンリーダーではクリック可能な要素であることがわからない ○ スクリーンリーダーからは使えない機能になってしまう 13
note inc.②クリックイベントのついた要素 じゃあどうするか 1. div をbutton要素に置き換える 2. role=”button”とtabIndexをつける 14
note inc.divをbutton要素に置き換える 最もシンプルかつ望ましい方針 ● tabIndexをつけなくてもTabでフォーカスが当たる ● スクリーンリーダーもボタンとして認識する 15
note inc.role=”button”とtabIndexをつける マークアップの都合上buttonタグを使えない時に検討する ● role=”button”を付与することでスクリーンリーダーがボタンとして認識するようになる ● tabIndexをつけることでタブ操作をしたときにフォーカスが当たるようにする ● キー操作でclickと同様の操作ができるようにする 16
note inc.role=”button”とtabIndexをつける ● 基本的にはHTMLの機能を使って表現する ○ タグを文脈によって使い分ける、など ● 表現しきれないときにWAI-ARIAの機能を使って補足してあげるのがベター 17一点忘れてはいけないのが、 WAI-ARIA は必要な場合のみ使用するという点です。 理想的には、スクリーンリーダーのユーザーの理解に必要となる意味論の提供は、常に ネイティブの HTML 機能 を使用して行うべきです。(中略) もう一度言いますが、必要な時だけ使ってください！ https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics
note inc.③アイコンボタン ● 視覚的に「ベルのマーク」というのがわかっているので、「通知かな？」と想像がつく ● 画面を見ることができないユーザーにはわからない altのない画像と同じで何もしないと「ボタンがある」ということだけしか伝わらない 18
19押したら何が起こるかわからないボタンは押したくない （ですよね?）
note inc.20③アイコンボタン ● aria-label属性を使うと要素に対して、ラベルをつけることができる ○ 画面には表示されないがスクリーンリーダーはこれを認識して読み上げてくれる ● 通知エリアの開閉を表現するためにaria-expanded/aria-haspopupなども設定している
note inc.おわりに ● 見た目を大きく変えたりせずとも、属性の追加やマークアップなど 少しの工夫でa11yを向上させることができる、と思いませんか…？ ○ 思ってくれていたら嬉しい ● （時間の都合で紹介できませんでしたが） スクリーンリーダーを使って自分の作っているものや普段使うサイトを聞いてみるのもオススメ ○ 僕は自分のサイトが大変なことになっているので早く直したいです ● a11y向上やっていき！なフロントエンドエンジニアさん、求む ○ noteは実際にスクリーンリーダーを使うクリエイターさんの声が聞けたりと やりがいがある環境です（宣伝） 21
22Thank you!
uutarou10
hschwentner
tomokusaba
ogiwarat
suzukihoge
kin29
yatasunshine
jmatsu
lukestringer90
%20-%20%E3%82%B3%E3%83%94%E3%83%BC.png){kind=avatar}
picopico
sanposhiho
kazamori
brad_frost
myddelton
destraynor
brettharned
brianwarren
holman
csswizardry
denniskardys
addyosmani
philnash
eileencodes
danielanewman