web アクセシビリティ に配慮した ホームページ制作 ブログ

web アクセシビリティ に配慮した ホームページ制作 ブログ

アクセシビリティの指針となるJIS規格とホームページ制作について解説しております。

Amebaでブログを始めよう!

 ■入力に制限時間を設けない、または通知する【5.3操作及び入力c)】


 最初にこの項目について、JIS規格ではどのように
 表現されているのでしょうか。参照します。


 ”入力に制限時間を設けないことが望ましい。制限時間がある場合は、
 事前に知らせなければならない。”


 高齢で理解力が低下した方や、手が震える方、視力低下により画面が見にくい方、
 音声ブラウザを利用している方など、たくさんの質問がある入力欄への記入などには
 時間がかかる場合があります。


 その際、入力途中に切断されることとなるともう一度最初からやり直す必要あります。


 □制限時間がある入力欄の例
 オンラインショップにて買い物をした際、カートに入れた後に送り先などの個人情報を
 入力しようとしたところ、操作が無効とされログアウトされてしまう。


 上記のような例では、システム上の問題で第三者のなりすましや情報漏洩の観点から
 利用者保護のために、数分間アクセスしないと自動的にログアウトする仕様になっております。


 □具体的な対処法
 以上のような場合には、事前に制限時間があることを通知しておくことにより、
 オンラインショップの買い物の場合であれば、商品をカートにいれる前にあらかじめ、
 入力する情報を全て控えておいたり、親族・友人などに代わりに入力してもらうなど、
 事前の準備をすることが可能となります。


 具体的には以下のような文書を入れて、対処します。


 ”セキュリティのため、ログイン後は30分以内に入力を完了しないと自動的にログアウトします。”


 入力に時間がかかる方にとって、突然ログアウトされれば、再度ログインし直すなど、
 大変な労力となりますので、アクセシビリティの観点から、”事前に知らせなければならない”
 とされていますので取り組んでみてくださいね。


 次回は、【5.3操作及び入力d)】をお伝えします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【編集後記 SEO対策との関連について】
---------------------------------------------------------------------

 今回お伝えしました内容も前号と同様、直接的にSEO対策に
 結びつくという観点はあまりありません。

 SEOの動向としては、特にYSTの変動が激しいので、対応におわれている方や
 お困りの方も多いかもしれません。


 今後、集客するためのSEOという考えも変わってくるかもしれませんし、
 SEOだけに頼らず、その他の集客方法も絡めた総合的な取り組みが必要となってきますね。


 検索エンジンの動向としては、質が重視される流れは変わりませんので、
 当メルマガでお伝えするアクセシビリティの取り組みも進めてみてください。


 それでは、また次回お会いしましょう。


アクセシビリティ・ユーザビリティを考慮したホームページ制作 レボネット

 ■入力欄は理解しやすく示す【5.3操作及び入力b)】


 まず、いつものようにこの項目について、JIS規格ではどのように
 表現されているか参照します。

 理解しやすい入力欄への配慮については、JIS規格では以下のように
 記載されております。


 ”入力欄を使用するとき、何を入力すればよいか理解しやすく示し、
 操作しやすいように配慮しなければならない。”


 入力欄とは、例えば、一般的なサイトのお問い合わせフォームなどにある
 名前やメールアドレスを打ち込むテキストエリアのことです。

 例として、以下のレボネットサイトのお問い合わせフォームをご覧下さい。
 http://plus.revonet.co.jp/contact.html


 □入力欄に配慮されていない場合に起こる弊害

 ・入力欄への認知・理解力が不足する高齢の方や、操作に不慣れな初心者の方に
  とって何を意味し、どう入力すべきかわかりにくい。

 ・音声ブラウザを利用する全盲の方にとって、入力欄の後にガイドが書かれていると
  入力後に気がついたり、入力ミスを引き起こしやすい。

 ・表示拡大ソフトなどを利用している弱視の方にとって、入力欄から離れて
  ガイドが書かれていると、同時に閲覧することが難しい。


 □入力欄の例

 配慮された例.
 ふりがな(ひらがな) : 入力欄

 配慮されていない例.
 ふりがな : 入力欄
 ふりがな : 入力欄 : (ひらがな)


 □補足

 上記の例において、”ふりがな”や”フリガナ”と書かれていても、
 音声ブラウザ利用者には、”ひらがな”なのか”カタカナ”なのか理解できません。

 また、入力欄の後に、”ひらがな”のガイドがあっても、音声ブラウザは順番に
 読み上げられますし、表示拡大された状態で閲覧している方には、入力欄後の
 文字は同時に閲覧できません。

 そのため、どのように入力するかのガイドは、入力欄の手前に記入して、
 どのように入力するのか理解しやすく示す必要があります。

 半角で入力することや、電話番号にハイフンを入れることなども、必要な場合は、
 同様に入力欄の手前に記入します。


 以上のように、一般的に使われているお問い合わせフォームなどの
 入力欄にも配慮することで、幅広い方に理解しやすいコンテンツとして、
 ウェブアクセシビリティの向上に役立ちます。

 ちょっとした配慮で入力フォームも大きく変わりますので、
 入力フォームを制作する際は、お気をつけください。


 次回は、【5.3操作及び入力c)】をお伝えします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【編集後記 SEO対策との関連について】
---------------------------------------------------------------------

 今回、お伝えしました送信フォームなどの入力欄への配慮と
 SEOとしては直接的な結びつきはあまりないかもしれません。


 あえてお伝えするなら、前回と同様、ユーザーに有益なサイトとして、
 ウェブサイトの質の向上を図っていくことで、検索エンジンにも評価されていく
 ことと思われます。

 小手先の検索エンジン対策はどんどん通用しなくなってきており、
 ユーザーに有益なサイトが検索エンジンに評価されていくという流れは
 変わりませんので、その一環として取り組んでみられてはいかがでしょうか。


 それでは、また次回お会いしましょう。


アクセシビリティ・ユーザビリティを考慮したホームページ制作 レボネット

 ■ウェブコンテンツをキーボードで操作【5.3操作及び入力a)】

 ウェブコンテンツへのアクセス操作については、JIS規格では以下のように
 記載しております。


 ”ウェブコンテンツは、単一のデバイスの操作に依存せず、少なくともキーボードで
 全ての操作が可能でなければならない。”


 通常は、パソコン操作はマウスとキーボードにて行われ、ウェブコンテンツへの
 アクセスもマウスで操作されます。


 ですが、マウスのみの操作だけではなく、キーボードでの操作もできるように
 しなければならないということです。


 例えば、以下のような方にとってキーボードでの操作は必要です。

 ・全盲の方でマウスポインタが見えず、マウスを使えない方

 ・弱視や高齢のため、マウスポインタが見づらい方

 ・肢体不自由な方や高齢で手が震える方で、正確にマウスポインタを制御できない方


 ■キーボード操作への対応策

 ウェブコンテンツをキーボードのみで操作できるようにするためには、
 タブキー(Tab)、エンターキー(Enter)、矢印キー(↑←↓→)を
 使って操作できるようにすることが挙げられます。


 送信フォームなどにおいては、テキストボックスやラジオボタンに
 アクセスキーを設定し、キーボードのみでアクセスして選択可能にし、
 タブキーで事項の選択へ送っていけるようにします。


 通常の閲覧ブラウザであれば、様々なツールバーがありますので、
 アクセスキーがバッティングすることはありますが、
 CSSをはずしたり、テキストブラウザ、音声ブラウザで閲覧する場合は、
 キーボード操作が容易になるため、各コンテンツへのアクセスキーの設定も
 行ってください。


 普段、マウスを使っている場合でも、キーボード操作でコンテンツを
 閲覧できれば、閲覧操作の幅が広がり、便利に使いこなすこともできますね。

 次回は、【5.3操作及び入力b)】をお伝えします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【編集後記 SEO対策との関連について】
---------------------------------------------------------------------

 アクセスキーの設定やタブキー操作の設定をhtmlに記載すると、
 キーワード以外のhtmlタグが増えるという見解もあるかもしれませんが、
 検索エンジンに好まれる優良なサイト、ユーザーによりよいサイトとしては
 評価を得られると思います。


 テーブルで組まれたサイトの場合、コンテンツの順序が複雑になり、
 タブキーの操作が難しくなるので、CSSによるデザインで、
 タブキーや矢印キーで容易にコンテンツを閲覧できるような仕様に
 されるとアクセシブルなサイトとなりますね。


 そのような観点からも、テーブルを使わずCSSによるデザインで
 検索エンジンに読みやすいhtmlで制作することで、検索エンジンの上位表示に
 繋がるという見方もできますね。


 それでは、また次回お会いしましょう。


アクセシビリティ・ユーザビリティを考慮したホームページ制作 レボネット