このページの位置: home タグ: jQuery
カテゴリー: アクセシビリティ
この記事は2022年9月9日に書かれたものです。情報が古い可能性がありますのでご注意ください。
主にリスト形式の表示で、最初に数件を表示しておいて「もっと見る」ボタンをクリックする毎に数件ずつ追加表示するという見せ方があります。
キーボードで操作できなければならないのは当然ですが、「もっと見る」ボタンにフォーカスして [Enter] キーを押したあと、フォーカスは「もっと見る」ボタンにあるので、そのまま次にフォーカスを移動するとボタンの上に追加表示されたリストを飛ばすことになります。特にスクリーンリーダーを利用している場合は追加表示されたリストが認識できない可能性があります。
そこで、「もっと見る」ボタンで [Enter] キーを押したあと、フォーカスを「もっと見る」ボタンにフォーカスする前の位置に戻すことで、リストの続きにフォーカス出来るようにしてみました。
“リンク付きリストの「もっと見る」ボタンを押した時のフォーカス位置” の続きを読む »カテゴリー: HTML/CSS/JS
この記事は2020年9月20日に書かれたものです。情報が古い可能性がありますのでご注意ください。
当Webサイト内、Web制作&システム開発サイトの制作実績ページで表示しているWebページのサムネイル。当初はサムネイル自動生成ツールを使用していました。その後、半年前から各々の制作実績のページでレスポンシブ Web デザインによる PC、タブレット、スマホそれぞれの画面を表示するようにしたのですが、サムネイル自動生成ツールではPC画面を縮小して取得することしかできず。仕方なく、それぞれのスクリーンショットを撮って貼り付けてました。
しかし、新しいサイトを追加する度に3種類のスクリーンショットを撮る必要がありますし、時が経つとスクリーンショットが古くなるので定期的に撮り直す必要があり。そこで、少々強引ですが、Webページそのものの PC、タブレット、スマホそれぞれのサイズの画面を、インラインフレーム（ iframe タグ）で埋め込んで表示することにしました。
ただ、それぞれのサイズのWebページをサムネイルのように縮小表示する必要があり、更にレスポンシブにも対応させる必要がありました。
“iframe でWebページを埋め込んで縮小表示する（レスポンシブ対応）” の続きを読む »カテゴリー: WordPress
この記事は2020年8月9日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の投稿を自動で Facebook ページに投稿したい案件があり、当初、自動投稿に特化し機能も豊富な NextScripts: Social Networks Auto-Poster (SNAP) というプラグインを使用しようと設定を進めていましたが、“Invalid Scopes: manage_pages, publish_pages.
” という警告が出て、どうにも連携することができず。
どうも、テストアプリを作成したり、レビュー申請ビデオを作成して Facebook の審査を受けなければならないなど、いろいろ面倒っぽいので、SNAP の利用は諦め、API が不要な Jetpack プラグインを利用することにしました。Jetpack はアクセス解析やセキュリティ対策など、30種類以上もの機能がパックになっているプラグインですが、この中にある Facebook や Twitter などの SNS と連携できる「パブリサイズ共有」の機能を使用します。
ただ、自動投稿に特化したプラグインではないので、デフォルトではカスタム投稿タイプに対応していません。また、今回カスタム投稿タイプの投稿全てと、標準の投稿の内、特定のカテゴリの投稿のみを Facebook に自動投稿せる必要があるのですが、カテゴリを選択できる機能もないので、カスタマイズしてみました。
“Jetpack のパブリサイズ共有をカスタム投稿タイプと特定のカテゴリの投稿のみに適用する” の続きを読む »この記事は2017年9月4日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Welcart で商品購入時にお客様情報を入力する場合や発送先を入力する場合、あるいは会員登録する際のメンバー情報入力フォームについての問題。名前や住所、電話番号などの項目とテキスト入力欄などのフォーム部品には、ラベルによる関連付けがありません。ラベルはアクセシブルなフォームにとって最低限必要な要素であり、これではアクセシビリティ的によろしくありません。
メールアドレスとパスワードの入力枠については、テーマファイルに直接記述しますので、その記述の中でラベルによる関連付けを加えることができますが、名前や住所、電話番号などの項目はプラグインによって自動生成されますので、容易にソースを変更することができません。（プラグインのファイルを編集すれば可能ですが、アップデートの際の不具合の可能性や手間を考えるとプラグインのファイルは触りたくないので）
そこで jQuery を使ってラベルによる関連付けを加えてみました。
カテゴリー: HTML/CSS/JS
この記事は2017年4月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。
近年、スマホ等で閲覧した際のユーザビリティを考慮して、クリックやタップできるリンク範囲を広げる手法がよく使われています。
などありますが、jQuery を使う方法は私もよく使います。
以前から多くのブログ等で紹介されている記述は次のようなものです。
$(function(){
$('div.linkBox').click(function(){
window.location = $(this).find('a').attr('href');
return false;
});
});ただ、この方法は本来のリンク要素外の範囲では、リンク先を新しいタブで開くキーボードショートカットに反応しません。Windows では [ctrl] キーを、Mac では [command] キーを押しながらクリックすると、リンク先が新しいタブで開くというものです。