このページの本文へ

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

有限会社Willさんいん

このページの位置: home 2ページ目

“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 要素(整形済みテキスト)の折り返しを切り替え可能にする” の続きを読む »

続・タイトルとサムネイル画像の重複リンク

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

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

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

1. ページタイトルとサムネイル画像を一つのリンク内に含める
HTML5 の a 要素内には複数のブロックレベル要素を含めることができるという仕様により、ページタイトルとサムネイル画像をまとめて a 要素で囲むという方法。
2. サムネイル画像をキーボードでフォーカスさせない
これも HTML5 の仕様を利用し、サムネイル画像の a 要素に tabindex 属性で負の値を設定することで、マウスでクリック可能なまま[Tab]キーではフォーカスされなくする方法。
3. JavaScript でサムネイル画像のクリックに対応する
サムネイル画像にはリンクを設定せず、JavaScript(jQuery)を使って、サムネイル画像をクリックしたらタイトルのリンク先に遷移するようにする方法。

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

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

続・jquery.neosmart.fb.wall を導入しました

この記事は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.

“続・jquery.neosmart.fb.wall を導入しました” の続きを読む »

jquery.neosmart.fb.wall を導入しました

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

このサイトのトップページに、Willさんいんの Facebook ページの投稿を表示するため、公式プラグインの Like Box を使用していました。

ところがこの Like Box、6月23日に廃止となり使えなくなるとのことで、新しい Page Plugin に移行するよう勧められています。

With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

しかし、この新しい Page Plugin は、表示幅が 280px から 500px の間に制限されています。このサイトのトップページのレイアウトは、Facebook 表示領域を PC 画面で624px に設定しているため、124px もの余白ができてしまいます。

また、Like Box にしろ、Page Plugin にしろ、JavaScript で読み込んで表示しますが、実質はインラインフレームの中で facebook.com のページを表示していますので、フォントサイズや色などを CSS でコントロールすることが出来ません。その上、フォントサイズが 13px などに固定されているため、Internet Explorer では文字のサイズを変更できないことも気になっていました。

“jquery.neosmart.fb.wall を導入しました” の続きを読む »

1 2 3

page top