ページを読みやすくする小さな選択

ページは、目の前の人が実際に使えてこそ役に立ちます。キーボードでも、小さな画面でも、右から左へ書く文字でも ipe.rest を読みやすくする小さな選択と、まだ確かめていないことをご紹介します。

前回は、このサイトが接続なしでも開ける仕組みを説明しました。今回は読むことそのものについてです。以下はどれも、キーを一つ押すか、ブラウザー自身のツールで、ご自身で確かめられます。

メニューを飛ばす道

サイトの言語ページやジャーナルページのどこでも Tab キーを押すと、最初に「本文へスキップ」というリンクに着きます。キーボードが届くまでは見えず、届くとページの上部に現れます。これをたどれば、ヘッダーを一つずつ巡らずに、すぐ本文へ移れます。

今どこにいるか、いつも見えます

キーボードで移動しているとき、今いるリンクやボタンには、少し間を空けた2ピクセルの青い枠が付きます。ブラウザー標準の枠をただ消すのではなく、より見やすいこの枠に置き換えました。目で追えないページは、使えないページだからです。

触れるほど大きく、拡大しやすく

ヘッダー、フッター、言語切り替えのリンクとボタンは高さが44ピクセル以上あり、親指で押せます。本文の文字はデスクトップで17ピクセル、スマートフォンで16ピクセルで、行間をゆったり取り、長い単語やウェブアドレスはページを横に押し広げず折り返します。

ページはピンチズームを止めないので、ブラウザーが許す限り拡大できます。また、システムが動きの軽減を求めている場合、サイトはトランジションとスムーズスクロールをオフにします。

計算できるコントラスト

本文は、白に近い背景の上の濃い紺色で、コントラスト比は約17:1です。補助的な文字の灰色は約6:1、リンクの青は約6.6:1です。よく使われる指針は、最低4.5:1を求めています。これらの数値は、スタイルシートの色の値を標準の計算式に当てはめたもので、監査ツールで測ったものではありません。

どの言語も、その言語の向きで

各ページは自分の言語を宣言し、アラビア語のページは右から左を宣言します。レイアウトは左右ではなく「始まり」と「終わり」を基準にしているので、スキップリンク、リスト、字下げは文字とともに反転します。ブラウザーや支援技術は、言語の宣言をもとに適切な音声やフォントを選べます。

まだやっていないこと

正式なアクセシビリティ監査は行っておらず、すべてのスクリーンリーダーで試したわけでもありません。サイトの配色は明るいもの一つだけで、暗いものはありません。読むのに支障があれば、お問い合わせのページからお知らせください。確認します。

ipe(); // read it the way that works for you

気の利いたことは何もありません。消さないと決めた初期設定をいくつか並べただけで、穏やかなままでいるページは、誰にとっても読みやすいのです。