<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "f0c88c3e2cefa8952d356f802b1e47ca",
  "translation_date": "2025-08-29T09:39:38+00:00",
  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
  "language_code": "ja"
}
-->
# アクセシブルなウェブページの作成

![アクセシビリティについて](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ja.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)

## 講義前のクイズ
[講義前のクイズ](https://ff-quizzes.netlify.app/web/)

> ウェブの力はその普遍性にあります。障害の有無にかかわらず、誰もがアクセスできることが重要です。
>
> \- Sir Timothy Berners-Lee, W3Cディレクター、ワールドワイドウェブの発明者

この引用は、アクセシブルなウェブサイトを作成する重要性を完璧に強調しています。すべての人がアクセスできないアプリケーションは、定義上排他的です。ウェブ開発者として、常にアクセシビリティを念頭に置くべきです。最初からこの点に焦点を当てることで、作成するページがすべての人にアクセス可能であることを確保する道を進むことができます。このレッスンでは、ウェブ資産がアクセシブルであることを確保するためのツールと、アクセシビリティを考慮した構築方法について学びます。

> このレッスンは[Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)で受講できます！

## 使用するツール

### スクリーンリーダー

最もよく知られているアクセシビリティツールの1つがスクリーンリーダーです。

[スクリーンリーダー](https://en.wikipedia.org/wiki/Screen_reader)は、視覚障害のある人々がよく使用するクライアントです。ブラウザが共有したい情報を適切に伝えるようにするのと同様に、スクリーンリーダーが同じ情報を正しく伝えるようにする必要があります。

基本的には、スクリーンリーダーはページを上から下まで音声で読み上げます。ページがすべてテキストで構成されている場合、リーダーはブラウザと同様に情報を伝えます。しかし、ウェブページは純粋にテキストだけで構成されることはほとんどなく、リンク、グラフィック、色、その他の視覚的要素が含まれます。これらの情報がスクリーンリーダーによって正しく読み取られるように注意を払う必要があります。

すべてのウェブ開発者はスクリーンリーダーに慣れるべきです。上記で強調したように、それはユーザーが利用するクライアントです。ブラウザの操作方法に精通しているのと同じように、スクリーンリーダーの操作方法を学ぶべきです。幸いなことに、ほとんどのオペレーティングシステムにはスクリーンリーダーが組み込まれています。

一部のブラウザには、テキストを音声で読み上げたり、基本的なナビゲーション機能を提供するアクセシビリティツールが組み込まれている場合があります。例えば、[Edgeブラウザのアクセシビリティツール](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)などです。これらも重要なアクセシビリティツールですが、スクリーンリーダーとは異なる機能を持ち、スクリーンリーダーのテストツールとして誤解してはいけません。

✅ スクリーンリーダーとブラウザのテキストリーダーを試してみましょう。Windowsでは[ナレーター](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon)がデフォルトで含まれており、[JAWS](https://webaim.org/articles/jaws/)や[NVDA](https://www.nvaccess.org/about-nvda/)もインストール可能です。macOSやiOSでは[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10)がデフォルトでインストールされています。

### ズーム

視覚障害のある人々がよく使用するもう1つのツールがズーム機能です。最も基本的なズームは静的ズームで、`Control + プラス記号 (+)`や画面解像度を下げることで制御されます。このタイプのズームはページ全体をリサイズするため、[レスポンシブデザイン](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design)を使用して、ズームレベルが高くても良好なユーザー体験を提供することが重要です。

もう1つのタイプのズームは、画面の特定の領域を拡大してパンする特殊なソフトウェアを使用します。これは実際の拡大鏡を使用するようなものです。Windowsでは[拡大鏡](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198)が組み込まれており、[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)はより多くの機能を持つサードパーティ製の拡大ソフトウェアです。macOSとiOSには[ズーム](https://www.apple.com/accessibility/mac/vision/)という組み込みの拡大ソフトウェアがあります。

### コントラストチェッカー

ウェブサイトの色は、色覚異常のユーザーや低コントラストの色を見るのが難しい人々のニーズに応えるよう慎重に選ぶ必要があります。

✅ お気に入りのウェブサイトをブラウザ拡張機能でテストして、色の使用方法を確認してみましょう。例えば[WCAGのコントラストチェッカー](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon)などです。何が学べますか？

### Lighthouse

ブラウザの開発者ツールエリアにはLighthouseツールがあります。このツールは、ウェブサイトのアクセシビリティ（およびその他の分析）を初めて確認するために重要です。Lighthouseだけに頼るべきではありませんが、100%のスコアは基準として非常に役立ちます。

✅ ブラウザの開発者ツールパネルでLighthouseを見つけ、任意のサイトを分析してみましょう。何がわかりますか？

## アクセシビリティを考慮したデザイン

アクセシビリティは比較的大きなトピックです。役立つリソースが多数あります。

- [Accessible U - ミネソタ大学](https://accessibility.umn.edu/your-role/web-developers)

すべてのアクセシブルなサイト作成の側面をカバーすることはできませんが、以下は実装したい主要な原則です。最初からアクセシブルなページを設計する方が、既存のページを後からアクセシブルにするよりも**常に**簡単です。

## 良い表示の原則

### 色の安全なパレット

人々は世界をさまざまな方法で見ていますが、これには色も含まれます。サイトのカラースキームを選択する際には、すべての人にとってアクセシブルであることを確認する必要があります。素晴らしい[カラーパレット生成ツールの1つがColor Safe](http://colorsafe.co/)です。

✅ 色の使用が非常に問題のあるウェブサイトを特定してください。なぜ問題なのでしょうか？

### 正しいHTMLを使用する

CSSやJavaScriptを使用すると、任意の要素を任意のタイプのコントロールのように見せることができます。例えば、`<span>`を使用して`<button>`を作成したり、`<b>`を使用してハイパーリンクを作成することができます。しかし、これではスクリーンリーダーに何も伝えません。ページ上のコントロールを作成する際には適切なHTMLを使用してください。ハイパーリンクを作成したい場合は`<a>`を使用してください。適切なHTMLを使用することは、セマンティックHTMLを活用することと呼ばれます。

✅ 任意のウェブサイトにアクセスして、デザイナーや開発者がHTMLを正しく使用しているか確認してください。リンクであるべきボタンを見つけることができますか？ヒント: ブラウザで右クリックして「ページソースを表示」を選択し、基礎となるコードを確認してください。

### 説明的な見出し階層を作成する

スクリーンリーダーのユーザーは[見出しに大きく依存](https://webaim.org/projects/screenreadersurvey8/#finding)して情報を見つけたりページをナビゲートします。説明的な見出しコンテンツを作成し、セマンティックな見出しタグを使用することは、スクリーンリーダーのユーザーにとって簡単にナビゲートできるサイトを作成するために重要です。

### 良い視覚的手がかりを使用する

CSSはページ上の任意の要素の外観を完全に制御します。アウトラインのないテキストボックスや下線のないハイパーリンクを作成することができます。しかし、これらの手がかりを削除すると、それに依存する人々がコントロールの種類を認識するのが難しくなる可能性があります。

## リンクテキストの重要性

ハイパーリンクはウェブをナビゲートするための中心的な要素です。そのため、スクリーンリーダーがリンクを適切に読み取れるようにすることで、すべてのユーザーがサイトをナビゲートできるようになります。

### スクリーンリーダーとリンク

予想通り、スクリーンリーダーはリンクテキストをページ上の他のテキストと同じように読み取ります。この点を考慮すると、以下のようなテキストは完全に許容されるように感じるかもしれません。

> リトルペンギンは、フェアリーペンギンとも呼ばれ、世界で最も小さいペンギンです。[こちらをクリック](https://en.wikipedia.org/wiki/Little_penguin)して詳細をご覧ください。

> リトルペンギンは、フェアリーペンギンとも呼ばれ、世界で最も小さいペンギンです。詳細についてはhttps://en.wikipedia.org/wiki/Little_penguinをご覧ください。

> **NOTE** 以下で説明するように、上記のようなリンクを作成しては**いけません**。

スクリーンリーダーはブラウザとは異なるインターフェースであり、異なる機能セットを持っています。

### URLを使用する問題点

スクリーンリーダーはテキストを読み取ります。テキストにURLが含まれている場合、スクリーンリーダーはURLを読み上げます。一般的に、URLは意味のある情報を伝えず、煩わしく聞こえることがあります。携帯電話がテキストメッセージ内のURLを音声で読み上げた経験があるかもしれません。

### 「こちらをクリック」の問題点

スクリーンリーダーはページ上のハイパーリンクだけを読み取る機能も持っています。視覚的なユーザーがページをスキャンしてリンクを探すのと同じようにです。リンクテキストがすべて「こちらをクリック」である場合、ユーザーは「こちらをクリック、こちらをクリック、こちらをクリック、こちらをクリック、こちらをクリック...」としか聞こえません。すべてのリンクが区別できなくなります。

### 良いリンクテキスト

良いリンクテキストは、リンク先の内容を簡潔に説明します。上記のリトルペンギンについての例では、リンク先はその種に関するWikipediaページです。「リトルペンギン」というフレーズは、リンク先で何を学べるかを明確に示しているため、完璧なリンクテキストになります。

> リトルペンギンは、フェアリーペンギンとも呼ばれ、世界で最も小さいペンギンです。[リトルペンギン](https://en.wikipedia.org/wiki/Little_penguin)についてさらに詳しく知る。

✅ 数分間ウェブを閲覧して、曖昧なリンク戦略を使用しているページを見つけてみましょう。それらをより良いリンクを使用しているサイトと比較してください。何が学べますか？

#### 検索エンジンに関する注意点

すべての人にとってアクセシブルなサイトを確保することで、検索エンジンがサイトをナビゲートするのにも役立ちます。検索エンジンはリンクテキストを使用してページのトピックを学びます。そのため、良いリンクテキストを使用することはすべての人に役立ちます！

### ARIA

以下のようなページを想像してください：

| 商品          | 説明              | 注文          |
| ------------ | ------------------ | ------------ |
| Widget       | [説明](../../../../1-getting-started-lessons/3-accessibility/')       | [注文](../../../../1-getting-started-lessons/3-accessibility/')  |
| Super widget | [説明](../../../../1-getting-started-lessons/3-accessibility/')       | [注文](../../../../1-getting-started-lessons/3-accessibility/')  |

この例では、ブラウザを使用する人にとっては説明と注文のテキストを重複させることが理にかなっています。しかし、スクリーンリーダーを使用する人にとっては、*説明*と*注文*という言葉が文脈なしで繰り返されるだけです。

このようなシナリオをサポートするために、HTMLは[アクセシブルリッチインターネットアプリケーション (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)と呼ばれる属性セットをサポートしています。これらの属性を使用すると、スクリーンリーダーに追加情報を提供できます。

> **NOTE**: HTMLの多くの側面と同様に、ブラウザやスクリーンリーダーのサポートは異なる場合があります。ただし、主要なクライアントのほとんどはARIA属性をサポートしています。

`aria-label`を使用して、ページの形式が許さない場合にリンクを説明することができます。Widgetの説明は以下のように設定できます：

``` html
<a href="#" aria-label="Widget description">description</a>
```

✅ 一般的に、上記で説明したセマンティックマークアップを使用することはARIAの使用に優先しますが、HTMLウィジェットにセマンティックな同等物がない場合があります。良い例はツリーです。ツリーにはHTMLの同等物がないため、この要素の汎用的な`<div>`を適切な役割とARIA値で識別します。[MDNのARIAに関するドキュメント](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)にはさらに役立つ情報が含まれています。

```html
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
```

## 画像

スクリーンリーダーが画像の内容を自動的に読み取ることはできないことは言うまでもありません。画像をアクセシブルにすることはそれほど手間がかかりません。それが`alt`属性の目的です。すべての意味のある画像には、それが何であるかを説明する`alt`を設定する必要があります。
純粋に装飾的な画像の場合、`alt`属性を空の文字列に設定します：`alt=""`。これにより、スクリーンリーダーが装飾的な画像を不必要に読み上げることを防ぎます。

✅ 予想通り、検索エンジンも画像の内容を理解することはできません。検索エンジンもaltテキストを使用します。そのため、ページがアクセシブルであることを確保することで追加のメリットが得られます！

## キーボード

一部のユーザーはマウスやトラックパッドを使用できず、代わりにキーボード操作に頼ってタブキーで要素を移動します。キーボードユーザーがドキュメントを下に移動する際に各インタラクティブ要素にアクセスできるよう、ウェブサイトのコンテンツを論理的な順序で提示することが重要です。セマンティックマークアップを使用してウェブページを構築し、CSSを使用して視覚的なレイアウトをスタイル設定すれば、サイトはキーボードでナビゲート可能になりますが、この側面を手動でテストすることが重要です。[キーボードナビゲーション戦略](https
多くの政府はアクセシビリティ要件に関する法律を制定しています。自国のアクセシビリティに関する法律について調べてみましょう。どのような内容が含まれていて、どのような内容が含まれていないのかを確認してください。例えば、[この政府のウェブサイト](https://accessibility.blog.gov.uk/)があります。

## 課題

[アクセシビリティが低いウェブサイトを分析する](assignment.md)

クレジット: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument

---

**免責事項**:  
この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な表現が含まれる可能性があります。元の言語で記載された原文が正式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の利用に起因する誤解や誤認について、当社は一切の責任を負いません。