上のようなメニューをよく、フッターメニューとかで見かけることはありませんか？これ見た目もよく、手軽に作成できて便利ですよね。
でも、ユーザビリティの面で見ると、このやり方は、問題があります。音声ブラウザで、上のメニューを読んでもらうと、「メニュー1、棒、メニュー2、棒、メニュー3」と｜を棒と読むのです。これでは、音声ブラウザを利用しているユーザーには、不便です。
このことからメニューとメニューの間に｜を使用することは、できません。でもCSSを利用すれば、この問題も解決できます。
上のメニューは一例ですが、最初のメニューと、あまり変わりはないと思います。もちろんドットの仕切りではなく、｜の様にもできます。
これは、背景画像を使っています。背景画像ならalt要素もないので、音声ブラウザに余計な情報を読まれる心配がありません。
1×1pxの黒の画像を用意してCSSのbackgroundプロパティでY軸にリピートさせれば、このように見せることができます。
詳しい記述は、以下を参考にしてみてください。この、やり方は、僕の独自のやり方です。もっと良い記述があるかも知れません。いろいろ試してみてください。
HTMLファイル
<ul id="menu">
<li><a href="#">メニュー1</a></li>
<li class="dot-line"><a href="#">メニュー2</a></li>
<li class="dot-line"><a href="#">メニュー3</a></li>
</ul><br />
CSSファイル
ul#menu {
list-style-type: none;
color: #333333;
margin: 0;
padding: 0;
border: 0;
}
ul#menu li {
display: inline;
}
ul#menu li.dot-line {
background-image: url(img/dot_line.gif);
background-repeat: repeat-y;
background-position: left center;
padding-left: 7px;
}
コメントする