ディスレクシアや発達障害のある生徒のための読みやすい配色と文字

真っ白なページに黒い文字は、ディスレクシアや発達障害のある多くの人にとって読みにくいものです。誰でもサイトを読むときの配色を選ぶことができ、その選択はすべてのページとすべてのクイズに引き継がれます。

プロフィールで一度選ぶだけ

「プロフィール」ページの「配色と文字」タブでは、各配色がその配色自体で表示されるので、選ぶ前に読みやすいかどうかを確かめられます。クリーム色の紙のような配色、リーディングオーバーレイと同じ色合いの5種類の淡い色、明るい色を使わない落ち着いた配色、暗めのダーク配色、そして明るい背景と暗い背景のハイコントラストがあります。

これらは英国ディスレクシア協会(British Dyslexia Association)の推奨に沿っています。真っ白ではなくクリーム色やパステル調の背景を使い、黒ではなく濃いグレーの文字を使う、というものです。どの色合いがいちばん役立つかは人によって異なるため、試せるように複数用意しています。

プロフィールの「配色と文字」タブ。標準の配色と、読みやすい6つの配色がそれぞれの色で表示されている
どの配色もその色自体で表示されるので、生徒はいちばん読みやすいものを選べます。

大きな文字、広い間隔、読みやすいフォント

同じタブで、文字を最大1.5倍まで大きくしたり、文字・単語・行の間隔を広げたり、すべてを Verdana または Arial で表示したりできます。最も広い間隔は、アクセシビリティのガイドラインが推奨する値です。エディター内のコードは独自の間隔を保つため、カーソルは入力した位置からずれません。

アカウントは不要

教員が共有したリンクから作業しているクラスは、ログインしなくても設定を変えられます。上部のバーにある「ゲスト」から同じ配色の選択画面が開き、以後のすべてのページがその配色で表示されます。

この方法で選んだ設定はブラウザーを閉じるまでブラウザー内に保持され、当社に送られることも、誰かの記録として残ることもありません。教室の共用パソコンなら、次に座った人は前の人の配色を引き継がず、最初から始められます。後でログインすれば、自分のアカウントの設定が使われます。

全員に一度だけお知らせします

初めてログインしたとき、ページ上部に配色を変更できることを知らせる案内が表示され、そのタブへのリンクが付いています。表示されるのは一度だけです。配色を勧めるためにディスレクシアかどうかを尋ねることはなく、生徒が教員に頼む必要もありません。

アカウントのない人にも同じ案内が表示されますが、作業をしている場所に限られます。レッスン、アクティビティ、プレイグラウンド、デプロイの画面です。料金やヘルプを読んでいるときには表示しません。目的と関係のない案内になってしまうからです。

クイズに固有の配色はありません

教員はクイズに配色のテーマを付けられません。他の人の配色のクイズでは、生徒が読むために選んだ設定が台無しになってしまうからです。どのクイズも、読む人がプロフィールで、またはアカウントなしの「ゲスト」から選んだ配色で表示されます。何も選んでいない人には、サイトの通常の配色で表示され、この変更前にテーマが付いていたクイズも同様です。

キーボードでコードエディターから抜ける

コードエディターの中では、Tab キーでコードがインデントされます。コードエディターとして当然の動作ですが、そのため Tab ではエディターの外に移動できません。Ctrl と M を同時に押すと、Tab が次のコントロールへの移動に切り替わり、もう一度 Ctrl と M を押すとインデントに戻ります。

このことはエディターの下に表示され、スクリーンリーダーにもエディターに入ったときに読み上げられます。サイトのほかの場所でキーボード操作を独占するものはなく、ほかのコントロールはすべて Tab だけで移動できます。

アクセシビリティに関する声明の内容

声明は /accessibility にあり、サイトが提供されているすべての言語で読め、フッターからもリンクされています。サイトは Web Content Accessibility Guidelines 2.2 のレベル AA に部分的に準拠していると述べ、準拠していない点を挙げています。コードエディターの Tab キー(Ctrl と M で解放できます)と、スクリーンリーダーで使うときのエディター自体(使えますが、必要以上に読み上げます)です。また、スクリーンリーダーを毎日使っている人によるテストをまだ行っていないことも、はっきり書いています。

すべてのページは、変更のたびに axe のアクセシビリティルールで検査され、文字色と背景色のすべての組み合わせは、コントラスト比 4.5 対 1 を基準にテストで測定されます。色を薄くすれば、生徒ではなくビルドが失敗します。別の形式が必要な場合や、一覧にない問題を見つけた場合は、そのページに書かれたアドレスへ、ページと何があったかを書いてお送りください。5営業日以内に返信します。生徒の学校の学習支援チームが、生徒に代わって問い合わせることもできます。

よくある質問

生徒がどの配色を選んだか、教員は見られますか?
いいえ。生徒自身の設定です。記録するのはどの配色かだけで、理由は記録しません。
文字を大きく、読みやすくできますか?
はい、同じタブでできます。文字は最大1.5倍まで大きくでき、文字・単語・行の間隔を広げ、ディスレクシア向けのガイドラインが勧める Verdana または Arial で表示できます。クイズにも反映されます。
マウスを使わずにコードエディターから抜けるには?
Ctrl と M を押してから Tab を押します。エディター内では Tab がコードをインデントするため、それだけでは外に出られません。Ctrl と M で次のコントロールへの移動に切り替わり、もう一度押すと元に戻ります。アクセシビリティ方針にも同じことを記載しています。