Zenn
Closed3

やってる？アクセシビリティ対策 / 参加メモ

アクセシビリティ
たたたたたた

スピーカー：ゆうてんさん（Twitter）
日時：2023/01/18 22:00～23:00
主催：フロントエンドクラブ

フロントエンドクラブの「やってる？アクセシビリティ対策」に参加
下記、自分用メモ

実はみんなアクセシビリティをやっている？

  • マークアップするときに、全て <div> で書いている人はいない
  • みんな <h1> や <ul>、<li> 使ってるよね？ これもアクセシビリティをやっているということになる
  • なので、やっているかやっていないかというと「やっている」と言えるかもしれない。
  • つまり、「どこまで幅広くやっているか」というところが問題になる

WCAG から JIS に適用されるまでにはタイムラグがある

WCAGとは...？🤔

Web Content Accessibility Guidelinesは、ウェブのコンテンツを障害のある人に使いやすいようにするためのウェブアクセシビリティに関するガイドラインである。（Wikipedia）
WCAGリンク: https://waic.jp/docs/WCAG21/

  • WCAG2.0（2008年）がJISに反映されたのが2016年。かなりのタイムラグがある。
  • WCAG2.0はスマホの対応が盛んではない。まだPC対応がメイン。
  • WCAGは2.1（現在の最新）からスマホに対応し始めている。
  • 上記のことから、JISを守ればいいというものではない。できれば、最新のもので対応しておきたい。

アクセシビリティは、障がい者・高齢者のものだけではない？

  • アクセシビリティは、障がい者・高齢者のものだけと思われがち
  • ちゃんとアクセシビリティを学ぶと、障がい者・高齢者のマイノリティのものではなく、健常者と呼ばれている人（難なくWebサイトを扱える人）でも、アクセシビリティを高めることでもっと使いやすくなる
  • 例えば、マウスが壊れた（電池が切れた）、仕事を素早くこなすなど、キーボードで操作できたら良いのにという場面はいくらでもある。マウスだけでしか操作できないというのは相当不便。

フォーカス（CSSのアウトライン）は良く消されてしまう...

  • セレクトボックスやリンクなどのフォーカスのインジケーター（標準青く光るやつ）が消されてしまうと、Tabキーで移動したいときに自分がどこにいるかわからない
  • CSSのアウトラインプロパティというのが良く消されてしまう。これやられるとキーボード操作ができなくなる

フォーカスが消される理由

  • ボタン要素がクリックするとインジケーター（青く光るやつ）がでてきてしまう。デザイン的にかっこよくない...。「これなに？😡」と言われる。
  • なので、マウスカーソルのときはインジケーターが出てきて欲しくないが、Tab操作の時は出てきて欲しい。でもボタン要素を使用するとどちらも出てきてしまう
  • <a> はクリックでインジケーターは出てこないけど、Tabキーでは出てくる。 <button> 要素はクリックでもTabキーでもインジケーターが出てくる。
  • これを解決するために、最新のCSSでは「:focus-visible」という疑似クラスがある。それで対応可能。
  • 昔はインジケーターを対応するためのライブラリがあったが、今は必要ない。今は標準（:focus-visible）でOK。それにアウトラインだけ設定する。

<a> と <button> について

  • <a> に対してクリックイベントに何か仕込み、実際にリンクしないのは基本的になし。
    →理由：スクリーンリーダーでは、<a> はリンクって読むし、<button> はボタンって読む。なので、スクリーンリーダーや点字ディスプレイなどを使用している人は、耳や点字などで判断するので、そういった判断できるきっかけ・手掛かりをごちゃごちゃにしてはいけない。

▼参考記事
https://zenn.dev/yusukehirao/articles/4d978c4d9ea788

<a> はすごい便利！ <button> ではできないこと

  • 右クリックしたらコンテキストメニューがでる。別タブも開ける。
  • ダウンロードが出てくる（href属性の中に正規のURLが入っているからできる）
  • マウスポインタ重ねたときに左下にURLがでるものも <a> の挙動
  • 上記のことから <a> を適切に利用しないはすごいもったいない

▼リンクを右クリック

▼ボタンを右クリック

▼マウスをリンクに重ねると左下にURLが出てくる（Chrome）

最後に

  • （自論だが、）初学者をみていると、ほとんどの方は HTML をちゃんと理解しないまま JavaScript の勉強に進んでいる様子。まずはしっかりと HTML を勉強して欲しいなぁ...
  • これからの時代、アクセシビリティに求められているのは "HTML に詳しい人"。
    →アクセシビリティについて詳しい人が欲しい会社は結構多い。ぜひアクセシビリティを学んで欲しい！

主催

フロントエンドクラブ

https://frontendclub.org/

このスクラップは2023/01/19にクローズされました