アクセシビリティの概要：パート1

公開: 2017-05-03

アクセシビリティとは、耳にする言葉ですが、完全には理解できない場合があります。これは、単語自体が少し混乱する可能性があるためです。ルートワードであるaccessは、概念をパスワードなどに結び付けているように見せます。ユーザーがサイトに「アクセス」できる場合、アクセシビリティはオフになっています。それがそんなに単純だったら。

Webアクセシビリティとは、実際には、身体的または精神的な障害に関係なく、ユーザーがサイトのコンテンツにアクセスする能力に関するものです。インターネットの発明者であるティムバーナーズリー卿は、それを完璧に表現しています。

「Webの力はその普遍性にあります。障害に関係なく、すべての人がアクセスできることが重要な側面です。」

真にアクセス可能なウェブサイトには、すべての潜在的なユーザーが含まれています。それはすべての形、サイズ、および永続性の異なる能力をカバーしています。目の見えないユーザーには、手が折れたユーザーと同様に、独自のニーズがあります。アクセシビリティグループ間でも重複があります。脳震盪の症状を経験しているユーザーは、発作を経験しているユーザーがコンテンツの一部にアクセスしやすくするように設計された機能の恩恵を受けることができます。アクセシビリティは多面的なトピックです。

WCAG2.0の要件

すべての素晴らしいことと同様に、アクセシビリティは習得は簡単ですが、習得するのは困難です。個々の標準はそれほど複雑ではありませんが、現在のWebコンテンツアクセシビリティガイドライン（WCAG）は圧倒される可能性があります。だから私はあなたのためにそれらを分解し、境界線の合法的なもののいくつかを英語に似たものに翻訳するつもりです。

Webアクセシビリティには4つの主要な信条があります。あなたのサイトとコンテンツは、知覚可能で、操作可能で、理解可能で、堅牢である必要があります。 WCAG標準は、これら4つの原則を使用して編成されています。

「アクセシビリティ入門」シリーズのパート1では、最初の信条である知覚可能性に焦点を当てます。

知覚可能

サイトが知覚可能であると見なされるためには、「情報およびユーザーインターフェイスコンポーネントは、ユーザーが知覚できる方法でユーザーに提示可能でなければなりません」。 Webのコンテキストでの知覚は、さまざまな形をとることができます。ほとんどの人にとって、知覚とはウェブサイトを見たり読んだりできることを意味します。しかし、ユーザーが視覚障害を経験した場合はどうなりますか？そこでWCAG標準が登場します。

画像は、ほとんどのユーザーにとってインターネット体験の大きな部分を占めています。一部の画像は装飾的です。補足的なものもあり、見分けやすい例を示しています。しかし、多くの場合、画像はコンテンツセグメントの意味に不可欠な、重要なコンテンツです。このような場合、代替テキストを提供する必要があります。それが、私の友達です。あなたの画像の「alt」属性は何のためのものですか。「alt」は「alternative」の略で、代替テキストの説明を意味します。「SEOキーワードでいっぱいにする」という意味ではありません。

これは、スクリーンリーダーが完全に無視できるように、重要でない画像をマークアップする必要があることも意味します。これを行う1つの方法は、「alt」属性を空白のままにすることです。はい、空白です。直感に反しているように見えますが、「alt」属性が入力された純粋に装飾的な画像を使用すると、目の見えないユーザーがサイトやコンテンツを認識しにくくなる可能性があります。

見ることはできるが聞くことができないユーザーはどうですか？ WCAGはいくつかの異なる標準を提供します。コンテンツが埋め込みYouTubeビデオのように事前に録画されているか、会議のライブストリームのようにライブであるかによって、標準は異なります。事前に録画されたビデオにはキャプションを付ける必要があります。または、その下にビデオのトランスクリプトを提供することもできます。少なくとも、ビデオコンテンツの要約を提供する必要があります。 AAA標準1.2.6などのより高い標準では、ビデオコンテンツの手話解釈が求められます。 AAA規格は法律で義務付けられていませんが、そのようなサービスを提供するための経済的な帯域幅がある場合、それは非常に良い方法であなたのビジネスを際立たせることができます。

知覚可能な原則は、コンテンツの編成方法も対象としています。開発のコンテキストから、これはサイトまたはコンテンツの一部がHTMLでマークアップされる方法を指します。コンテンツは、意味のある方法でマークアップする必要があります。ユーザーは、通常のブラウザーの外部で体験したときに、断片が故障しているコンテンツを体験してはなりません。各段落は、サイドバーやその他の非コンテンツ要素を中断することなく、次々に流れる必要があります。

これは、スクリーンリーダーのユーザーにとって不可欠です。彼らは直線的にウェブサイトを体験します。スキップリンクなどの機能によりナビゲーションが簡単になりますが、スクリーンリーダーのコアコンセプトは、文字通り画面を左から右（または一部の言語では右から左）に読み取ることです。マークアップが不十分なためにコンテンツが他の要素によって分割されている場合、リーダーがセクションからセクションにジャンプするため、ユーザーは混乱したままになります。彼らはおそらく見ることができないので、ジャンプが起こっている理由をよりよく理解するのを助けるための代替手段がありません。

知覚可能な原理の最後の側面である識別可能性は、間違いなく最も重要です。ここで行われた決定は、ブランド全体に影響を与える可能性があります。これが、これがWebアクセシビリティの最も見過ごされている側面の1つである理由でもあります。識別可能性は、単純なトピックの長い言葉です。ユーザーは、フォアグラウンドコンテンツとバックグラウンドコンテンツの違いを区別できますか。これは単なる議論ではありません。識別可能性には、オーディオ要素とビデオ要素も含まれます。

識別可能性は、色に関係する場合でも、いくつかの形を取ります。 1つ目は、要素が異なるものとして区別される唯一の方法が色ではないことを確認することです。ここでの明確な使用例は、成功テキストに緑を使用し、失敗テキストに赤を使用しています。このシナリオでは、赤/緑の色覚異常が最も一般的な色覚異常のユーザーが2つの状態の違いを認識できるように、インジケーターを追加することが重要です。

唯一の指標として色を使用することは、Web上で大きな問題です。あなたが行ったことのあるすべてのサイトについて考えてみてください。それは明らかにデザインを重視しています。彼らの見た目は細部まで微調整されています。コンテンツ全体を通して、何かに気付くかもしれません。下線はありません。これは、リンクの色をテキストとは異なるものにする必要があるためです。それが彼らが際立っている方法です。それは信じられないほど一般的であり、信じられないほどアクセスできません。

アンダースコアは理由がありますが、デザイナーは醜いので嫌いです。アンダースコアの見栄えを良くし、アクセスしやすくする方法があります。 1つの方法は、下線にグラデーションを使用することです。もう1つは、境界線を使用することです。どのようにスタイルを変更しても、下線が残っていることを確認してください。

識別可能性のもう1つの重要な側面は、色のコントラストです。少なくとも、コンテンツの色と背景色のコントラスト比は4.5である必要があります。テキストが大きい場合、この比率はわずかに3.0に下がります。コントラスト比を計算するには、オンラインで入手できる多くのコントラスト計算機の1つを使用します。色のコントラストの問題は、サイトのデザインチームに問題を引き起こすことがよくあります。ブランドの色は、これらの議論の日を支配する傾向があります。そのため、ブランドの色を決定する際には、アクセシビリティを考慮する必要があります。幸いなことに、標準のフォールバックもあります。白い背景に黒いテキストです。

識別可能性のその他のあまり知られていない側面には、背景のオーディオとビデオの自動再生、およびフォントのサイズ変更が含まれます。フォントのサイズ変更は、見過ごされがちなもう1つの重要なアクセシビリティの問題です。フォントサイズにピクセル値を使用しないでください。これにより、ユーザーはブラウザの設定を使用してテキストのサイズを変更できなくなります。代わりに、emsやremsなどの相対的な単位を使用してください。古いブラウザのフォールバックとしてピクセル値を保持することはできますが、アクセシビリティに関しては前向きに考えることが重要です。

知覚可能性は、ある理由でアクセシビリティの原則の最初に来ます。その標準の多くは、アクセス可能なWebサイトの重要な側面です。ユーザーがサイトを認識できない場合、ユーザーはサイトを操作できません。この一連の概要記事を通して、他の原則について説明しますが、この最初のポイントを決して忘れないでください。あなたはすべてのユーザーにあなたのウェブサイトとコンテンツを知覚する方法を提供しなければなりません。そうしないと、多くの場合、永久に顧客とクライアントを失うことになります。

パート2の準備はできましたか？ここを読み続けてください！