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

2019年11月4日

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

 

アクセシビリティはクローラビリティそのもの

アクセシビリティのご紹介をする前に、「アクセシビリティ対策はSEO対策としてお勧め」です。是非以下の記事を参照ください(^^)

[SEO対策]の強力な副因、「アクセシビリティ」の強化は検索エンジンの評価にも有効

 

 

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アクセシビリティ:動画にキャプション(字幕)を提供する

ディスカバリーアカデミーへの参加は
↓↓↓↓↓↓↓
【りんごの一歩づつサポート】
りんごが徹底支援!WordPressのブログ構築ができるまで、あなたのペースでサポートします!!

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログ&アフィエイトビジネスに奮闘中です。

このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア&初心者向けにネットビジネスの進み方をお伝えしています。
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか!
イラスト、葉っぱ付きりんごを持ったおじさんとおばさん ブログを作ったけどアクセスが無い!、アフィリエイトの成果が出ない!
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *詳細ページが表示されます、すぐにメルマガ申し込みはされません

よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です(^^)
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

Posted by りんご