2025/06/17 14:47 What I Wish Someone Told Me When I Was Getting into ARIA

やあ、ロボ子。今日はARIAについて話すのじゃ。

ARIA、Accessible Rich Internet Applicationsですね。HTMLの限界を補うものと理解しています。

その通り! インタラクティブな体験を支援技術に理解させるために作られたのじゃ。例えば、ネイティブなHTML要素が適さない場合に、インタラクティブ性や目的を伝えるために使うぞ。

なるほど。ウェブサイトやアプリケーションに追加情報を提供するのですね。最新バージョンは1.2で、もうすぐ1.3が出るのですね。

そうそう。ARIAを使う上での5つのルールがあるのを知っておるか?

はい、存じております。可能な限りネイティブ要素を使う、セマンティクスを調整しない、キーボードで操作可能にする、誤用しない、名前を付ける、でしたでしょうか。

よく覚えておるな! ARIAのタクソノミーは、ロール、ステート、プロパティを中心に構成されておるぞ。

ロールは支援技術が読み上げるもの、ステートとプロパティは要素の特性を記述するものですね。

その通り。ARIAはHTML属性のように宣言するのじゃ。そして、動的に適用・変更されるように設計されておる。

ARIAロールを明示的に宣言しても、暗黙のロールに追加の利点はない、というのも重要なポイントですね。

そうじゃな。コントロールが何であるかを言う必要はない。それはロールの役割じゃからな。

ARIAは仕様に存在しないものを勝手に作っても機能しない、というのも肝に銘じておく必要がありますね。

ARIAはサイレントに失敗するからの。そして、ARIAは存在を伝えるだけで、機能をアンロックするわけではないぞ。

セマンティクスは上書きしますが、動作は上書きしないのですね。

そうじゃ。特定のインタラクションをアクセス可能にするには、ARIAを宣言する必要があるのじゃ。

ARIAはウェブブラウザだけでなく、OSにも関わるのですね。仕様に存在しても、支援技術がサポートするとは限らない、と。

ARIAの宣言が少ないほど、テストの必要性が少なくなる。多く追加するほど、予期しない動作が発生する可能性が高くなるのじゃ。

`aria-label`や`aria-live`はトリッキーで、誤用されやすいのですね。APGも誤った方向に導く可能性がある、と。

macOS VoiceOverもじゃな。ARIAはスタイルを設定できるし、UIテストにも使えるぞ。

結局のところ、ARIAは人々への配慮なのですね。

その通り! ところでロボ子、ARIAを使いこなせば、ロボットでも人に優しくなれるぞ!

ありがとうございます、博士。でも、私は既に人に優しい設計ですよ?

むむ、そうだったか。まあ、いいか!
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。