有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > jQuery

フロントエンドエンジニアのblog

RSS

タグ: jQuery

Welcart のメンバー情報入力フォームにラベルを設定

この記事は2017年9月4日に書かれたものです。情報が古い可能性がありますのでご注意ください。

Welcart で商品購入時にお客様情報を入力する場合や発送先を入力する場合、あるいは会員登録する際のメンバー情報入力フォームについての問題。名前や住所、電話番号などの項目とテキスト入力欄などのフォーム部品には、ラベルによる関連付けがありません。ラベルはアクセシブルなフォームにとって最低限必要な要素であり、これではアクセシビリティ的によろしくありません。

メールアドレスとパスワードの入力枠については、テーマファイルに直接記述しますので、その記述の中でラベルによる関連付けを加えることができますが、名前や住所、電話番号などの項目はプラグインによって自動生成されますので、容易にソースを変更することができません。(プラグインのファイルを編集すれば可能ですが、アップデートの際の不具合の可能性や手間を考えるとプラグインのファイルは触りたくないので)

そこで jQuery を使ってラベルによる関連付けを加えてみました。

“Welcart のメンバー情報入力フォームにラベルを設定” の続きを読む »

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

この記事は2017年4月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。

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

  • 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] キーを押しながらクリックすると、リンク先が新しいタブで開くというものです。

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

世界標準時(UTC)で表示された日時を jQuery で書き替える

この記事は2016年10月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress では、一般設定でタイムゾーンを設定することによって、投稿日時などがその地域の日時で表示されます。日本時間の場合は "東京" または "UTC+9" を設定します。

先日、ユーザー管理のために使用したプラグインで、登録日時は日本時間で表示されるのに、更新日時とログイン日時が9時間プラスされて表示されるという現象が発生しました。世界標準時(UTC)は日本時間より9時間遅れ。今回は9時間プラスなので、世界標準時で表示されているわけでもありません。

原因がわからないので、仕方なく jQuery で日時を修正することにしたのですが、実装後あらためて確認すると、一般設定で "東京" を設定しているうえに、functions.php に

date_default_timezone_set('Asia/Tokyo');

を記述していたことが原因のようでした。通常はこのように設定していても問題ないと思うのですが、プラグインのバグでしょうか、functions.php の記述を削除したら正しく表示されました。

でも折角ですし、また何か役立つ場合があるかもしれませんので、今回は表示された日時を9時間戻しましたが、世界標準時(UTC)で表示された日時を日本時間に書き替える(9時間進める)方法を記しておきます。

“世界標準時(UTC)で表示された日時を jQuery で書き替える” の続きを読む »

アクセシブルなタブ切り替えUIを考える

この記事は2015年12月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。

多くのコンテンツをコンパクトに表示するために、よく用いられるタブ切り替えUIですが、スクリーンリーダーでの利用やキーボド操作を考慮した場合に、アクセシブルではないと思えるものが少なくありません。

例えば、スクリーンリーダー利用者はタブ切り替えUIであると認識することが難しいと思われます。タブ切り替えUIは一種のページ内リンクと考えられますので、一つのタブを選択したらそのタブが示す先のコンテンツにフォーカスが移動しなければなりません。しかし、多くのタブ切り替えUIは、タブを選択した後に[tab]キーを押すと、リンク先のコンテンツ内、あるいはその次のリンクにジャンプすることはなく、選択したタブの次のタブにフォーカスが移動します。つまり、ページ内リンクとして機能していないということになります。

そのため、これまで jQuery Accessible Tabs をよく利用していましたが、もっと気軽に、自由に設定できるように、jQuery Accessible Tabs の挙動を参考にして簡単な jQuery と CSS で実装してみました。

“アクセシブルなタブ切り替えUIを考える” の続きを読む »

pre 要素(整形済みテキスト)の折り返しを切り替え可能にする

この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。

ソースコードを掲載する時に code 要素と併せて利用する pre 要素(整形済みテキスト)。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。

敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。

ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。

pre 要素内で overflow: auto; によりスクロールが発生した場合(以降、これを “擬似的なインラインフレーム” と称します)、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。

多くのブラウザでは、その中に a 要素(リンク)がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。

“pre 要素(整形済みテキスト)の折り返しを切り替え可能にする” の続きを読む »

1 2 3

このページの先頭へ