あなたのウェブサイトはアクセス可能ですか？

ますます多くの企業がオンラインに移行しています。これは素晴らしいことですが、人口の一部がWebサイトを使用できない場合はそうではありません。 アクセシビリティの問題は多くのサイトで一般的であり、比較的簡単に解決できる多くの問題を引き起こします-それはあなたがまったく新しいウェブサイトを必要とするという意味ではありません！

障害に関するWHO2011の報告に基づくと、世界で10億人以上が何らかの形の障害を持っています。 これは世界の人口の約15％に相当します。 この数は、人口が高齢化するにつれて増加し、高齢者は障害のリスク/割合が高くなります。

2018年、英国政府は、中央政府、地方自治体組織、一部の慈善団体、およびその他の非政府組織のWebサイトがWCAG2.1ガイドラインを満たすことを法律で定めました。

その後、2019年に、欧州アクセシビリティ法が制定されました。 1990年までさかのぼって、アメリカ障害者法は現在Webサイトで取り組まれている問題を対象としていました。 状況によっては、企業は現在、法廷に持ち込まれ、敗訴しています。たとえば、ドミノ・ピザの訴訟を考えてみましょう。

人々は会場が物理的にアクセス可能であることを確認することを躊躇しないでしょう、それでなぜあなたのウェブサイトをアクセス可能にするのが違うのですか？ より多くの企業が主にオンラインに転向しているため、これまで以上に重要なことはありません。

目的

アクセシビリティは人権であるため、私たちの目標は包括的なWebサイトを作成することです。

このサイトは誰にとっても使いやすいだけでなく、クライアントにより多くのリードをもたらす可能性があります。 クリックアウェイポンドは、「アクセス可能な消費者向けWebサイトの提供に失敗すると、2016年に英国の小売業者に117.5億ポンドの費用がかかりました」と述べています。

問題

主な問題は、私たちが包括性や障害そのものについてどのように考えるかということです。 私はエイドリアン・ロゼリと、利己的なアクセシビリティ方法を介してこれにアプローチする彼の方法の大ファンです。 これは最近の会議からのエイドリアンのビデオです、私は人々が直面するかもしれない障害と一般的な問題についての異なる視点のためにそれを見ることを強くお勧めします。

基本的に、彼は一般的なWebサイトのアクセシビリティの問題を、障害を持つ人々だけでなく、すべての人が経験する日常の状況に関連付けています。 たとえば、コントラストの問題は、人が太陽の下や明るい場所でラップトップを使用している場合にも問題になると彼は簡単に説明しています。 したがって、私たちのサイトがより多くの人々にもアクセス可能であることを確認することが私たちの最大の利益であることがわかります。

彼のビデオと統計からわかるように、アクセシビリティの問題を抱えている人々は、あなたが思っているよりもはるかに一般的です。

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

したがって、私たちのサイトを包括的にすることは、すべての人にとって利益になると判断しました（私は願っています！）。 アクセシビリティに取り組むときに最初に頭に浮かぶのは、実装に費用と時間がかかる追加の機能を組み込む必要があること、または設計を制限することです。

実際にはそうではなく、Adrian Roselliの利己的なアクセシビリティ方法を少し考え、計画し、使用するだけで、それらの多くを非常に簡単に解決できます。

色とコントラスト

世界のすべての男性の約8％（10人に1人）が色覚異常であるため、これらの要件を満たすカラーパレットを選択しましょう。
クライアントのウェブサイトがアクセスできない色を使用している場合は、リードの8％を失う可能性があるかどうかをクライアントに尋ねます。 あなたがこれを彼らに言うならば、彼らは色を再考するかもしれないと私は確信しています。

これらの色を選択するときは、それらの間で適切なコントラスト比を使用するようにしてください。また、低コントラストの背景（太陽の下でラップトップなど）にある場合は、リンクを非表示にしないでください。 これは、オンラインコントラストチェッカーツールなどを使用した5分間の作業です。リンクを特定したい場合は、リンクチェッカーツールを使用してください。

フォントサイズと選択

あなたのウェブサイトには、人々に理解してもらいたい情報が含まれていますか？ はいと思います。 それで、彼らがその戻るボタンを押す前に、あなたのサイトの最も重要な成分の1つが目に消化できることを確認しましょう。

あなたのサイトを閲覧する10人に1人は、目に何らかの問題があります（色覚異常は含まれません）。 40歳では、20歳のときと比べて、光の半分だけが網膜に到達します。60歳以上の人の場合、これは20％に低下します。

デフォルトのブラウザ本体のフォントサイズは通常16pxまたは1remで、これは「最小」の推奨フォントサイズでもありますが、これは小さすぎます。 ここで最も一般的な議論は、「テキストを大きくしたい場合は、ズームインするだけでよい」というものです。 これに伴う問題は、この問題の影響を受けるほとんどの人がおそらくズームする方法を知らないということです。したがって、これが彼らの選択肢であると想定すべきではありません。

「最適な」サイズやフォントはありませんが、18pxまたは1.125remに近いボディフォントサイズをお勧めします。適切な間隔の行の高さ、適格なフォント、最小限のフォントライブラリが含まれています。 Webaimにはフォントに関する優れた記事があり、次のように述べています。「新しい書体、フォント、またはフォントのバリエーションに遭遇するたびに、単語をより迅速に解析して意味を処理するために、文字とパターンのマップまたはモデルを作成する必要があります。 これには、認知的努力と時間が必要です。 書体がすでにおなじみの場合、このオーバーヘッドは削減されます。」

Gill Andrewsは、タイポグラフィの間違いに関するより包括的な投稿をしています。これは、多くのタイポグラフィを扱う場合に読む価値があります。

画像

ここで言及することはあまりありませんが、画像にaltタグがあることを確認するためです。 現在、ほとんどのCMSには、アップロード時に画像のaltタグを追加するオプションがあります。 重要な場合は、実際に画像を説明するようにしてください。 このハブスポットの記事には、altタグの使用法の良し悪しについての良い記事があります。

画像が重要ではなく、背景パターンのように純粋に装飾的なものである場合は、タグを空のままにします。 alt =””のように、マークアップで実際に空であることを確認してください。そうしないと、altタグがないというフラグが立てられます。

覚えておくべき重要なことの1つは、重要なテキスト（見出しなど）に画像を使用しないでください。スクリーンリーダーやGoogleでは画像を読み取れないためです。 背景が原因でテキストが読めなくなる可能性があるため、画像の上にもテキストを配置するように注意してください。

構造

上記の基本に従ったとしても、通常見落とされがちなことの1つは、ページの実際のセマンティック構造です。 多くの人がフォントや見出しのサイズにとらわれ、ページ情報の階層を定義するのではなく、スタイリングの目的でこれらを使用します。

これは、コンテンツがGoogleによってどのように解釈されるかに影響するだけでなく、スクリーンリーダーを使用しているユーザーは、構造マークアップをナビゲーションとして使用します。 Yoastには見出しに関するすばらしい記事があり、少し時間をかけて読む必要があります。 いくつかの簡単なアドバイスは、ページに1つの<h1>要素を配置し、次に次の重要なセクションに<h2>を配置することです。 サブセクションの子がある場合は、<h3>などを使用します。

<h1>通常はページタイトル</ h1>

<p>ここにいくつかの段落テキスト</ p>

<h2>ページの次の重要なセクション</ h2>

<p>ここにいくつかの段落テキスト</ p>

<h3>それほど重要ではないが、上記のh2に関連するもの</ h3>

<p>ここにいくつかの段落テキスト</ p>

<h2>ページの次の重要なセクション</ h2>

切り上げする

上記の簡単なルールに従うことで、サイトにアクセスしやすくなり、サイトにアクセスするすべての人にとってより楽しい体験ができるようになることを願っています。 これだけでなく、Googleでの地位も向上しているので、誰にとってもメリットがあります。

サイトがこれらの基準に適合しているかどうかわからない場合、またはサイトのアクセシビリティを改善するための支援が必要な場合は、当社までご連絡ください。