カテゴリー: HTML/CSS/JS, アクセシビリティ
この記事は2016年12月4日に書かれたものです。情報が古い可能性がありますのでご注意ください。
次のようにサイトマップのツリー構造を表現する際、これまでずっとラインの画像をリストの背景として設定し、表現してきました。
古い Internet Explorer が 6、7、8 と次々にサポートが打ち切られた今、これまで画像で表現していたデザインを CSS のみで表現できるようになり、様々な場面で画像を使わなくなりました。一方、サイトマップについては惰性で長らく画像を使っていたのですが、これも CSS のみでできるんじゃないかと思い、やってみました。
カテゴリー: WordPress
この記事は2016年7月22日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の CSS を作成して管理画面に読み込ませることができますね。editor-style.css などとして CSS ファイルを用意し、functions.php の中で
add_editor_style("editor-style.css");を記述することで、ビジュアルエディタにeditor-style.css が適用されます。
しかし、これでは記事部分の CSS を変更する際に、公開画面用の CSS とビジュアルエディタ用の CSS の両方を編集する必要があります。
そこで editor-style.css を公開画面と共有すると便利です。header.php の中で style.css と共に読み込ませるか、style.css の先頭で editor-style.css をインポートすればよいわけですが、記事部分を囲む要素の class 属性の値を工夫する必要があります。
カテゴリー: アクセシビリティ
この記事は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 要素（リンク）がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。
カテゴリー: HTML/CSS/JS
この記事は2015年3月19日に書かれたものです。情報が古い可能性がありますのでご注意ください。
CSS によるレイアウトが当たり前となり、十数年前のようなバリバリのテーブルレイアウトというのはほとんど見られなくなりました。一方で、CMS の普及により、WYSIWYG エディタ上の編集エリア内で、複雑なレイアウトを実現するためにテーブルを使うという場合があると思います。
当然、編集エリアにデータテーブルを置く場合もありますので、枠線の有無やセル内余白など、レイアウトテーブルとデザインを区別する必要があります。
WYSIWYG エディタのスタイルボタンなどに予めレイアウトテーブル用の class を登録しておくという方法も考えられますが、最も単純で明快なのは、テーブルの枠線を付けるか付けないかという区別です。
HTML5 では、table 要素の border 属性の値には、1 または空文字列（border=""）のみを指定することができ、これ以外の値を指定することはできません。（ WYSIWYG エディタによっては、テーブルを挿入する際の枠線の初期値が 0 になっているものが多く、これは HTML5 では使えないので、設定ファイルで初期値を 1 か空に修正しておく必要があります。）
以前、テーブルの枠線は CSS で付けるべきで、border 属性は使うべきでないという考え方もありましたが、HTML5 では、table 要素に border="1" を追加することで、その表がレイアウト目的ではないということを示すことができます。