2020年2月13日ツイートシェアB!はてブポケット「WAI-ARIA」とは、W3Cの中の団体が定めているWebアクセシビリティに関する規格ですね。Initiative」の略で、「ウェイ」と読むらしいです...HTMLは標準のタグでマークアップするだけでは、すべてに人に十分な情報が届けられない可能性があったりします。そこで、「WAI-ARIA」が定めたHTML属性を使うことで、「より伝わりやすいHTMLタグにしよう」ということですね。「WAI-ARIA」公式文書を見ると、以下のように定義されていました。ウェブアクセシビリティの分野は、障害をもつ人にとってどのようにすればウェブコンテンツを利用可能にするかを定義する。日本語訳ということで、Webアクセシビリティを考慮したマークアップをする上で欠かせない「WAI-ARIA」について、簡単な紹介と、代表的なコーディング例を見ていきます。「WAI-AREA」には大きく以下の3つの定義があります。ロールプロパティステートロールロールは「role="main"」のように、HTML要素に対してどういった役割の要素かを定義するものです。マークアップを間違えた場合(例えばbuttonとしての振る舞いなのにdivで作成した場合とか)にも、role="button"といった感じで無理やり役割を指定することも可能です。推奨はされていませんが...)プロパティプロパティは「追加」みたいなイメージです。area-label="トップへ戻る"のような感じで、ロールで与えた役割に対してプラスαで追加が必要な場合に定義してあげます。ステートステートは「状態」を表します。area-expanded="true"のように、「プロパティで追加したアイテムが展開中ですよ」みたいな状態を提供します。ロール、プロパティ、ステートを付与してあげることで、HTMLタグの意味がより深く指定できるということですね。ちなみに「ロール」「プロパティ」「ステート」の説明は、「コーディングWebアクセシビリティ」がめちゃくちゃ分かりやすくておすすめです。「ランドマークロール」という特に重要視されるロールがあります。ユーザーが目的に素早くアクセスできるように、大枠のセクションを目的別に分けて指定するものですね。ランドマークロールアイコンボタンに意味づけアイコンや記号だけのボタンって見えない人にとっては何を意味しているか分かりません。area-labelやarea-labelledbyでラベル付けしてあげてください。fa-sync-alt"></i></button>展開されたかどうかプロパティとステートを使った例です。ハンバーガーメニューなどで使われたりします。aria-hidden="true"></div>aria-controls="drawer"はプロパティで、「#drawerを持ってますよ!」と指定しています。その、持っている#drawerが展開されているかどうかをaria-expanded="false"で管理しているわけですね。ステートの設定でこの例だと「展開されていない」という状態になります。この辺の状態は、JavaScriptでボタンが押されたかどうかで変更していく感じです。役割の変更ラジオボタンじゃないのに、ラジオボタン的な振る舞いをしている場合の対処方法としては2つあります。type="radio"に書き換えるロールでrole="radio"を付与するもちろんHTMLタグを書き得るべきではありますが、状況によって書き換えられない場合は、せめてrole="radio"の指定だけでも行っておくと、機械がその要素をラジオボタンとして認識してくれるようになります。aria-checked="false">ラジオ3</div></div>ツールチップでヒントを与えるフォームとかでよく使われるのが、ヒントを与えるツールチップですね。area-tooltip>おなまえは「ひらがな」で入力してください。</div></p></fieldset></form>タブHTMLでタブを作る場合も配慮が必要になります。タブ選択部分は慣例的(?)にulが使われているのをよく見ますが、ulである必要性はまた考える必要はるかもです。@haniwa008WAI-ARIAの簡単な説明と、実際のコード例を書いてみました。これからも気づいたものがあれば、どんどん追加していく予定です。ロールプロパティステートの3つの意味を理解しておくとかなり作りやすくなるはずなので、まずはここをイメージできるようになるといいと思います。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。2.0】Webアクセシビリティの「HTML」の達成方法をおさらいはにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。