こんにちは、フロントエンドエンジニアの mehm8128 です。
今回は敢えて、a11y 上の理由から Deprecated になった HTML と ARIA をまとめてみようという記事です。
Deprecated の定義
今回 “Deprecated” は、基本的に MDN において Deprecated の表示があるものを指すこととします。ただし、MDN からも既に削除されているものについては例外となります（＝ Deprecated の表示がないけど今回の定義に含みます）。
MDN の “Deprecated” 表示については以下のページに記載されています。mdn/browser-compat-data からデータを参照しているので、mdn/browser-compat-data のドキュメント も参照されています。
また、今回は主に a11y 上の理由で Deprecated になったものを扱いますが、それ以外の理由で Deprecated になったものには、主に以下の理由があります。
- HTML のマークアップではなく、CSS でスタイルをつけるべきもの
- セキュリティ上の問題があるもの
- 他の要素で代替可能なもの
それでは、a11y 上の理由から Deprecated になったものを見ていきます。
Deprecated な HTML
これから紹介するいくつかの HTML 要素は、より詳細な背景が以下の Medium の記事に書かれています。
要素は、テキストが横に流れていくようなアニメーションを表現することのできる要素です。
MDN 内に例があり、アクセシビリティ上の問題を体験することができるサイト「駒瑠市」の 「動き続ける駒瑠市」の例 でも確認することができます（実際に 要素が使われています）。
このような UI は WCAG 2.2 の達成基準 2.2.2 一時停止、停止、非表示 に違反するため、a11y 上の問題があります。また前述したような、HTML によるマークアップではなくて CSS によるスタイリングで表現するべきものでもあります。
どうしてもこのような UI を実現したい場合は、MDN に記載のある通り CSS アニメーションや prefers-reduced-motion による対応で実現したり、ボタンを押してアニメーションを一時停止できるようにしたりする必要があります。
要素は、テキストを点滅させ続けることができる要素です。
点滅させ続けるような UI は 要素と同様に WCAG 2.2 の達成基準 2.2.2 一時停止、停止、非表示 に違反するため、a11y 上の問題があります。
UDN（MDN のアーカイブサイト） で、動作している gif を見ることができます。
なお、点滅による発作などの症状については Web accessibility for seizures and physical reactions – Accessibility | MDN で解説されているようです。
そもそも IE でしかサポートされていなかったという点にも問題がありますが、音声を自動再生して流し続けることは WCAG 2.2 の達成基準 1.4.2 音声の制御 に違反するため、a11y 上の問題があります。
特にスクリーンリーダーユーザーは音に頼って Web サイトを閲覧するので、音声が再生され続けると Web サイトを閲覧できなくなってしまいます。
「駒瑠市」の 「自動再生の音声がある駒瑠市」の例 で音声が自動再生され続ける例を確認できますが、 を用いることで自動再生を実現しています。
、、 要素のように、別の HTML ドキュメントを表示できるように使われていた要素です。
a11y 上の問題としてはスクリーンリーダーの読み上げにおいて不都合があったようです。
しかし、
のような要素がよりセマンティックでアクセシブルであったため、非推奨となりました。
Deprecated な ARIA
directory ロール
directory ロールは、目次などといった参照リストに使われるロールでした。
しかし、list ロールがよりアクセシブルであるため、WAI-ARIA 1.2 で非推奨になりました。
aria-grabbed
aria-grabbed は、ドラッグ＆ドロップで要素が掴まれた状態を表す属性でした。
しかし、将来的に新しい機能に置き換わるため、WAI-ARIA 1.1 で非推奨になりました。
非推奨になるまでの流れや新しい機能についてはおそらく以下のメーリングリストを追うと分かるのですが、追いきれませんでした。
aria-dropeffect
aria-dropeffect は、ドラッグされたオブジェクトがドロップされるときに何が起こるかを伝えるための属性でした。
例えば aria-dropeffect="copy" であれば、ドロップされたオブジェクトがコピーされることを示します。
aria-grabbed と同様、将来的に新しい機能に置き換わるため、WAI-ARIA 1.1 で非推奨になりました。
静的解析
markuplint を用いることで、Deprecated な HTML や ARIA に対して警告を表示することができます。
まとめ
HTML 要素や ARIA はしっかり MDN や HTML Living Standard、WAI-ARIA を参照し、非推奨でないものを正しい使い方で使うようにしましょう。
Views: 0
