Webアクセシビリティ:情報バリアフリー化の勧め-実践例で今すぐトライ

2019年11月7日

Webアクセシビリティに関する記事一覧のページです。
何をすればいいのか?」「コストはかかるのか?」「そもそも自分のサイトにとって有益なのか(必要なのか)?」そんな疑問にお答えします。是非できることからすぐ始めてみませんか!!

Webアクセシビリティとは(ノウハウ編)

はじめて「アクセシビリティ」・「Webアクセシビリティ」という言葉を聞いた方や、聞いたことはあるけれど実態は知らないという方、まずはこの記事を読んでください。

Webアクセシビリティとは?みんなのための「情報バリアフリー化」を具体例でわかりやすく解説!

 

そして、こちらの記事は東京2020オリンピックのアクセシビリティへの取り組みを紹介しています。「アクセシビリティとは」をお伝えするのにぴったりの内容です。「おもてなし」のワードで始まった東京オリンピックですがその心構えは「みんなにおなじように」の精神で貫かれています!是非一読ください!!
アクセシビリティとは[東京2020オリンピック]のガイドラインにその心構えのヒントを見つけた

 

以下はWebアクセシビリティのチェック(検証)をする場合のガイドラインとなるJIS規格チェック方法についての解説です、個人で運営するブログ等では必要ないかもしれませんが、今後「アクセシビリティ化」の波がきたときには大事な知識となります。知っておいて損はないので、一度目を通しておいてください。

Webアクセシビリティのガイドライン「JIS X 8341-3:2016」って何?

Webアクセシビリティ:チェック(検証)方法とレポート記載(報告)について

 

Webアクセシビリティ(実践編)

Webアクセシビリティの実践について、できるだけ具体的に解説しました。思い立ったらなるべく早いうちにできるところから取り掛かって下さい。Webアクセシビリティの実践とは「Webページをあたりまえに作ること」です、特別な内容はありません(^^)

 

以下の項目がご紹介したいWebアクセシビリティを確保するための基本項目です。実践編ではこれらの10項目の設定の仕方や確認方法をできるだけ詳しく解説していきます。順番でなくても大丈夫です、必要なところからできるところから、できるだけ早く始めてください。

  1. ページの内容がわかるページタイトルを記述する
  2. 見出しやリストなどの文書構造をマークアップする
  3. リンクテキストは、リンク先が分かる文言にする
  4. 情報を伝えている画像に代替テキストを提供する
  5. 文字色と背景色のコントラストを確保する
  6. キーボードだけでも操作できるようにする
  7. 文字サイズや画面表示を変更できるようにする
  8. 動画にキャプション(字幕)を提供する
  9. フォーム・コントロールのラベルをマークアップする
  10. エラーメッセージではエラー箇所と修正方法を明示する

ちょとお勧めの記事です→「Webのこと教えてホシイの!」(漫画でとてもわかりすく解説してあります)上記基本項目もこちらの情報を参考にさせていただきました(o^―^o)

 

画像の代替えテキストについて

4.情報を伝えている画像に代替テキストを提供する

Webアクセシビリティ:画像の代替えテキスト設定方法と確認方法を詳しく解説

文字色とコントラストについて

5.文字色と背景色のコントラストを確保する
Webアクセシビリティ:文字と背景のコントラストを確保する

リンクについて

3.リンクテキストは、リンク先が分かる文言にする
Webアクセシビリティ:ユーザーに負担をかけないリンク設定とは

フォームについて

9.フォーム・コントロールのラベルをマークアップする
10.
エラーメッセージではエラー箇所と修正方法を明示する
Webアクセシビリティ:フォーム(申し込みや購入時の入力欄)はわかりやすさが基本

構造(HTML記述)について

1.ページの内容がわかるページタイトルを記述する
Webアクセシビリティ構造1:ページタイトルは「titleタグ」で記述する、人にも検索エンジンにもわかりやすく!

2.見出しやリストなどの文書構造をマークアップする
Webアクセシビリティ構造2:見出しは「h1,h2,h3」リストは「ol,ul,li」で記述、マシーンリーダブル!


6.キーボードだけでも操作できるようにする
Webアクセシビリティ:マウスを使わない、キーボードだけで操作ができるWebページ


7.文字サイズや画面表示を変更できるようにする
Webアクセシビリティ:ユーザー(利用者)がコンテンツ(Webページ)を拡大縮小できるようにする

 

動画について

8.動画にキャプション(字幕)を提供する
Webアクセシビリティ:動画にキャプション(字幕)を提供する

Posted by りんご