タグ別アーカイブ: アクセシビリティ

キャプチャを使わずスパムコメントをブロック

Spam block imageブログにコメントを残そうとするとき、人間だと証明するために、読みにくい文字や数字のキャプチャを解読した経験は誰もがあると思います。下のリンクは、読むキャプチャではなく、音声のキャプチャです。各ボタンを押して、数列を聞き取ってみてください。


MP3 | OGG


MP3 | OGG


MP3 | OGG

難しいでしょう? このサンプルは、編集もダウンサンプリングもしていない実際に使用されているものです。

大部分の人が必要としてるようですが、私もWordPressブログ上でスパムをブロックする必要がありました。でも私はキャプチャは使用しないことにしました。スパムは、読者にとって問題ではありませんが、キャプチャを使用することで、読者に煩わしい思いをさせてしまいます。目の良い人でも読むのが大変なのに、視力が弱い人や目の見えない人にとっては、もっと厄介です (将来年をとって視力が弱くなるケースも含みます)。明らかに、別のもっと良い方法を考える必要があります。

質問回答式キャプチャ

「2+7=」とか「落葉の季節は?」といったものが質問回答式キャプチャです。このようなテキストの場合、スクリーンリーダーと呼ばれるソフトを使うことによって、目の見えない人でも音で聞くことができます。そういう意味では便利ですが、質問が読者の理解できる言語でなければならない点は不便です。私のブログは、英語と日本語ですので、不便です。複数の答が考えられる場合もあります。たとえば、落葉の季節は (英語なら) autumnともfallとも答えることができます。

CSSで隠すフォーム・フィールド

これは、なにも書き込みをしないフィールドを作る方法で、そこにはleave emptyとメッセージを入れたりします。スパムボットはどのフィールドにも自動的に書き込みを行いますが、人間は書き込まないことを利用したものです。CSSは、人間からフィールドが見えなくするために利用できますが、スクリーンリーダー利用者やユーザ・スタイルを適用した人 (または全く適用しない場合) には「見えて」います。この方法もしばらく試しましたが、実際にはあまり効果がありませんでした。スパムボットは、本当に賢いですね。

サードパーティのスパム・ブロッキング・サービス

Akismetが一番良く利用されていますが、他のサービスもあります。それは、リモートサーバにコメントを送り、そこでスパムか否かを分析、分類するものです。この方法は効果がありそうですが、登録が必要だったり、スパムをブロックする目的によっては有料だったと思います。また、プライベートなコメントを送る環境には向きません。

IPアドレス・ブラックリスト

自前でも、他人から入手したものでも、リストを利用して、スパムを送ることが明らかなIPアドレスからのスパムコメントをブロックするのは簡単です。でも私はこの方法が好きではありません。その理由は2つあります。

  • 例えばVPN接続などの場合、1つのIPアドレスを複数のユーザで共有していることもあるし、スパム発信者が、こっそりと接続したコンピュータからコメントを送ることもできます。この場合、無実の人を罰することになってしまいます。そんなことはしたくありません。
  • 私のブログのスパムコメントを見る限り、同一のIPアドレスから送られたものは一つとしてありません。だからこの方法で効果があるかどうか疑わしいのです。

答えは?

結果として、私はあるスパムボットの研究に出会い、ネッド・バチェルダー氏 (おそらく他数名と共に) による素晴らしいスパムのブロック方法にたどり着きました。スパムコメントのほとんどは、リモートサーバから迅速に送られるので、コメントのフォームに独自のトークン信号を加え、コメントが投稿された時にそのトークン信号があるかどうかをチェックすることが可能です。試したところ、約2/3のスパムはブロックできました。まだ改良の余地はありますが、最初の試みとしてはまずまずでしょう。何度も手直しや検証をした結果、コメントをさらに分析をすることで、残りのスパムもほとんど捉えられることが分かりました。たとえば、ページの読み込みと投稿の時間のズレや、コメント内のリンク比率、過去のコメントと内容が似ているコメントなどを分析するのです。ついに満足出来ました。私のブログの直近100個のスパムコメントのうち、98個はフィルターにて検出され、ブロックされました。完璧ではないし、時間とともに効果が薄れてしまうかもしれませんが、ほぼ満足でいい妥協点だと思います。なにより読者が喜んでくれるのが一番です。

私は、これをWordPress用スパム・ブロッキング・ブラグインとして組み立てました。そしてソースコードはここで見ることができます。ユーザからは見えず、サイト・オーナーにとってはメインテナンス・フリーです。お気に入りいただいた人は、ぜひWordPressのディレクトリに良いレビューを書いていただけるととてもうれしく思います。

アクセシビリティ対応のWordPress子テーマ(Twenty Twelve用)

簡単な概要: WordPress (ワードプレス)のTwenty Twelveテーマ用のアクセシブルな子テーマを作成しました。以下が詳細です。

WordPressのアクセシビリティについて

最近自分のブログをWordPressに替えました。セルフホストがコントロールの幅を広げるからです。今のところ、WordPressに感心しています。特に、プラグインと、利用可能なテーマの数に感心しています。でも、アクセシビリティに対応したテーマの数が少ないことに少し驚きました。今現在、1,741の公式テーマがありますが、「accessible」もしくは「accessibility」で検索した時に出てくるのは5つのテーマだけです。

ライアンさんの記事を参考にして、現在のWordPressのデフォルトテーマであるTwenty Twelve用の似たような子テーマを作成しました。蓋を開けてみると、Twenty Twelveは既に良い出来に見えるし、前のバージョンからは相当良くなっています。でも、もう少し調整があっても良いと感じています。以下が、私が変更、もしくは書き換えた部分の概要です。

子テーマの変更

style.css

  • リンクに下線 (アンダーライン) を強制的に付けて、ホバーとフォーカスでのリンクを削除した (選択されたアイテムをはっきりと表示するため)。
  • ボタン、リンク、その他のテキストのコントラストを高めた (低視力のユーザーのためと、昼間の屋外使用のため)。
  • 自動ハイフネーションを削除した (スクリーンリーダーによる間違った発音を避けるため)。

header.php

  • フロントページを表示している時に、サイトのタイトル近くにあるリンクとバナーのイメージを削除した。
  • サイトンの設定を変えれば、説明の見出し (ヘディング) だけを表示する。

content.php

  • 投稿リストの見出し (ヘッディング) を、<h1>から<h2>へ変えた。

footer.php

  • 「ページのトップへ戻る」リンクをフッターに加えた。

Accessible OneTwo Themeアクセシビリティの専門家ではありませんが、これらの変更が全てのユーザーにとっての閲覧のしやすさにつながっていると信じています (望んでいます!)。
このテーマ自体は、GitHubからダウンロードできます。GitHubから、改善点などの提案を聞かせてもらえると嬉しいです。もしくは、以下のコメント欄から提案などを聞かせてください。ついでに、WordPressのテーマでは、Accessible OneTwoとして提出してあるので、将来的にはもっと大勢の人に利用してもらえると願っています。