“jQuery” タグの記事（15件）

このサイトのトップページに、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 を導入しました” の続きを読む »

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つの方法を考えてみます。

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

画像の代替テキスト（alt 属性）は、Web アクセシビリティの基本中の基本とよく言われますが、適切な代替テキストを付けるということに関しては十分に考慮しなければなりません。

参考：HTML5: 有用な代替テキストを提供するためのテクニック

また、画像がリンクとなっている場合、その代替テキストは単に画像の代わりではなく、同時にリンクの目的を示すものである必要があります。例えば、その Web サイトのホームへのリンクとなっているロゴ画像の場合、その代替テキストは “有限会社Willさんいん” ではなく “有限会社Willさんいん ホーム” などとすべきです。

画像がリンクとなっているパターンの一つとして、近年よく使われている Lightbox 系のスクリプトがあります。サムネイル画像をクリックすると、拡大画像がオーバーレイで表示されるというものですが、当然この場合もサムネイル画像の代替テキストはリンクの目的を示さなければなりません。例えば、”○○の拡大画像” といった具合です。

でも、CMS などの WYSIWYG エディタの中で更新担当者が自由に挿入する画像の場合、画像の代替テキストはアップロードする際に付ける場合が多く、その画像をリンクとして挿入するかどうかは後で決めることが多々あると思います。そもそも、拡大画像へのリンクは代替テキストを変更するという運用の徹底は難しいでしょう。

そこで、jQuery を使って拡大画像にリンクする場合の代替テキストを書き換えてみます。

“拡大画像にリンクするサムネイル画像の代替テキスト” の続きを読む »

フォームのアクセシビリティ要件として、第一にラベルとコントロールを関連付けるということが必要です。この関連付けによって、スクリーンリーダー利用者は [tab] キーで入力枠等を移動していった場合に何を入力あるいは選択すればいいか分かります。また、マウスを使ってる場合はラベルのテキストをクリックすればコントロールをフォーカスでき、特にラジオボタンやチェックボックスの選択が容易になります。

しかし、CMS によってシステム的にフォームが出力される場合や、メルマガ配信サービスで出力される HTML を貼り付ける場合に、このラベルとコントロールの関連付けがなされていない場合があります。ラジオボタンやチェックボックスについては、暗示的なラベル付け（コントロールとラベルをまとめて label 要素で囲む）によって関連付けされていることが多いですが、テキストフィールドやセレクトメニューについては関連付けされていない場合があります。

最近上記のような事例があり、フロント側で HTML を編集することもできないため、jQuery を使って関連付けを設定してみました。フォームはよくあるテーブルによるマークアップの単純なもので、一行テキストフィールド、複数行テキストエリア、セレクトメニューに対して、ラベルとの関連付けを設定します。

“jQuery でフォームをアクセシブルに” の続きを読む »

スクリーンリーダー利用者が [Tab] キーで Web ページ内のリンクを辿っていく場合、スクリーンリーダーは、リンクの範囲（ a 要素に囲まれている範囲）のテキスト、あるいは画像などの代替テキストを読み上げます。

未だに多くの Web サイトで見受けられる、文章中の「こちら」だけにリンクが貼られている場合、この3文字だけではリンク先に何があるのか全くわかりませんので、そのリンクの前後のテキストを確認する必要があります。

JIS X 8341-3:2010 では、「7.2.4.9：リンクの目的に関する達成基準」として、

それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能でなければならない。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

とありますが、これは等級 AAA の達成基準となっています。一方、等級 A の達成基準では、「7.2.4.4：文脈におけるリンクの目的に関する達成基準」として、

それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できなければならない。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

となっています。

つまり、「こちら」だけにリンクを貼ることは、同じ段落内のテキストや直前の見出しなどを参照してリンク先が分かれば、等級 A、あるいはこれを含む等級 AA も達成できるということになります。

しかし、[Tab] キーでリンクを辿っている途中で、「こちら　リンク」と読み上げられ、前に戻って確認しなければならないという行為は、とても煩わしいのではないかと思うのです。「7.2.4.9　リンクの目的に関する達成基準」は少なくとも等級 AA であるべきではないかと。

“ページネーションの読み上げ対応” の続きを読む »