HTML5HTML5のrole属性を考える!マークアップ時に意識したいことツイートHTML5にて新たに追加されたrole属性ですが、Webアクセシビリティの観点から考えてみました。WordPressをインストールした時点で入っているテーマに「twentyeleven」というテーマがあります。このテーマ内を読んでいくとrole属性が使われていることがわかります。検索ウェジェットにもrole属性がついています。そもそも「属性」とはなんでしょうか。color="#FF0000">(文字の色を赤)を例にするとcolor=”#FF0000′′の部分にあたりFONTタグに対し、色を指定している箇所となります。font部分は要素、colorの部分は属性名、#FF0000の部分は属性値と呼びます。HTMLの文書構造でよく使われるidやclassも要素に対する属性ということになります。color属性は色を指定するわけですが、role属性とはどのような属性値を指定する属性なのでしょうか。アプリケショーンrole属性はHTML5で新たに追加された属性です。これらはWebページの構成内である役割を担う要素に対し目印を付けることからランドマーク(Landmark)と呼ばれています。このように文書構造に対し目印をつけることでWebアクセシビリティの向上を図ります。Accessibility)とはWebにおけるアクセスのしやすさ、アクセス性の良さという意味になります。アクセスのしやすさを考えたもので、年齢や身体的条件に関係なく誰もがWebにアクセスでき、情報を入手できるように配慮するという考え方です。何の情報がどこにあるのか、この画像はどのような画像なのかという情報がWebページに盛り込まれていることによって目の不自由な方も音声読み上げソフトなどを利用しWebページから情報を得ることができます。設置例HTML5で新たに追加された要素に<header>があります。このタグは冒頭でサイト説明やロゴをまとめるために使用されることが多い要素ですが、これにランドマークロール属性を追加します。<header>サイト説明やサイトロゴほにゃらら・・</header>ここにランドマークrole属性を追加します。こんな感じになります。HTML/XHTMLを使うテーマでは文法エラーになるrole属性はHTML5から追加された属性ではありますがHTML/XHTML+CSSのWebページでも使用することができます。role属性が入っているからといってWebページの表示がくずれることはありません。HTML5以前のHTML/XHTMLで作られたWordPressのテーマに検索ウェジェットを追加するとrole属性が入るため、文法上では文法エラーになります。Serviceにて行うことができます。公共施設の階段部分にスロープがつき、階段には手すりがつき、住居内に段差がないバリアフリー住宅が増えるなど生活面では多くのユーザビリティ、アクセシビリティ向上が進められています。Webの世界でもこの流れは今後どんどん進んでいくことでしょう。HTML5で作られたテーマへの導入はもちろんですが、HTML/XHTMLを使用したテーマでも文法上エラーになるものの先述したようにブラウザでの表示上問題がないためWebアクセシビリティの観点からrole属性の導入を検討しても良いかもしれませんね。■後編にあたる記事投稿しました。宜しければ併せてお読みください。生活でしたが見ているだけよりも踊らにゃソンソンの精神でWebの輪に参加すべくBLOG開設。背景を半透明すりガラス風に。reserved.ごすてっぷ:WordPress、Webサービスなどの情報を5ステップくらいで紹介しています。