世界で最も小さな ウェブアクセシビリティ 案内ページ

アクセシビリティについて皆に話してみたいという女の子に捧ぐ。

ホームページは、閲覧する人によって、いろいろな状態で表示されています。
以下のような配慮を、少し頑張って頂くと、検索上にも、良い効果が得られます。
自分に見えているように人からも見えているかというと、そうばかりではないんです。

このページ語句

ページ: ここでは、ホームページの1ページ
サイト: 複数ページの集合体(ホームページ)
リンク: クリックやEnterキー押しでページを移動できる設定箇所
メニュー: サイト内複数ページへのリンク(ナビも同意語)
ヘッダー部、メニュー部: ページ内の部位の呼びかた
テキスト: 文字の同意語
メールフォーム: メールや問い合わせに特化する入力欄で構成されたページ内容

余計なメニューなどを読みなおししなくて済むように

ページ文頭部に、1pxの透明画像を設置し、alt要素を使い、そこがヘッダー部やメニュー部の長い要素を読み上げず、本文内容へのリンクであることを示し、
本文へスキップジャン プし、スムーズに本文から閲覧を行うことができるようになります。

【リンク箇所例】
<a href="#Honbun"><img src="img/spacer.gif" alt="本文へジャンプ。" /></a>

【リンク先箇所例】
<a id="Honbun"><img src="img/spacer.gif" alt="ここから本文です" /></a>

画像につけたリンクが消えてしまわないように

もしリンク・ボタンなどが、画像である場合、画像に、alt="" 要素(代替えテキスト)を書かないと、
そこに、リンク・ボタンがあることもわからない状態になります。

【リンク箇所例】
<a href="link.html"><img src="img/botan.gif" alt="リンク集ページ、こちら" /></a>

挿入画像での演出を生かすために

画像が文中で意味ある場合には、代替えテキストをつけ画像風景を明示できます。

【代替えテキスト例】
<img src="img/sea.gif" alt="晴れた地平線のみえる海原" />

語句の文字読み間違えのないように

事 務 所」とスペースを入れると、分割された語と認識され、「こと む ところ」と読みあげる可能性があります。
「じむしょ」と読みあげるには、「事務所」 とする必要があります。

特異色覚のかたへの配慮をおこたらないように

第一特異色覚 第二特異色覚 第三特異色覚 全特異色覚 で識別しにくい色使いの場合、
文字外境界枠線を設けることで、識別しやすくなります。
配色参照画像
(参照画像ページ:配色テスト カラー シュミレーション

各フォーム入力欄がわかりやすいように

メールフォーム入力欄自体は文字を持たない場合がありますが、
label定義をすることで、 入力欄を読み上げた時に、Enterキーを押すと該当するテキスト枠にフォーカスが当てられます。

<label for="s1">入力欄1<input type="text" id="s1" value=" " /></label><br />
<label for="s2">入力欄2</label><input type="text" id="s2" value=" " />

細かな操作で、辛い思いをしなくて済むように

手の麻痺や震えがあるかた、特殊な操作機器使用者では、リンク箇所が小さい場合、なかなかうまく操作できないことがありえます。
出来るだけ大きな、わかりやすいものが良いです。

他の人のIT環境でも文字が読めるように

ホームページやメールでは、機種依存文字(ウィキペディアへリンク)や、半角カタカナは使わないほうが望ましい。

サイト内ページへのメニュー

サイト全体に共通なメニュー(各ページへのリンク)と、サイト内の内容紹介なリンクをわけて構想する。

サイト外へのリンク

検討する。サイト外へのリンクを移動前に明示する。または、サイト内外にこだわらずリンクする。


[ translate.google: English | Portuguese | Chinese | Korean ]


NPO法人ナイスデイ
有限会社ピュアパルス