初心者のためのウェブアクセシビリティ

getdocs

2年前

序章

アクセス可能なアプリケーションやWebサイトを構築することは、今日の標準ではありません。これは、アクセシビリティの概念がほとんどの開発者に知られているためですが、実際にはそれはしばしば無視され、今日のWeb開発の世界では一般的な慣習ではありません。世界銀行統計によると、世界人口は約15% ofで何らかの障害を経験しています。

このチュートリアルでは、開発者にとってWebアクセシビリティが何を意味するのか、それがWebのユーザーにどのように影響するのか、ワークフローでアクセシビリティを活用および改善するためのアプリケーションとツールを改善する方法について学習します。

Webアクセシビリティとは何ですか？

Webアクセシビリティまたはa11yは、よく呼ばれるように、障害を持つ人々がそれらを使用できるようにWebサイト、ツール、およびテクノロジーを設計および開発する手法です。

「アクセシビリティ」という言葉の「A」と「Y」の間に11文字あるため、「アクセシビリティ」は「a11y」と呼ばれることがよくあります。このパターンはヌメロニムとして知られています。

アクセシビリティとは、誰もがWebにアクセスできるようにすることです。これには、以下を含むあらゆる形態の障害を持つ人々が含まれます。

認知
神経学的
物理的
スピーチ
ビジュアル
聴覚障害

アクセシビリティには障害が含まれますが、それでもWebを使用する人々に次の制限がある場合を考慮しています。

インターネット接続が悪い。
腕の骨折などの一時的な怪我
スマートウォッチやスマートテレビなど、画面が小さいデバイスを使用している人

POURの原則

POURの原則は、アクセス可能なWebサイトの構築をガイドするものです。この原則は、人々をプロセスの中心に置くのに役立ちます。すべてのWebサイトは、次の原則を満たす必要があります。

知覚可能：Web上のコンテンツは知覚可能である必要があります。つまり、Webは、ブラウザーを介して、またはスクリーンリーダー、画面引伸機などの支援技術を介して、感覚（視覚、触覚、聴覚）で利用できる必要があります。
操作可能：Web上のコンテンツは操作可能である必要があります。これは、ユーザーがマウス、キーボード、または支援機器のいずれかを使用して、すべてのコントロールとインタラクティブ要素を操作できることを意味します。コンテンツをナビゲートできない場合は、アクセスできません。
理解できる：ウェブ上のコンテンツは、明確で簡潔で、理解しやすいものでなければなりません。スペルミスや複雑な文法をできるだけ減らすようにしてください。これは、Web開発者として、ユーザーの知識を想定してはならないためです。
堅牢：Web全体で一貫性を保つことが非常に重要です。これは、構築しているツールとの互換性を最大化することを意味しますか？あなたのサイトは、ブラウザ、オペレーティングシステム、デバイスサイズなど、すべてのプラットフォームで同じように機能しますか？

Web上でサイトにアクセスできるようにするためのヒント

Webサイトを構築するときに、通常のルーチンにアクセシビリティを組み込むのに役立つ方法はいくつかあります。これらのヒントのほとんどは、Webサイトの全体的なルックアンドフィールに影響を与えることなく実装できます。

画像の代替テキストを追加する：ウェブサイトで画像を使用する場合、人々が見逃している重要なことの1つは、 alt="" 画像への属性。アクセス可能な画像タグの例を次に示します。

<img src="./cat.png' alt="A cat sitting on a chair">

すべての画像にalt属性がある場合と含まれていない場合の大きな違いは、スクリーンリーダーが視覚障害および認知障害のある人のaltタグをアナウンスできることです。重要なガイドラインの1つは、代替の説明が適切であることを確認することです。つまり、実際の画像の内容と意図を説明する必要があります。上記の例では、 A cat sitting on a chair だけでなく、画像のコンテンツ全体を説明します cat 説明については。

セマンティックHTMLを利用する：これは、多くの開発者が見落としているもう1つの重要なルールです。ほとんどの開発者は div すべてを表し、見出し、リスト、および表の適切なタグを忘れます。 HTML5は、次のような追加の要素を提供します <nav> , <section> と <aside>、コンテンツをより適切に構成するため。これは、セマンティックHTMLを使用した適切に構造化されたページの例です。

<body>
  <header>
    <h1>Shop</h1>
  </header>
  <main>
    <article>
      <h2>An inside look at the new Shop v2</h2>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
  </main>
  <footer>
    <p>© Shop Inc.</p>
  </footer>
</body>

メインコンテンツをスキップするオプションを常に提供する：スクリーンリーダーとキーボードに依存しているユーザーにとって、この機能はメインコンテンツにスキップするオプションを提供するため、非常に重要です。これを実現するための手法は、メインコンテンツにスキップするリンクを追加し、要素がキーボードフォーカスを取得するまでそれを非表示にすることです。この例は、BBC.comの公式ウェブサイトです。キーボードを使用してナビゲートする場合、キーボードがその要素に焦点を合わせて表示されているときに、メインコンテンツにスキップするオプションが提供されます。
ページの言語と言語の変更を特定する：常に、を使用してすべてのページの第一言語を示すことを忘れないでください lang の属性 HTML 鬼ごっこ。例えば、 <html lang="en">. 使用 lang 要素の言語がページの他の部分と異なる場合の特定の要素の属性。

<html lang="en">
<head>
  ...
</head>
<body>...</body>
</html>

ラベルをすべてのフォーム要素に関連付けます。可能な場合は常に、 label テキストをフォーム要素に明示的に関連付ける要素。 The for ラベルの属性は、 id フォームコントロールの。特定の状況では、非表示にすることが許容される場合があります <label> 要素は視覚的に表示されますが、ほとんどの場合、すべての読者が必要な入力を理解できるようにラベルが必要です。

<form>
  <label for="username">Username</label>
  <input type="text" name="username" id="username">
  <label for="email">Email</label>
  <input type="email" name="email" id="email">
</form>

アクセス可能なサイトを構築する際に活用するツール

アクセス可能なサイトの構築に役立つツールは無数にあります。サイトをよりアクセスしやすくし、a11y全般について詳しく知るために使用できるいくつかの例を次に示します。

コンパイルされたWebアクセシビリティ評価ツールリスト、およびその他の一般的なリソースから、活用できるその他のツールを見つけることができます。

結論

この記事では、Webアクセシビリティとは何か、そしてさまざまな能力を持つユーザーがアクセシブルなWebサイトを使用することの意味について学びました。また、すべてのユーザーがサイトにアクセスできるようにするために使用できるさまざまな方法についても学びました。最後に、アクセス可能なHTMLの例を調べて、このチュートリアルの各提案を実装する方法を理解しました。