2014年01月21日

ブートストラップ3のスクリーンリーダー用の設定とsr-onlyクラス

アクセシビリティ(視覚障害者を含めすべての人がWebに問題なくアクセスできる)を考慮した設定についてです。 
●長いナビゲーションメニューをスキップできるようにする
 
・ナビゲーションメニューにたくさんのリンクが含まれていると視覚障害者がスクリーンリーダーを使ってページの頭から読み上げているときに、実際のコンテンツにたどりつくのに時間を要してしまうのでスキップできるようにします。

<body>
<a href="#content" class="sr-only">メインコンテンツへスキップ</a>
<div class="navbar role="navigation">
   :
   :多数のリンクを含むナビテーションメニュー
   :
<div class="container" id="content">
ここからメインコンテンツ
</div>
</body>

●sr-onlyCSSクラス

・ブートストラップでは標準でsr-onlyというCSSクラスを用意し、ブラウザ上には表示されないようにしています。下記のように定義されています。

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
posted by ホノデザイン at 09:14| Comment(0) | ブートストラップ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: