私たちのコミュニティのためのアクセス可能で包括的なウェブサイトの作成

あなたのウェブサイトを誰もがアクセスできるようにする方法、そしてウェブサイトのアクセシビリティ基準は何ですか？

あなたは自分自身に問いかけているかもしれません：ウェブサイトのアクセシビリティとインクルージョンとは何ですか？

一般的に発達した人と同じように、誰もがインターネットにアクセスできるわけではありません。 私たちの社会の大部分（オーストラリアでは20％）は、何らかの形の障害を抱えて生活しています。 これは、すべてのオーストラリア人の少なくとも20％が、インターネットコンテンツを表示、聞き取り、または認知的に消化する能力が低いため、インターネットコンテンツを消費、アクセス、読み取り、聞き取り、または理解する能力が低い、またはできないことを意味します。 これは、永続的または一時的な障害、怪我や言語の壁、または操作されているWebサイトの不必要な複雑さが原因である可能性があります。

ウェブサイトのアクセシビリティとは、ウェブサイト、ツール、テクノロジーが、誰であるかに関係なく、誰もが認識、理解、ナビゲート、相互作用、貢献できることを意味します。 アクセシビリティは、孤立のリスクがある可能性のある人々の社会的包摂をサポートし、WebサイトとWebツールが包括的に設計されている場合、障害を持つ人々はそれらを完全に使用できます。

記事上で：

1.なぜ私たちは私たちのウェブサイトをよりアクセスしやすくする必要がありますか？

アクセシビリティは法です

アクセシビリティは人権です

2.一般的なアクセシビリティの問題

聴覚

見る

理解

ナビゲート

スピーチ

3. Webサイトをよりアクセスしやすくするにはどうすればよいですか？

4.誰もがアクセスできるWebページを作成する方法

5. Webコンテンツアクセシビリティガイドライン（WCAG）

6. WCAGの要約–誰もがWebコンテンツにアクセスできるようにする方法

7. WCAGに準拠しないことが正当化されるのはいつですか？

8.Webアクセシビリティのテスト

9.Webアクセシビリティを手動でテストする6つの簡単な方法

トップに戻る

1.なぜ私たちは私たちのウェブサイトをよりアクセスしやすくする必要がありますか？

3つの主な理由から、Webサイトをよりアクセスしやすくする必要があります。

• それは読者にとって良いことです–誰もが他の人と同じように完全な方法でインターネットを使用する権利を持っており、これが起こると、それは読者の生活の質と幸福を増します。 私たちのウェブサイトを「差別をなくし、人権を促進するという社会の義務と一致している」ので、彼らはつながり、含まれていると感じます。

• それはビジネスにとって良いことです–より多くの人々が私たちがクライアントのために作成したコンテンツにアクセスできれば、より多くの人々が私たちがウェブサイトを作成しているブランドに触れるでしょう。 より多くの露出はより多くの売上を意味しますが、これに加えて、より大きなアクセシビリティは、私たちが作成しているブランドがインクルージョンを念頭に置いていることを示しています。 これにより、ブランドに対する肯定的な認識が高まります。

• それは人権であり、法律の要件です–これは非常に重要です。

トップに戻る

アクセシビリティは法です

障害者差別法（1992年）の第24条に基づき、「支払いの有無にかかわらず、商品やサービスを提供したり、施設を利用可能にしたりする人が、他人の障害を理由に他人を差別することは違法です。

1. 他の人にそれらの商品またはサービスを提供すること、またはそれらの施設を他の人が利用できるようにすることを拒否することによって。
2. 最初に言及された人が他の人にそれらの商品またはサービスを提供する、またはそれらの施設を他の人が利用できるようにする条件。 また
3. 最初に言及された人が他の人にそれらの商品またはサービスを提供する方法、またはそれらの施設を他の人が利用できるようにする方法。

平易な英語では、これは、会社が障害に基づいて人が施設を利用できないようにすることを理由の範囲内で選択した場合、法律に基づいて起訴される可能性があることを意味します。

トップに戻る

アクセシビリティは人権です

障害者差別法に加えて、あらゆる形態のアクセシビリティは人権です。 障害者の権利に関する条約（CRPD）は、2006年に国連によって採択されました。条約の第（4）（1）（g）条は、「障害者の新しい情報通信へのアクセスを促進する」ことを締約国に求めています。インターネットを含む技術とシステム」。 オーストラリアは条約の最初の署名者の1人でしたが、オーストラリア人権委員会（AHRC）が指摘しているように、私たちは皆、条約によって確立された権利を守る義務があります。

トップに戻る

2.一般的なアクセシビリティの問題

オンラインコンテンツは通常、テキスト、オーディオ、ビデオ、および画像で構成され、通常は非線形形式です（つまり、Webサイトは通常、ページの上から下へのリストだけでなく、リンク、個別のセクション、ボタンやその他のメディアが点在している）や、Webサイトのさまざまな要素にアクセスできない人もいます。

聴覚

聴覚障害のある人やd/Deafの人は、オーディオクリップやオーディオが含まれているビデオクリップを必ずしも理解しているとは限りません。 オーディオには、音楽、楽譜などのメッセージを伝えるサウンド、Webページの要素がクリックされたときにアクティブになるノイズ、スピーチ、さらにはコンピューターの警告音などがあります。

見る

同様に、視覚障害または部分的または完全な失明のある人は、必ずしもテキストを読んだり、ビデオクリップを見たり、Webサイトを効率的にナビゲートしたりできるとは限りません。 コントラストの悪いテキストを読むのが難しい場合や、画像の点滅に敏感な場合があります。

理解

ウェブサイトを理解することは、ウェブサイトの複雑さに帰着します。 説明のつかない専門用語、小さなフォント、ウェブサイトをクリックして移動するためのわかりにくい場所、バックリンクシステムの不良、見出し構造の欠如、テキストのコントラストの悪さ、隠された部分がある場合、多くの人がウェブサイトをナビゲートするのが困難になります。 認知障害、テクノロジーの経験不足、または視覚障害がある場合、これらの領域で問題が発生する可能性があります。 ただし、これらの設計上の欠陥があるWebサイトでは誰でも問題が発生する可能性があります。

ナビゲート

Webサイトはデザインの欠点によりナビゲートするのが難しくなりますが、認知的課題を抱えている人、または視覚的課題を抱えている人は、Webページをナビゲートするのが困難になります。 さらに多くの人が、マウスやキーボードを使用する能力に影響を与える運動機能の要因を持っている可能性があります。

スピーチ

インターネットの一部は音声でアクティブ化され、最近では音声がパスワードの形式として使用されるようになっています（たとえば、Centrelink Voice Authentication）が、インターネットアクセスのこの成長する側面は、音声が制限されている人や聴覚障害のある人には使用できない可能性があります。または第二言語として英語を使用する人。

トップに戻る

3. Webサイトをよりアクセスしやすくするにはどうすればよいですか？

Webプログラマーやデザイナーが製品への掲載を増やす方法を模索しない限り、多くの人々が一部、ほとんど、またはすべてのインターネットコンテンツから除外されるリスクがあることは明らかです。

できるだけ多くの人が当社のWebサイトにアクセスできるようにする方法は、World Wide Web Consortium（W3C）が定めた法律の範囲内で当社を維持するための国際的なガイドラインに従うことです。

トップに戻る

4.誰もがアクセスできるWebページを作成する方法

ほんの少しの調査で、Webデザイナーと開発者は、より多くの人々があなたにできる製品を作成することにもっと積極的に取り組むことができます。 これを支援するためにオンラインで利用できるいくつかの素晴らしいリソースがあり、私たち全員が次のようなWebサイトを作成するのに役立ちます。

• 有益でユニークなページタイトルを提供する
• 見出しを使用して意味と構造を伝える
• リンクテキストを意味のあるものにする
• 画像の意味のある代替テキストを書く
• マルチメディアのトランスクリプトとキャプションを作成する
• 明確な指示を提供する
• コンテンツを明確かつ簡潔に保つ

トップに戻る

5. Webコンテンツアクセシビリティガイドライン（WCAG）

W3Cは、メンバー組織、常勤スタッフ、および一般の人々が協力してWeb標準を開発する国際コミュニティです。 W3Cの使命は、Webを最大限に活用し、Web Accessibility Initiative（WAI）を運営することです。 Webアクセシビリティに関するWAIガイドラインは次のとおりです。

• Webコンテンツアクセシビリティガイドライン（WCAG）2.0 –障害を持つ人々がWebサイトにアクセスできるようにするためのガイド。
• モバイルWebベストプラクティス（MWBP）–モバイルデバイスからWebサイトを使用できるようにするためのガイド。
• モバイルWebアプリケーションのベストプラクティス（MWABP）–モバイルデバイスでWebアプリケーションを開発および配信するためのガイド。

ガイドラインの完全な詳細は非常に複雑で複雑であり、この記事の範囲をはるかに超えています。 このため、この記事では、Webアクセシビリティを理解するための出発点として、またさらに読むための出発点として、記事の要点を要約して説明します。 完全なドキュメントへのリンクは次のとおりです。

WCAG（Webコンテンツアクセシビリティガイドライン）全文

MWBP（モバイルWebのベストプラクティス）フルドキュメント

MWABP（モバイルWebアプリケーションのベストプラクティス）完全なドキュメント

モバイルデバイス用のページ、アプリ、またはWebツールの作成に基づくアクセシビリティガイドラインがあるのはなぜか疑問に思われるかもしれませんが、W3Cとオーストラリア人権委員会（AHRC）は、次のように同意しています。モバイルデバイスを使用しています」。 実際、非常に多くの重複があるため、W3Cは、コンピューターと比較して携帯電話でのアクセシビリティの問題に直面しているため、さまざまな能力を持つ人々や一般的に発達した人々に適したモバイルのガイドラインを作成しました。

トップに戻る

6. WCAGの要約–誰もがWebコンテンツにアクセスできるようにする方法

これを見る簡単な方法、簡単な経験則：複数のメディアタイプを使用して、私たちが取り組んでいるWebサイトの各メッセージを伝え、Webサイトの要素にアクセスする複数の方法を含め、調子。

WCAGは、これらを、良い、非常に良い、または優れたレベルで達成できる4つの主要な原則としてリストしています（ガイドラインでは、それぞれA、AA、およびAAAとして示されています）。 このドキュメントでは、すべてのグレードがアクセシビリティ要件に「合格」し、一部のAAAソリューションは時間またはコストが法外なため、AおよびAAソリューションのみがリストされています。 オーストラリア政府のWebサイトには、AAに準拠しており、たとえばAAA準拠に向けて取り組んでいると記載されています。

WCAGに苦情を申し立てるには、ユーザーインターフェイスの情報と操作は次のとおりである必要があります。

1. 知覚可能（視覚、音、またはその両方）
2. 操作可能（マウスとキーボードによる）
3. 理解できる（書くことは理解しやすいものでなければならない）
4. 堅牢（さまざまなユーザーエージェントによって解釈されます）

プリンシパル1-ウェブサイトとそのナビゲーションは認識可能でなければなりません

次のようなテキスト以外のコンテンツには、代替テキストを使用します。

• 大活字、点字、スピーチ
• 記号
• より単純な言語

次のような時間ベースのメディアには、時間ベースのメディアの代替手段を使用します。

• 事前に録音された、またはライブのキャプション
• 音声ガイド
• 事前に録音された手話
• 拡張音声解説

情報や構造を失うことなく、複数の方法で提示できる適応可能なWebコンテンツを作成します。

• 正しい読み取りシーケンスを使用してください。
• 形状、色、サイズ、視覚的な位置、向き、または音のみに依存する指示に相当するテキストまたは音声を提供します。
• 縦向きと横向きを使用します（特定の表示方向が必要な場合を除く）。
• 入力フィールドにラベルを付けます。

ユーザーがコンテンツを見たり聞いたりしやすくします。

• 3秒を超える長さのオーディオ用のサウンドコントロールを含めます。
• バックグラウンドオーディオを低くするか、まったく使用しないでください。
• 前景と背景を分離します。
• 情報を行動、反応、または視覚的要素を伝える視覚的手段としてのみ、言葉で色を使用してください。
• テキストを使用して視覚的な表現を説明します。
• 少なくとも4.5：1のコピーでコントラスト比を使用します
• コンテンツや機能を失うことなく、最大200％のコピーテキストサイズ変更を有効にします。
• ユーザーが2次元でスクロールする必要はありません。
• 間隔：
  • 行間隔：1.5以上
  • 終了段落の間隔：2xフォントサイズ以上
  • 文字間隔：0.12以上
  • ワード間隔：0.16xフォント以上
• ホバーコンテンツを却下可能、ホバー可能、永続的にします。

トップに戻る

原則2–Webサイトとそのナビゲーションは操作可能でなければなりません

マウスとキーボードを介してWebコンテンツにアクセスできるようにします。

• キーボードとマウスを使用して、すべてのコンテンツと機能を利用できるようにします。
• キーボードとマウスを使用して、キーボードフォーカスを自由に移動できるようにします。
• ショートカットは、フォーカスでのみ有効または無効、再マップ、またはアクティブにすることができます。

コンテンツを読んで使用するのに十分な時間をユーザーに提供します。

• コンテンツによって設定された各制限時間をオフ、調整、または延長する機能があります。
• 制限時間の終了についてユーザーに警告します。
• 情報の移動、点滅、スクロール、または自動更新を一時停止、停止、または非表示にします。

発作や身体的反応を引き起こさないコンテンツをデザインする：

• 要素が1秒間に3回未満点滅するか、フラッシュが一般的なフラッシュと赤のフラッシュのしきい値を下回っていることを確認します。
• 必須ではないアニメーションを無効にするオプションを追加します。

ユーザーがナビゲートし、コンテンツを見つけ、自分がどこにいるかを判断するのに役立つ方法を提供します。

• 繰り返されるコンテンツのブロックをバイパスするオプションを追加します。
• Webページに正確に説明的なタイトルが付いていることを確認してください。
• フォーカス可能なコンポーネントが意味と操作性を維持するようにします。
• 各リンクが正確なリンクテキストまたはコンテキストから決定できることを確認してください。
• Webサイト内に複数のWebページの場所のオプションが存在することを確認します（Webページがプロセスの結果またはステップインである場合を除く）。
• キーボードフォーカスインジケーターが表示されていることを確認します。

ユーザーがキーボード以外の複数の入力を介して機能を操作しやすくします。

• マルチポイントまたはパスベースのポインタジェスチャは、パスベースのジェスチャなしで単一のポインタで操作できます。
• テキスト画像のテキストラベルには、視覚的に表示されるテキストが含まれている必要があります。
• デバイスまたはユーザーモーション機能は、他のユーザーインターフェイスコンポーネントによって操作することもできます。

トップに戻る

原則3–理解できる

ユーザーインターフェイスの情報と操作は理解できるものでなければなりません。

テキストコンテンツを読みやすく理解しやすいものにします。

• 各Webページのデフォルトの人間の言語は、ユーザーが変更できます。
• コンテンツ内の各パッセージまたはフレーズの人間の言語を翻訳できます（名前、専門用語、スラングを除く）。

Webページを表示し、予測可能な方法で動作させる：

• ユーザーインターフェイスコンポーネントは、フォーカスを受け取ったときにコンテキストの変更を開始しません。
• 要素の設定を変更しても、コンテキストが不特定に変更されることはありません。
• Webサイト内の複数のWebページで繰り返されるナビゲーションメカニズムは、ユーザーが変更を開始しない限り、毎回同じ相対順序で発生します。
• Webサイトで同じ機能を持つコンポーネントは、一貫して識別されます。

入力支援：ユーザーが間違いを回避して修正できるようにします。

• 自動的に検出されたすべてのエラーを特定してユーザーに説明します。
• コンテンツにユーザー入力が必要な場合は、ラベルまたは指示を提供します。
• コンテンツのセキュリティや目的を危険にさらさない限り、入力エラーは自動的に検出され、修正の提案が提供されます。
• 法的または金融取引は、確定する前に元に戻して確認し、確認することができます。

トップに戻る

原則4–堅牢

コンテンツは、支援技術を含むさまざまなユーザーエージェントが解釈できるように十分に堅牢である必要があります。

支援技術を含む、現在および将来のユーザーエージェントとの互換性を最大化します。

• マークアップ要素は–
  • 完全な開始タグと終了タグがあります。
  • 仕様に従ってネストされます。
  • 重複する属性は含まれていません。
• IDは、仕様でこれらの機能が許可されている場合を除き、一意である必要があります。
• スクリプトによって生成されたフォーム要素、リンク、およびコンポーネントは、自動生成できる必要があります。
• 状態、プロパティ、および値は、プログラムまたは手動で設定できる必要があります。
• これらの項目への変更の通知は、支援技術を含むユーザーエージェントが利用できるようにする必要があります。
• マークアップ言語を使用して実装されたコンテンツでは、ステータスメッセージは、焦点を当てることなく支援技術によってユーザーに提示できるように、プログラムで決定できる必要があります。

これは、Jezwebで利用できるアクセシビリティオプションの簡単な要約です。 いくつかはAレベルに準拠しており、いくつかはAAですが、Webデザインとコピーライティングのプロセスに早い段階で書き込まれれば、すべての領域で達成可能です。 既存の作業を修正するよりも、早い段階でアクセシビリティを書き込む方がはるかに迅速で簡単です。

トップに戻る

7. WCAGに準拠しないことが正当化されるのはいつですか？

オーストラリア人権委員会が定めたように、アクセシブルなWebサイトの構築には合意された制限があります。 障害者差別法（1992）に関して、一部の（すべてではない）状況では、平等なアクセスを提供するDDAに基づく義務は、不当な困難の概念によって制限されています。

言い換えれば、企業が特定のアクセシビリティ要素を改善するための時間やお金を払う余裕がなく、それを証明できる場合、それらの要素を含めない原因がある可能性があります。 そうでなければ、私たちのコンテンツを可能な限りすべての人が利用できるようにするのは、企業として、そして個人としての私たち次第です。

訴訟の詳細については、このリンクは法的アドバイスではなく、一般的な情報にすぎないことを念頭に置いて、humanrights.gov.au / our-work / disability-rights/world-wide-web-access-disability-discriminationをクリックしてください。 -act-advisory-notes-ver＃whatis

トップに戻る

8.Webアクセシビリティのテスト

Webアクセシビリティレベルは2つの方法でテストできます。

• Webアクセシビリティツール（Webアクセシビリティツールのプロセスについては、ラインマネージャーにお問い合わせください）
• 手動監査（人間によるチェック-以下を参照）

WebサイトまたはWebアプリケーションを開発または再設計するときは、アクセシビリティの問題に対処しやすい時期に、アクセシビリティの問題を早期に特定するために、開発プロセスの早い段階および全体を通してアクセシビリティを評価します。 評価に役立つ評価ツールがあります。 ただし、ツールだけでは、サイトがアクセシビリティ基準を満たしているかどうかを判断することはできません。 サイトにアクセスできるかどうかを判断するには、知識のある人間による評価が必要です。」 （W3C Webサイト、2021年4月9日）

トップに戻る

9.Webアクセシビリティを手動でテストする6つの簡単な方法

人間によるテストは、WCAG（Web Accessibility InitiativeのWebコンテンツアクセシビリティガイドライン、意味を忘れた場合に備えて）に準拠しているかどうかを手動で監査することで実行できます。

WCAGの詳細は密集しています。 人々はそれを理解するためにキャリア全体を捧げましたが、あなたの仕事のアクセシビリティをテストするためにあなたができるいくつかの簡単なことがあります：

1.マウスのプラグを抜くか、トラックパッドの電源を切ります

TABまたはSHIFT+TABのみを使用してサイトと対話します。 ナビゲートし、Enterキーを押してリンクをたどります。

• キーボードのみを使用して、すべてのコントロール、リンク、およびメニューを操作できますか？
• どのアイテムに常に焦点が当てられているかわかりますか？
• 視覚的なフォーカスの順序は、意図したインタラクションの順序と一致していますか？

2.ハイコントラストモードをオンにします–これによりサイトの色も削除されます。

WebAIMのロービジョンユーザー調査によると、回答者の30％がハイコントラストモードを使用したと述べています。

• ページ上の各要素を簡単に表示できますか？
• サイト内を移動できますか？
• すべてのコピー要素を読んで理解できますか？

3.ブラウザの設定で画像をオフにします。

• 内容は意味がありますか？
• 内容がわかりにくくなりませんか？
• 現在不足しているコンテンツはありますか？
• 重要なコントロールが消えますか？

4.キャプションまたはトランスクリプトを確認します

• ビデオに直接キャプションがありますか、それともキャプションをオン/オフにするコントロールがプレーヤーにありますか？
• 音声ガイド付きの代替バージョン、または音声ガイドをオン/オフにするプレーヤーのコントロールはありますか？
• ダイアログの多い動画の場合、ページにテキストのトランスクリプトがありますか、またはトランスクリプトに移動するビデオプレーヤーの近くにリンクがありますか？

ビデオのみおよびオーディオのみのシナリオには他の要件がありますが、上記はほとんどのサイトのほとんどのメディアを対象としています。

注：メディアコンテンツ自体にアクセスできるだけでなく、プレーヤーにもアクセスできる必要があります。 メディアプレーヤーのアクセシビリティに関する今後のブログ投稿を探してください。

5.フィールドラベルをクリックします

ラベルの欠落または不完全、効果のないエラー処理、および不十分なフォーカス制御に注意してください。

フィールドの横にあるテキストラベルをクリックします。

• テキスト入力またはテキスト領域の横にあるラベルをクリックすると、カーソルはフィールドに移動しますか？
• ラジオボタンまたはチェックボックスの横にあるラベルをクリックすると、隣接するオプションが選択されますか？
• SELECT要素の横にあるラベルをクリックすると、その場所はSELECTにフォーカスしますか？

注意：ラベルとコントロールの間には1対1の関係が必要です。

6.ブラウザの設定でCSSをオフにします。 背景画像が消えます

• 重要なコンテンツが消えましたか、それともコントロール、アイコン、またはその他の実用的な要素が消えましたか？
• エラーメッセージや他の以前の視覚的な手がかりのようなものを理解するのは今では難しいですか？
• コンテンツはまだ合理的で理解しやすい順序で表示されていますか？
• 背景色を含む色は残っていますか？
• テキストの表現スタイルは残っていますか？

これらの簡単なガイドラインに従うことは素晴らしい出発点ですが、非常に簡単な概要にすぎません。 より詳細な情報については、常にWCAGを参照する必要があります。

トップに戻る

さまざまな能力を持つ人々の味方であることを確認する方法

ウェブサイトの監査を依頼し、船上でそれらから出てくる推奨事項を取ります。 Jezwebには、アクセシブルなWebサイトの経験があり、テクノロジーの発展に合わせてWebサイトをさらに作成することに情熱を注いでいる、経験豊富なWebサイト開発者とデザイナーのチームがいます。 特定のウェブサイトの機能や質問の詳細については、私たちのチームに連絡して会話してください。