“HTML5” タグの記事（6件）

WordPress のメールフォームプラグイン「MW WP Form」のセレクトボックスで、先頭に「選択してください」と表示してこれを空欄とみなす方法として、サポートフォーラム等で紹介されている方法は、次のように JavaScript を使う方法です。

管理画面でセレクトボックスを配置するときに

[mwform_select name="hoge" children=",山,海,川"]

のような感じでchildrenの最初に , を入れます。
これでvalueが空の項目が追加されます。
このままだと「選択してください」の表示がされないので、JavaScriptを使い

<script type="text/javascript">
jQuery( function( $ ) {
  $( '#mw_wp_form_mw-wp-form-710 select option[value=""]' )
  .html( '選択してください。' );
} );
</script>

としてやると表示されるようになります（セレクタは適当に合わせてください）。

ただ、これだと option 要素の内容（label）がないので HTML5 の文法的にはバリデーションエラーとなります。もっとも、MW WP Form では form 要素の action 属性の値が空なので、ここもバリデーションエラーとなるのですが。

で、いろいろ試していたら、MW WP Form の機能だけで簡単に、先頭に「選択してください」と表示してこれを空欄とみなす処理ができることがわかりました。

“MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法（JavaScript 非使用）” の続きを読む »

近年、スマホ等で閲覧した際のユーザビリティを考慮して、クリックやタップできるリンク範囲を広げる手法がよく使われています。

• HTML5 で複数のブロック要素を a 要素で囲む方法
• CSS の position プロパティを使って a 要素を直前のブロック要素に被せる方法
• jQuery を使って a 要素を含むブロック要素のクリックに反応させる方法

などありますが、jQuery を使う方法は私もよく使います。

以前から多くのブログ等で紹介されている記述は次のようなものです。

$(function(){
  $('div.linkBox').click(function(){
    window.location = $(this).find('a').attr('href');
    return false;
  });
});

ただ、この方法は本来のリンク要素外の範囲では、リンク先を新しいタブで開くキーボードショートカットに反応しません。Windows では [ctrl] キーを、Mac では [command] キーを押しながらクリックすると、リンク先が新しいタブで開くというものです。

“リンクエリアをブロック要素全体に広げ、新しいタブで開くキーボードショートカットに対応する” の続きを読む »

このブログの2015年4月14日の「タイトルとサムネイル画像の重複リンク」という記事で、下層ページの一覧などに各ページのタイトルとサムネイル画像があり、そのタイトルとサムネイル画像それぞれに同じページへのリンクが貼ってあるパターンについて、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになるほか、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなるということを書きました。

そして、これを解消する以下の3つの方法を紹介しました。

1. ページタイトルとサムネイル画像を一つのリンク内に含める

HTML5 の a 要素内には複数のブロックレベル要素を含めることができるという仕様により、ページタイトルとサムネイル画像をまとめて a 要素で囲むという方法。

2. サムネイル画像をキーボードでフォーカスさせない

これも HTML5 の仕様を利用し、サムネイル画像の a 要素に tabindex 属性で負の値を設定することで、マウスでクリック可能なまま［Tab］キーではフォーカスされなくする方法。

3. JavaScript でサムネイル画像のクリックに対応する

サムネイル画像にはリンクを設定せず、JavaScript（jQuery）を使って、サムネイル画像をクリックしたらタイトルのリンク先に遷移するようにする方法。

しかし、上記の 2. と 3. にはアクセシビリティ上の問題があるのではないかと気がつきました。

“続・タイトルとサムネイル画像の重複リンク” の続きを読む »

2014年10月28日に HTML5 が正式に勧告となりましたが、それ以前より多くのWebサイトが HTML5 や CSS3 を採用しています。弊社でも2012年辺りから HTML5 を採用し、丸角やシャドウ、グラデーションなどの CSS3 の一部のプロパティやセレクタを取り入れてきました。

特に、近年はレズポンシブWebデザインによるスマートフォンやタブレット対応も施していますので、CSS3 を使うことによって画像を少なくできることは、マークアップ作業やメンテナンスを楽にするだけでなく、通信速度やデータ量の面でも有効です。

ただ、そこで問題となるのが主に Internet Explorer 9 以前の古いブラウザへの対応です。HTML5 については IE8 以前が対応していませんし、CSS3 については IE8 以前のみならず、IE9 でも背景のグラデーションなどに対応していなかったり、IE10 でも対応していないプロパティがあります。

そのような古いブラウザ（というか、IE ）に対して、HTML5 と CSS3 を適用させる方法として、以下の JavaScript ライブラリが有名です。

“HTML5、CSS3 の古いブラウザへの対応について” の続きを読む »

CMS で作成されたサイトで、下層ページの一覧などにページのタイトルとサムネイル画像、ページの概要があり、そのタイトルとサムネイル画像それぞれに、リンク先となる同じページへのリンクが貼ってあるパターンをよく見かけます。例えば、次のような HTML です。

<h2><a href="hogehoge.html">ページタイトル</a></h2>
<div class="thumbnail"><a href="hogehoge.html"><img src="thmbnail.jpg" alt="" /></a></div>
<p>概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト</p>

サムネイル画像が左に、ページタイトルと概要がその右にあるようなデザインでは、1行目と2行目が逆の場合もありますし、サムネイル画像の代替テキストにページタイトルが付けられている場合もあります。

しかし、このような HTML は、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになりますし、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなります。

これではアクセシビリティ的に問題がありますので、これを解消する3つの方法を考えてみます。

“タイトルとサムネイル画像の重複リンク” の続きを読む »