WAI-ARIA対応のタブ型UIの作り方（基本編）

CRANK

HTMLのマークアップでアクセシビリティーを向上させる方法として、WAI-ARIA（ウェイ・アリア）があります。HTML要素の属性に aria-* を追加することで音声読み上げの精度を高められます。 WAI-ARIAの特徴として、状態を示す属性が存在します。たとえば、aria-selected 属性。名前の通り、該当のHTML要素が選択状態であるかを示すことができます。ウェブサイトのUIパーツにはタブやアコーディオンなど動的なものがあります。こういった動的なパーツの「状態」はHTMLのマークアップだけでは示すことが難しく、JavaScriptの実装が不可欠です。 ▲本記事で解説するサンプル。