2012年06月10日 category : WordPress tags :

【続】HTML5のrole属性を考える!実装後ブログはこう変わる

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

Webアクセシビリティ挿絵

HTML5にて新たに追加されたrole属性。自作テーマに導入後音声読み上げソフトで確認してみました。

HTML5から追加されたrole属性についてWebアクセシビリティの観点からマークアップ時に意識したいこという記事を以前投稿しました。本記事はその続編にあたります。宜しければ併せてお読みください。
HTML5のrole属性を考える!マークアップ時に意識したいこと

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

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

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

ヘッダー部分はサイトタイトル名やサイトロゴ、サイト紹介などがある部分です。メインコンテンツはブログでいうと記事部分ですね。contentinfoはコンテンツ情報やメタ情報などそのサイトやブログの情報が含まれる部分になるのでフッターに用いられます。

このようにHTML文書構造に対し目印(ランドマーク)をつけWebアクセシビリティの向上を図っていくための属性となります。

WebアクセシビリティとはWebにおける利用者側、閲覧者側のアクセスのしやすさを考えたもので、高年齢や身体的条件に関係なく誰もがWebにアクセスでき、情報を入手できるように配慮するという考え方です。

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

02 . 音声読み上げソフト(スクリーンリーダー)

音声読み上げソフト(スクリーンリーダー)とはパソコンを音声や点字ディスプレイで利用するためのソフトです。 マウス操作やキー入力、テキストファイルなどを音声で読み上げます。様々な機能がありますが当ブログではWebサイトに関する項目に着目してみます。

Windowsで利用できる音声読み上げソフトに、NVDAというスクリーンリーダーソフトがあります。これはWindowsPC向けのソフトですが無料で利用することができます。今回確認を行いたいrole属性にも対応済みですのでNVDAをインストールしてみました。

スクリーンリーダーNVDA日本語版

03 . NVDAってこんなソフト

インストール後NVDAを起動するとスクリーン上のマウス操作にあわせて音声での読み上げが始まります。当ブログのメニュー部分で試したところHOMEにマウスを合わせると「ホーム」、WordPressにマウスを合わせると「ワードプレス」と読み上げました。

HOMEの場合、「エイチオーエムイー」と読むと昔聞いたことがあったので気になってたのですがちゃんと「ホーム」と読み上げました。

ではNVDAを起動した状態で当ブログの「HTML5のrole属性を考える!マークアップ時に意識したいこと」の記事にアクセスしてみます。

NVDA+F7で要素リストが起動します([Insert]キーが[NVDA]キーとして使用できます)。項目リストにはリンク、見出し、ランドマークという項目があります。キーボードだけで操作が可能で、例えばAlt+Kをクリックするとリンクが選択されます。

NVDA画面

この状態でTabキーをクリックするとリスト表示されている部分にカーソルが移動しますので上下キーで項目を移動します。この時もカーソルがある箇所の項目を随時読み上げます。カーソルが当たっている状態でENTERキーをクリックするとWebブラウザ上でその項目へ飛び、読み上げが開始されます。

同様にAlt+Hで見出し(hタグ付されている項目)のリストが表示され、Alt+Dでランドマーク(role属性付されている項目)のリストが表示されます。さてrole属性(ランドマーク)を導入していないテーマまたは自作テーマ(私です)を見るとこのような状態です。あらま…(*_*;

NVDA画面

04 . role属性の設置

当ブログをランドマーク化すると以下のような感じになります。画面が小さいですが赤文字はID名ではなくランドマークの属性値になります。メイン、サイド、フッターに、ナビと検索をラッピングしたヘッダーという構成です。

role属性

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


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

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

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

05 . HTML5自作テーマにrole属性を実装するとこう変わる

では確認してみましょう。ランドマークが反映されています。ラッピングしている箇所もちゃんとヘッダー(バナー)のなかにナビゲーションと検索がまとめられていますね。これでサイト内の目的の場所へスムーズに移動できるようになりました。

NVDA画面

普段hタグは文書構造上意識して該当箇所に入れていると思います。HTML5からはランドマーク属性の使用が可能ですので是非あわせてランドマーク属性も入れてみてください。

今回音声読み上げソフトをインストールしてrole属性の確認を行ったわけですが、まずインストール時点のセットアップウィザードからいきなり読み上げが始まります。これは正直音声にビックリしました。つまりウィザードから音声がでることを私は想定していなかったわけです。

しかし音声読み上げソフトのインストールなので音声で読み上げることは当然なんですよね。それと同じく日付ですが当ブログでは記事冒頭に2012/06/10と投稿日をいれています。これも読み上げになると「2012スラッシュ06スラッシュ10」と読み上げます。

2012年06月10日としたほうが親切ですね。また変更しておきます。定期的に音声読み上げソフトを起動して通常のマークアップでは気付きにくい部分に注意し誰もがアクセスしやすい状態を作っていかなければと思いました。

■前編にあたる記事です。宜しければ併せてお読みください。
HTML5のrole属性を考える!マークアップ時に意識したいこと

HOME >>  WordPress > 【続】HTML5のrole属性を考える!実装後ブログはこう変わる