|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "e4cd5b1faed4adab5acf720f82798003",
|
|
|
"translation_date": "2025-08-23T23:24:56+00:00",
|
|
|
"source_file": "1-getting-started-lessons/3-accessibility/README.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# アクセシブルなウェブページの作成
|
|
|
|
|
|
|
|
|
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
## 講義前のクイズ
|
|
|
[講義前のクイズ](https://ff-quizzes.netlify.app/web/quiz/5)
|
|
|
|
|
|
> ウェブの力はその普遍性にあります。障害の有無にかかわらず、誰もがアクセスできることが重要です。
|
|
|
>
|
|
|
> \- 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には[Zoom](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)
|
|
|
|
|
|
すべてのアクセシブルなサイト作成の側面をカバーすることはできませんが、以下は実装したい重要な原則の一部です。最初からアクセシブルなページを設計することは、既存のページを後からアクセシブルにするよりも**常に**簡単です。
|
|
|
|
|
|
## 良い表示の原則
|
|
|
|
|
|
### 色の安全なパレット
|
|
|
|
|
|
人々は世界をさまざまな方法で見ていますが、これには色も含まれます。サイトのカラースキームを選択する際には、すべての人にとってアクセシブルであることを確認する必要があります。優れた[カラーパレット生成ツールは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://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) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は一切の責任を負いません。 |
