カテゴリー: アクセシビリティ
この記事は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] キーを押しながらクリックすると、リンク先が新しいタブで開くというものです。
カテゴリー: HTML/CSS/JS
この記事は2016年10月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress では、一般設定でタイムゾーンを設定することによって、投稿日時などがその地域の日時で表示されます。日本時間の場合は “東京” または “UTC+9” を設定します。
先日、ユーザー管理のために使用したプラグインで、登録日時は日本時間で表示されるのに、更新日時とログイン日時が9時間プラスされて表示されるという現象が発生しました。世界標準時（UTC）は日本時間より9時間遅れ。今回は9時間プラスなので、世界標準時で表示されているわけでもありません。
原因がわからないので、仕方なく jQuery で日時を修正することにしたのですが、実装後あらためて確認すると、一般設定で “東京” を設定しているうえに、functions.php に
date_default_timezone_set('Asia/Tokyo');を記述していたことが原因のようでした。通常はこのように設定していても問題ないと思うのですが、プラグインのバグでしょうか、functions.php の記述を削除したら正しく表示されました。
でも折角ですし、また何か役立つ場合があるかもしれませんので、今回は表示された日時を9時間戻しましたが、世界標準時（UTC）で表示された日時を日本時間に書き替える（9時間進める）方法を記しておきます。
カテゴリー: アクセシビリティ
この記事は2015年12月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。
多くのコンテンツをコンパクトに表示するために、よく用いられるタブ切り替えUIですが、スクリーンリーダーでの利用やキーボド操作を考慮した場合に、アクセシブルではないと思えるものが少なくありません。
例えば、スクリーンリーダー利用者はタブ切り替えUIであると認識することが難しいと思われます。タブ切り替えUIは一種のページ内リンクと考えられますので、一つのタブを選択したらそのタブが示す先のコンテンツにフォーカスが移動しなければなりません。しかし、多くのタブ切り替えUIは、タブを選択した後に[tab]キーを押すと、リンク先のコンテンツ内、あるいはその次のリンクにジャンプすることはなく、選択したタブの次のタブにフォーカスが移動します。つまり、ページ内リンクとして機能していないということになります。
そのため、これまで jQuery Accessible Tabs をよく利用していましたが、もっと気軽に、自由に設定できるように、jQuery Accessible Tabs の挙動を参考にして簡単な jQuery と CSS で実装してみました。
カテゴリー: アクセシビリティ
この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。
ソースコードを掲載する時に code 要素と併せて利用する pre 要素（整形済みテキスト）。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。
敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。
ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。
pre 要素内で overflow: auto; によりスクロールが発生した場合（以降、これを “擬似的なインラインフレーム” と称します）、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。
多くのブラウザでは、その中に a 要素（リンク）がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。
カテゴリー: アクセシビリティ
この記事は2015年5月28日に書かれたものです。情報が古い可能性がありますのでご注意ください。
このブログの2015年4月14日の「タイトルとサムネイル画像の重複リンク」という記事で、下層ページの一覧などに各ページのタイトルとサムネイル画像があり、そのタイトルとサムネイル画像それぞれに同じページへのリンクが貼ってあるパターンについて、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになるほか、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなるということを書きました。
そして、これを解消する以下の3つの方法を紹介しました。
しかし、上記の 2. と 3. にはアクセシビリティ上の問題があるのではないかと気がつきました。
この記事は2015年4月16日に書かれたものです。情報が古い可能性がありますのでご注意ください。
昨日導入した、jquery.neosmart.fb.wall ですが、2点ほど問題がありました。その1つはセキュリティ上の問題でもあります。
1つ目は、25人を超える「いいね！」がある投稿に対して、「いいね！」数が25までしか表示されないことです。これは、Graph API がデフォルトで25しか「いいね！」した人を表示しないのが原因とのことで、jquery.neosmart.fb.wall.js の61行目を、
url: graphURL+o.id+'/'+type+'?limit='+o.max+'&likes.limit=200&access_token='+o.accessToken',のように、likes.limit=いいね！の上限数 というパラメータを追加することで解決しました。（参考：永遠少年症候群 | fb.wallメモ最終版）
2つ目は、Facebook のアクセストークンを取得してこのスクリプトに設定するのですが、このアクセストークンを HTML か JavaScript に記述するため、誰にでもアクセストークンが見えてしまうこと。アクセストークンがあれば Facebook ページの非公開にしている情報までもが取得できてしまいます。
開発を終了した fb.wall のサイトにも「安全な方法でアクセストークンを提供することができなかった」といった内容の記述があります。これが開発終了の理由なんですね。
Since 2010 Facebook changed their Graph API a lot of times, they added server request limits and the need of access tokens. With a pure JavaScript solution it was not possible to provide access tokens in a safe way. Therefore we developed neosmart STREAM.