「ウェブインクル」はウェブアクセシビリティ規格に準拠したホームページテンプレートサービスです。
ウェブインクルのデザインテンプレートが、どのようにウェブアクセシビリティを実現しているかを解説します。
色のコントラストを確保する
色覚異常を持つ方は全国に320万人いると言われています。
色覚異常があると、色の組み合わせによっては識別しにくいことがあります。
例えば、赤を感じる視細胞に異常があるもの「１型」と呼ばれる色覚異常を持つ方には下記のように見えます。
色覚異常がない人の見え方
色覚異常「１型」を持つ方の見え方
上記のように、似たコントラストを持つ色同士が見分けにくくなるのが色覚異常の特徴です。
「ウェブインクル」のデザインテンプレートは色のコントラスト比をしっかりと確保して作成されています。
キーボードでリンクを辿れるようにする
パソコンを操作している多くの人は、「マウス」を使ってウェブを閲覧しています。
しかし、全盲の方や、何らかの原因でマウスを動かすことが困難な方は、「キーボード」の機能を使ってウェブを閲覧します。
そういった方が閲覧したときに、もしウェブサイトにマウスで操作することが前提の機能があった場合、例えばマウスでフォーカスしないと辿り着けないリンクがあった場合、目的の情報に辿り着けず、不便な思いをすることになります。
「ウェブインクル」のデザインテンプレートはすべてのリンクがキーボードの機能を使って辿れるように作成されています。
文字サイズの変更を可能にする
軽度の視覚障害を持つ方はブラウザの設定機能を使ってウェブサイトの文字を拡大表示させている場合があります。
しかし、ウェブサイト側で文字のサイズを厳密に指定してしまうと、ブラウザの文字拡大機能が働かず、文字を拡大して読むことが困難になります。
「ウェブインクル」のデザインテンプレートは全ての文字を拡大可能にしており、さらに、拡大されたことが原因で文字が読めないといった事態が起こらないように配慮しています。
アイコンだけでなく、説明するテキストを入れる
アイコンなどの画像要素は直感に訴えてどういった機能を持つかの情報を提供します。
例えば、メニューを意味する三本の先や、ページの上部に戻るための上矢印などは様々なウェブサイトで用いられます。
しかしこういった表記は一部の人にはわかりやすくても、別の一部の人にはわかりにくい表記になります。
例えば視覚障害があり、テキスト情報を読み上げることによってウェブを閲覧している方にとっては、サイト内の重要な機能を、形だけの情報で提供するのは不十分です。
そこで「ウェブインクル」のデザインテンプレートではアイコンと共にテキストでも情報を伝えることで、視覚障害の方にも配慮しています。
共通部分はスキップ可能
キーボードを使用してウェブを閲覧していて、尚且、画面を拡大している場合、画面上部の共通部分（ヘッダー）の情報が不要な場合が多くあります。
なぜなら必要な情報はナビゲーションである共通部分にあるのではなく、本文にあるからです。
そこで「ウェブインクル」のデザインテンプレートでは素早く情報にアクセスできるように「コンテンツにスキップ」ボタンを押すと、共通部分がスキップできるように作成しています。
写真やイラストには代替テキスト
視覚障害のある方は、写真やイラストの情報を取得することが困難です。
テキストの情報は読み上げることで耳から情報を得ることができますが、写真やイラストの情報は読み上げることができないからです。
「ウェブインクル」では入稿フォームに代替テキスト入力欄を設けて、写真やイラストの代替テキストを入力できるようにしています。
文字画像をなるべく使わない
画像でできた文字を文字画像と呼びます。
上記の代替テキストと同じ理由で、装飾文字を画像で実装してしまうと、代替テキストが必須になります。
また、文字画像は画像であるためにブラウザの文字拡大縮小機能が働きません。
そこで「ウェブインクル」では文字画像をなるべく使用しておりません。