アクセシビリティとは

  1. ウェブの仕組み
    1. URL とは何か
    2. インターネットの仕組み
    3. ウェブサーバーとは
    4. ドメイン名とは
    5. ハイパーリンクとは
  2. ツールとセットアップ
    1. GitHub Pages の使い方
    2. Google App Engine を使ってウェブサイトを公開する方法
    3. ウェブサーバーにファイルをアップロードするには
    4. ウェブサイトが正しく動作することを確認するには
    5. ウェブサイトを作るのにどんなソフトウェアが必要か
    6. ウェブで何かするのにかかるコスト
    7. どんなテキストエディターが利用できるか
    8. ブラウザーの開発者ツールとは
    9. ローカルテストサーバーを用意するには
  3. デザインとアクセシビリティ
    1. アクセシビリティとは
    2. アクセシビリティを推進する HTML の機能
    3. ウェブサイトのデザインは何から始めればよいか
    4. すべての種類のユーザーのためにデザインするには
    5. 一般的なウェブレイアウトには何が含まれているのか
  4. よくある CSS の問題の解決
    1. CSS の一般的な質問
    2. CSS 生成コンテンツの使用
    3. アイテムを中央揃えするには
    4. テキストに影を追加するには
    5. ポインターを当てるとボタンの色を変えるには
    6. ボックスを半透明にするには
    7. 最初の段落を強調表示するには
    8. 段落の最初の行を強調するには
    9. 画像を歪ませずにボックスを埋めるには
    10. 装飾的なボックスの作成
    11. 要素に影を追加するには
    12. 見出しの直後に来た段落を強調表示するには
  5. よくある HTML の問題の解決
  6. よくある JavaScript の問題の解決

この記事はウェブアクセシビリティの背景にある基本的な概念を紹介します。

前提条件: None.
目標: アクセシビリティとは何か、なぜそれが重要なのかを学びます。

概要

身体的または技術的な制約のために、もしかしたら訪問者は、期待通りにウェブサイトを体験することができないかもしれません。この記事では、アクセシビリティの一般的な原則と、いくつかのルールについて説明します。

アクティブラーニング

利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください

より深く掘り下げる

アクセシビリティ: 一般的な原則

アクセシビリティというと、まずネガティブな制限を連想するかもしれません。この建物はアクセシビリティを確保しなければならないので、ドアの幅やトイレの大きさ、エレベーターの配置など、これらの規則に従わなければならないのです。

それは、アクセシビリティを考える上で、狭量な考え方です。アクセシビリティは、人々に力を与え、より多くのお客様にサービスを提供するための素晴らしい方法だと考えてください。ブラジルの人たちは、あなたの英語のウェブサイトを見て何ができるでしょうか。スマートフォンを持っている人たちが、大きなデスクトップモニターと無制限の帯域幅のために設計された重くて雑然としたウェブサイトを閲覧できるでしょうか。彼らはどこか別の場所に行くでしょう。一般的に、私たちは、すべてのターゲット顧客の視点から製品について考え、それに応じて適応しなければならないと言われています。従って、アクセシビリティなのです。

ウェブアクセシビリティ

ウェブ特有の文脈では、アクセシビリティとは、障害、場所、技術的な制約、その他の状況にかかわらず、誰もがコンテンツから恩恵を受けることができることを意味します。

動画について考えてみましょう。

聴覚障碍

聴覚障碍者は動画からどのような恩恵を受けるのでしょうか?字幕を提供するか、あるいはそれより良いことは、全文を書き起こす必要があります。

また、人それぞれのニーズに合わせて、音量を調整できるようにしましょう。

視覚障碍

この場合も、ユーザーが動画を再生しなくても参照できるテキスト形式の写本と、音声解説(動画の中で何が起こっているかを説明する画面外の音声)を提供しましょう。

中断機能

ユーザーは動画の中の人物を理解するのに苦労することがあります。字幕を読んだり、情報を処理したりするために、動画を一時停止できるようにしましょう。

キーボードの能力

ユーザーが引っかかることなく、動画へのタブイン/アウト、再生、一時停止を行えるようにします。

ウェブアクセシビリティの基本

基本的なウェブアクセシビリティのために必要なものは、以下の通りです。

  • 視覚に障碍をお持ちのユーザーや回線速度の遅いユーザーのために、意味を伝えるために画像が必要な場合は、代替用のテキストを入れるようにしましょう。
  • すべてのユーザーがグラフィカルインターフェイス(メニューの展開など)をキーボードのみ(例えばタブキーとリターンキー)で操作できるようにしましょう。
  • コンテンツの言語を明示的に指定する属性を提供し、画面の内側からテキストを正しく読み取ることができるようにしましょう。
  • ユーザーがキーボードだけで、引っかからずにこのページ上のすべてのウィジェットに移動できるようにしましょう。(少なくともタブインとタブアウトはできるようにしてください。)

そして、それはほんの始まりに過ぎません。

アクセシビリティのチャンピオンたち

1999 年以降、 W3CWeb Accessibility Initiative (WAI) という作業グループを運営しており、ガイドラインやサポート資料、国際的なリソースを通じてアクセシビリティを推進しています。

より詳しく

以下を参照して下さい。

次のステップ

アクセシビリティは、ウェブサイトのデザインと技術的な構造の両方に影響を与える可能性があります。