WAI-ARIAとは？
状態:-
閲覧数:769
投稿日:2018-01-10
更新日:2018-01-14
片仮名表記
・ウェイ・アリア
Web Accessibility Initiative - Accessible Rich Internet Applicationsの略(頭文字)
・HTMLやSVGで利用できるアクセシビリティ確保のための属性の仕様
・W3Cにおいてアクセシビリティ関連の活動を行って いる部門のWAIによって作成された、 アクセシブルなリッチ・ インターネット・アプリケーション を制作するための （要素と属性を追加する）仕様
HTMLマークアップでアクセシビリティを向上させる方法
・コンテンツに役割や状態、性質を明確に指定することで、コンテンツを読み取る機械はWebページやアプリケーション内の文脈を理解することができる
・これがユーザーに情報を的確に提供する材料となり、アクセシビリティが高まる
「何が／いつ／どう」変化したかという情報を、HTMLの要素や属性だけでは表現しきれないため
・HTMLは元々文書をマークアップするための言語
・JavaScript／CSSなどの導入により、Webア プリケーションの構造は複雑になっている
role属性
・これは見出しなのか、セクションなのかなどコンテンツの役割を表す
aria属性
・表示されている／隠れているなどコンテンツの状態や、どこから参照されるのかなど性質を表す
aria-label属性
・グローバルな属性なので、HTML5の文書であればどの要素にでも指定可能
WAI-ARIA 1.1
・aria-modalやaria-currentが追加される
・ウェイ・アリア
Web Accessibility Initiative - Accessible Rich Internet Applicationsの略(頭文字)
・HTMLやSVGで利用できるアクセシビリティ確保のための属性の仕様
・W3Cにおいてアクセシビリティ関連の活動を行って いる部門のWAIによって作成された、 アクセシブルなリッチ・ インターネット・アプリケーション を制作するための （要素と属性を追加する）仕様
HTMLマークアップでアクセシビリティを向上させる方法
・コンテンツに役割や状態、性質を明確に指定することで、コンテンツを読み取る機械はWebページやアプリケーション内の文脈を理解することができる
・これがユーザーに情報を的確に提供する材料となり、アクセシビリティが高まる
仕様を追加する理由
「何が／いつ／どう」変化したかという情報を、HTMLの要素や属性だけでは表現しきれないため
・HTMLは元々文書をマークアップするための言語
・JavaScript／CSSなどの導入により、Webア プリケーションの構造は複雑になっている
role属性
・これは見出しなのか、セクションなのかなどコンテンツの役割を表す
aria属性
・表示されている／隠れているなどコンテンツの状態や、どこから参照されるのかなど性質を表す
aria-label属性
・グローバルな属性なので、HTML5の文書であればどの要素にでも指定可能
WAI-ARIA 1.1
・aria-modalやaria-currentが追加される
年表
・WAI-ARIA 1.1がW3C の勧告 (Recommendation)になる
・WAI-ARIA Authoring Practices 1.1がノート（Note）になる
2014年3月20日
・WAI-ARIA 1.0 が、W3C の勧告 (Recommendation) になる
・Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳
WAI-ARIAを活用したフロントエンド実装 - role属性、aria属性の基礎知識
WAI-ARIAの考え方と使い方を整理しよう
ARIA
ARIA ラベルと関係性
ARIAの達成方法