2012年06月03日 category : WordPress tags :

HTML5のrole属性を考える!マークアップ時に意識したいこと

このエントリーをはてなブックマークに追加

view

HTML5にて新たに追加されたrole属性ですが、Webアクセシビリティの観点から考えてみました。

WordPressをインストールした時点で入っているテーマに「twentyeleven」というテーマがあります。このテーマ内を読んでいくとrole属性が使われていることがわかります。また検索ウェジェットにもrole属性がついています。そもそも「属性」とはなんでしょうか。

HTML・CSSでいう属性とは<font color="#FF0000">(文字の色を赤)を例にするとcolor=”#FF0000″の部分にあたりFONTタグに対し、色を指定している箇所となります。font部分は要素、colorの部分は属性名、#FF0000の部分は属性値と呼びます。

HTMLの文書構造でよく使われるidやclassも要素に対する属性ということになります。color属性は色を指定するわけですが、role属性とはどのような属性値を指定する属性なのでしょうか。

01 . role属性は「役割」を指定する

・role=”banner” : ヘッダー部分
・role=”main” : メインコンテンツ
・role=”contentinfo” : コンテンツ情報、メタ情報
・role=”navigation” : ナビゲーション
・role=”search” : 検索機能
・role=”complementary” : 補助的情報部分
・role=”application” : アプリケショーン

role属性はHTML5で新たに追加された属性です。これらはWebページの構成内である役割を担う要素に対し目印を付けることからランドマーク(Landmark)と呼ばれています。このように文書構造に対し目印をつけることでWebアクセシビリティの向上を図ります。

02 . Webアクセシビリティ(Web Accessibility)とは

Webにおけるアクセスのしやすさ、アクセス性の良さという意味になります。これは利用者側、閲覧者側のアクセスのしやすさを考えたもので、年齢や身体的条件に関係なく誰もがWebにアクセスでき、情報を入手できるように配慮するという考え方です。

何の情報がどこにあるのか、この画像はどのような画像なのかという情報がWebページに盛り込まれていることによって目の不自由な方も音声読み上げソフトなどを利用しWebページから情報を得ることができます。

03 . 設置例

HTML5で新たに追加された要素に<header>があります。このタグは冒頭でサイト説明やロゴをまとめるために使用されることが多い要素ですが、これにランドマークロール属性を追加します。

<header>
	サイト説明やサイトロゴほにゃらら・・
</header>

ここにランドマークrole属性を追加します。こんな感じになります。

<header role="banner">
	サイト説明やサイトロゴほにゃらら・・
</header>

04 . HTML/XHTMLを使うテーマでは文法エラーになる

role属性はHTML5から追加された属性ではありますがHTML/XHTML+CSSのWebページでも使用することができます。role属性が入っているからといってWebページの表示がくずれることはありません。

しかしHTML5以前のHTML/XHTMLで作られたWordPressのテーマに検索ウェジェットを追加するとrole属性が入るため、文法上では文法エラーになります。文法チェックはW3CのMarkup Validation Serviceにて行うことができます。

05 . Webのバリアフリー化

公共施設の階段部分にスロープがつき、階段には手すりがつき、住居内に段差がないバリアフリー住宅が増えるなど生活面では多くのユーザビリティ、アクセシビリティ向上が進められています。Webの世界でもこの流れは今後どんどん進んでいくことでしょう。

HTML5で作られたテーマへの導入はもちろんですが、HTML/XHTMLを使用したテーマでも文法上エラーになるものの先述したようにブラウザでの表示上問題がないためWebアクセシビリティの観点からrole属性の導入を検討しても良いかもしれませんね。

■後編にあたる記事投稿しました。宜しければ併せてお読みください。
【続】HTML5のrole属性を考える!導入後ブログはこう変わる

HOME >>  WordPress > HTML5のrole属性を考える!マークアップ時に意識したいこと