2015年7月25日 カテゴリー: アクセシビリティ
この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。
ソースコードを掲載する時に code 要素と併せて利用する pre 要素（整形済みテキスト）。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。
敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。
ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。
pre 要素内で overflow: auto; によりスクロールが発生した場合（以降、これを “擬似的なインラインフレーム” と称します）、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。
多くのブラウザでは、その中に a 要素（リンク）がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。
“pre 要素（整形済みテキスト）の折り返しを切り替え可能にする” の 続きを読む »
2015年7月23日 カテゴリー: WordPress
この記事は2015年7月23日に書かれたものです。情報が古い可能性がありますのでご注意ください。
一つの WordPress で構築したサイトの中でブログを運営している場合に、サイト全体を検索対象とするサイト内検索と、ブログ記事のみを検索対象とするブログ内検索の両方を設置したいということがあります。
ブログ内検索に WordPress の検索機能を利用し、サイト内検索は Google カスタム検索を利用するというのも一つの方法ですが、今回、既に WordPress の機能でサイト内検索を設置しているこのサイトに、WordPress の機能でブログ内検索を追加しました。
サイト内検索のフォームは共通のヘッダーに設置されているため、ブログの各ページでは検索フォームが2つ存在することになります。追加するブログ内検索のフォームはサイドバーに設置します。
また、その検索結果のページのデザインはそれぞれ異なるものとし、ブログ内検索の検索結果はブログのデザインの中で表示させます。
“検索フォームと検索結果ページを複数設置する” の 続きを読む »
この記事は2015年7月21日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の投稿には、公開状態に “この投稿を先頭に固定表示” というオプションがあり、チェックした投稿は、メインページなどの投稿の一覧で常に先頭に表示されます。
一方、Movable Type にはこのような機能はありませんので、同様のことをしようとするなら、カスタムフィールド等を使って実装する必要があります。
チェックボックス型のカスタムフィールドを使って先頭に固定表示のフィールドを追加し、メインページテンプレート等で、記事の一覧を出力する前にチェックされた記事の一覧を出力すればよいわけですが、単に出力しただけでは1ページに表示する記事の件数がチェックした記事の件数分増えてしまいます。
そこで、チェックされた記事が複数あっても、一覧に表示される記事の総件数が変わらないようにしてみます。
“Movable Type で記事を先頭に固定表示” の 続きを読む »
2015年7月16日 カテゴリー: WordPress
この記事は2015年7月16日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の ビジュアルエディタ TinyMCE の機能を拡張するプラグインとして、TinyMCE Advanced が有名です。この TinyMCE Advanced、バージョンが 4.0 以上になってから更に使いやすくなり、挿入されるタグも非推奨タグが少なくなってきたように思います。まだ一部テーブル関連で非推奨属性が残っていますが。
この設定方法や使い方は、数々のブログ等で山ほど紹介されていますのでここでは書きませんが、ブロック要素の選択肢とフォントサイズの選択肢をもう少し踏み込んで設定するうえで、あまり情報が無かった以下の2件のカスタマイズ方法を紹介します。
ブロック要素（見出し）の選択肢を、投稿タイプによって切り替える
フォントサイズの選択肢を、ラベルを px、値を % で定義する
“TinyMCE のブロック要素とフォントサイズの選択肢” の 続きを読む »
2015年7月10日 カテゴリー: アクセシビリティ
この記事は2015年7月10日に書かれたものです。情報が古い可能性がありますのでご注意ください。
先日の blog で、音声読み上げの検証のためにスクリーンリーダーを利用しているというWeb制作者は少ないのではないかということを書きました。その理由の一つに、スクリーンリーダーが高価だということもあるかもしれません。PC-Talker は38,000円で、これに Web 閲覧機能を強化する音声ブラウザ NetReader は28,000円（Web制作者向け価格は38,000円）、高機能なスクリーンリーダー JAWS に至っては15万円余りもの価格です。
つまりこれは、スクリーンリーダーを必要とする視覚障がい者は、パソコンを使用するために少なからずとも余計な出費を強いられているということでもあります。
一方、NVDA (NonVisual Desktop Access) は無料で使えるオープンソースの Windows 用スクリーンリーダーです。視覚障がい者が晴眼者と同じように、パソコンと OS 以外の出費をしなくても Windows が利用できるようにとの目的で、オーストラリアの Michael Curran 氏を中心に2006年から開発が進められ、現在は日本語版 を含む40以上の言語に対応しています。
“オープンソースのスクリーンリーダー NVDA と Mac と” の 続きを読む »