【レッスン３】Web-Dev-For-Beginners：アクセシビリティの基本 – アクセシブルなWebページの作成

3.はじめに Getting Started：Web Development for Beginners

2020年11月にMicrosoftのGitHubアカウントで公開された、HTML・CSS・JavaScriptなどが学べるWeb開発（ウェブ開発・ウェブ制作）入門者向けのチュートリアル

GitHub – microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
：microsoft/Web-Dev-For-Beginners（MIT Licence）| GitHub

の以下のページ

：Web-Dev-For-Beginners/1-getting-started-lessons/3-accessibility/（MIT Licence）| GitHub

の一部を、日々の学習を兼ねて日本語訳しておきます。

自分と同じように、これからWeb開発・Webプログラミングなどを学び始めたい方の何かしらの参考になることがありましたら幸いです。

尚、最終的な内容の詳細は、公式サイトでご自身でよくご確認いただくようお願いいたします。

誰にとっても親切なサイトを構築するための、アクセシブルなWebページについて学びます。

アクセシブルなWebページの作成：Creating Accessible Webpages

Webの力は、その普遍性（誰もが使えること）にあります。機能障害の有無に関わらず、誰もがアクセスできることがWebの本質なのです。

– Sir Timothy Berners-Lee（ティモシー・バーナーズ=リー氏：ティム・バーナーズ=リー氏）, W3C 理事、World Wide Webの発明者

この引用は、アクセシブルな Webサイトを作成することの重要性を強調しています。

万人がアクセスできないアプリケーションというものは、定義上は、除外されます。Web開発者として、私達は常にアクセシビリティを念頭に置くべきです。始めから上記のことに焦点を当てることで、あなたが作成したページに誰もがアクセスできるようにすることができるようになります。

今回のレッスンでは、Webアセット（Webデータ資産）がアクセシブルであることを確実にするのに役立つツールとや、アクセシビリティを念頭に置いてWebページを作成する方法についてを学びます。

レクチャー前のクイズ：Pre-Lecture Quiz

初学者のためのWeb開発：クイズ

レッスン3-アクセシブルなWebページの作成：レクチャー前のクイズ

問題1.アクセシブルなWebサイトかどうかを確認するブラウザツールはどれ？

・Lighthouse
・Deckhouse
・Cleanhouse

問題2. 視覚機能障害者のアクセシビリティをテストするには、スクリーンリーダーの物理的な器具が必要です。

・はい：true
・いいえ：false

問題3.アクセシビリティが重要なのは、政府機関のWebサイトだけです。

・はい：true
・いいえ：false

【答え】

問題1 → Lighthouse

問題2 → いいえ：false

問題3 → いいえ：false

使用するツール：Tools to use

スクリーンリーダー：Screen readers

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

スクリーンリーダー（Screen readers| Wikipedia – スクリーンリーダー | Wikipedia）は、視覚障害のある方が一般的に使用します。ブラウザでは、私達がシェアしたい情報を適切に伝えられるので、私達はスクリーンリーダーでもブラウザと同じように適切に情報を伝えられるようにしなければいけません。

スクリーンリーダーの機能の基本は、ページを上から下まで順番に音声を読み上げることです。あなたのページが全てテキストである場合には、スクリーンリーダーはブラウザと同様の方法で情報を伝えられます。もちろん、Webページが純粋なテキストであることはほとんどなく、リンク、画像、カラー、その他の視覚的な要素が含まれます。これらの情報がスクリーンリーダーに正しく読み上げられるように注意を払わなければなりません。

全てのWeb開発者は、スクリーンリーダーに慣れる必要があります。先程強調したように、スクリーンリーダーをサイトの訪問者が利用するでしょう。ブラウザの操作方法を熟知しているのと同じように、スクリーンリーダーの操作方法についても学ぶべきです。幸いに、スクリーンリーダーはほとんどのオペレーティングシステムに組み込まれています。

ブラウザの中には、テキストを音読したり基本的なナビゲーション機能を提供したりするツールや拡張機能もあります：Edgeブラウザツール（Accessibility features in Microsoft Edge | Microsoft Suporrt – Microsoft Edgeのアクセシビリティ機能 | Microsoftサポート）のようにアクセシビリティに焦点を当てた機能です。

これらも重要なアクセシビリティツールですが、スクリーンリーダーとは機能が大きく異なるので、スクリーンリーダーのテストツールと勘違いしてはいけません。

✅ スクリーンリーダーやブラウザのテキストリーダーを試そう。
Windowsではデフォルトでナレーター（ナレーターの詳細なガイド | Microsoftサポート）が搭載されており、JAWS（Using JAWS to Evaluate Web Accessibility | WebAIM）やNVDA（NonVisual Desktop Access | NV Access）もインストールできます。macOSとiOSでは、VoiceOver（VoiceOverユーザガイド | Appleサポート）がデフォルトでインストールされています。

拡大機能：Zoom

視覚機能障害のある人がよく使うもう一つのツールは、拡大機能です。拡大機能の最も基本的なタイプは静的拡大で、「コントロールキー + プラス記号（+）のキー」のキー入力（ショートカットキー・コンビネーションキー入力を）をするか、画面の解像度を下げることで設定します。このタイプの拡大機能ではページ全体のサイズが変更されるため、レスポンシブデザイン（レスポンシブデザイン | MDN Web Docs）を使用することは、拡大レベルを上げた際の良いユーザー体験を提供するために重要です。

もう一つのタイプの拡大は、特殊なソフトウェアを使用して、実際の虫眼鏡を使用するのと同じように、画面の特定の領域を拡大・パン（移動）することを目的としています。
Windowsには、拡大鏡（拡大ツール：画面上の項目を見やすくするために、拡大鏡を使用する | Microsoftサポート）が搭載されており、ZoomText（Windows画面拡大ソフト ズームテキスト：Getting Started with ZoomText | Freedom Scientific）は、より多くの機能を持ち、よりユーザーベースのサードパーティ（第三者機関：Microsoft製ではない会社）の拡大表示ソフトウェアです。
macOSとiOSの両方には、「ズーム機能」（Accessibility “Vision” | Apple Suporrt – アクセシビリティ「視覚」| Appleサポート）と呼ばれる拡大表示機能があります。

コントラストチェッカー：Contrast checkers

Webサイトの色は、色覚障害者（色盲）やコントラストの低い色が見えにくい方のニーズに応えるために、慎重に選ぶ必要があります。

✅ WCAGのカラーチェッカー（WCAG Color contrast checker | Microsft Edgeアドオン）などのブラウザ拡張機能を使って、色使いを楽しむWebサイトをテストしよう。何を学びましたか？

Lighthouse

ブラウザの開発者ツールエリアには、Lighthouseツールがあります。
このツールは、Webサイトのアクセシビリティ (他の分析と同様に) を最初に検証するために重要です。
Lighthouseだけに頼らないことが重要ですが、100%のスコアは1つの基準として非常に役に立ちます。

✅ ブラウザの開発者ツールパネルでLighthouseを見つけて、サイトを分析してみよう。何か発見できましたか？

アクセシビリティを考慮した設計：Designing for accessibility

アクセシビリティは比較的大きなトピック（テーマ）です。あなたを助けるために、多くのリソースが用意されています。

・Accessible U – University of Minnesota

アクセシブルなサイトを作成するためのすべての側面をカバーすることはで難しいですが、以下に、あなたが実施したいアクセシブルなWebページの原則をまとめておきます。

アクセシブルなページを最初からデザインすることは、既存のページをアクセシブルに修正すよりも簡単ですよ。

良いディスプレイ（表示）の原則：Good display principles

カラーセーフパレット：Color safe palettes

人は多種多様な方法で世界を見ていますが、これには色も含まれます。
サイトの配色を選択する際には、誰もがアクセスできるようにする必要があります。カラーパレットを生成するための素晴らしいツールの1つがColor Safe（COLOR SAFE）です。

✅ 色の使用に問題のあるWebサイトを特定してください。それは、なぜですか？

正しいHTMLを使用する：Use the correct HTML

CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）とJavaScriptを使えば、コントロールタイプのような要素にすることができます。

「<span>」を使って「<button>」を作成したり、「<b>」をハイパーリンクにしたりすることができます。これはスタイルを整えるのが簡単と思われるかもしれませんがで、実はスクリーンリーダーには何も伝わっていません。

ページ上でコントロールを作成する際には、適切なHTML（HyperText Markup Language：ハイパーテキス・マークアップ・ランゲージ）を使用してください。ハイパーリンクが必要な場合は、「<a>」を使用します。適切なコントロールに適切なHTMLを使うことをセマンティックHTMLの利用といいます。

✅ Webサイトに行って、デザイナーや開発者がHTMLを適切に使用しているかどうかを確認してください。
リンクになるはずのボタン要素を見つけることができますか？

ヒント: 右クリックして、ブラウザで「ページのソースを表示：View Page Source」を選択して、Webサイトのページのコードを見てみましょう。

記述的な見出しの階層を作成する：Create a descriptive heading hierarchy

スクリーンリーダーを使う方は、情報を見つけたり、ページを移動する際に、見出しを活用します（Finding Information | WebAIM）。記述的な見出しのコンテンツを書いたり、セマンティックな（意味のある）見出しタグを使用することは、スクリーンリーダーを使う方がページ移動しやすいサイトを作るために重要です。

視覚的な手がかりを上手く使う：Use good visual clues

CSSは、ページ上のあらゆる要素の外観を設定することができます。アウトラインのないテキストボックスやアンダーラインのないハイパーリンクを作成することができます。残念ながら、それらの手がかりを削除すると、それらに依存している人がコントロールタイプを認識することが難しくなります。（どのような挙動をするか認識できなくなります。）

テキストリンクの重要性：The importance of link text

ハイパーリンクは、Webを移動するための核となるものです。
結果的に、スクリーンリーダーがリンクを適切に読めるようにすることで、すべての方がサイトを移動できるようになります。

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

既にお分かりの通り、スクリーンリーダーはテキストリンクをページ上の他のテキストと同じように読みます。
この点を考慮すると、以下に示すテキストのテキストリンクはOKだと感じるかもしれません。

妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。詳しくはこちらをご覧ください。

妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。詳しくは https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3 をご覧ください。

メモ：今まさに読んだ、上記のようなテキストリンクは絶対に作ってはいけません。

スクリーンリーダーは、ブラウザとは異なる機能を持つ、別のもの（インターフェイス）であることを記憶に留めておいてください。

URLを使用する場合の問題点：The problem with using the URL

スクリーンリーダーはテキストを読みます。
本文中にURLが表示されていると、スクリーンリーダーはそのURLを読みます。一般的に言うと、URLは意味のある情報を伝えず、迷惑に聞こえるかもしれません。あなたの携帯電話が、URL付きのテキストメッセージを音声で読んだことがある方は、このような経験をしたことがあるかもしれませんね。

“こちらをクリック” の問題点：The problem with “click here”

スクリーンリーダーは、目の不自由な方がページを見渡してリンクを探すのと同じように、ページ上のハイパーリンクだけを読み上げる機能も持っています。テキストリンクが常に

「ここをクリックしてください」

となっている場合、ハイパーリンを読み上げる機能を使っている方は

「ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください…」

としか聞こえません。
もはや、リンクの区別がつかなくなりますね…

良いテキストリンク

良いテキストリンクは、リンクの向こう側に何があるのかを端的に説明します。
先程の例では、コガタペンギンについて話していますが、リンク先はその種についてのWikipediaのページになっています。コガタペンギンという言葉は、リンクをクリックした場合に何を学ぶのかが明確になるので、完璧なテキストリンクになります。

妖精ペンギンとして知られることもあるコガタペンギンは、世界最小のペンギンです。

✅ 数分間ネットサーフィン（Webサイトの閲覧）をして、曖昧なリンク戦略を使用しているページを見つけましょう。他の、より良いリンクが貼られているサイトと比較してみてください。
あなたは何を学びますか？

子供プログラマーによる補足：

このページの始めのあたりでは、英語ページへのリンク以外にも、日本語ページへのリンクもつけたかったので、「良いテキストリンク」のお手本通りにはやっていません・・・
その他にも、リンク先のサイト名を把握しやすいように、サイト名もつけています…
どこのサイトに飛ばされるのか？心配ですよね・・・

検索エンジンの注意事項：Search engine notes

あなたのサイトが誰でもアクセスできるようにすることで、検索エンジンがあなたのサイトを移動するのにも役立ちます。
検索エンジンは、ページのトピックを学習するためにテキストリンクを使用します。そのため、良いテキストリンクを使用することは皆んなに役立つのです！

アリア：ARIA（Accessible Rich Internet Applications）

次のページを想像してみてください。

＊「Description」「Order」がテキストリンクになっていると仮定してみてください。

上記の例では、「description」と「order」のテキストを複製しても、ブラウザを使っている人にとっては意味があります。しかし、スクリーンリーダーを使っている人には、文脈なしに繰り返される「description」と「order」という単語しか聞こえません…

このようなタイプの状況をサポートするために、HTMLはアクセシブル・リッチ・インターネット・アプリケーション （ARIA）として知られている一連の属性をサポートしています。これらの属性により、スクリーンリーダーに追加の情報を教えることができます。

メモ：HTMLの多くの側面と同様に、ブラウザやスクリーンリーダーのサポートは異なるかもしれません。しかし、ほとんどのメインラインの（主要な）クライアント（Webブラウザ）は、「ARIA属性」をサポートしています。

ページのフォーマットでリンクを記述できない場合、「aria-label」を使ってリンクを記述することができます。ウィジェットの説明は

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

上記のように記述します。

✅ 一般的には、上記のようにセマンティックマークアップを使用することで「ARIA」の使用が優先されますが、様々なHTMLウィジェットにはセマンティックに相当するものが存在しないことがあります。良い例がツリー（木構造のツリーブラウザ）です。ツリーにはHTMLと同等のものがないので、適切な「role属性」と「ARIA属性」の値でこの要素の一般的な「<div>」を識別します。「ARIA」に関するMDNのドキュメントには、より有用な情報が含まれています。

<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>

画像：Images

言うまでもなく、スクリーンリーダーは画像の中にあるものを自動的に読み取ることができません。画像にアクセスできるようにする方法は、それほど手間がかかりません – それが「alt属性」のすべてです。
意味のある画像はすべて、その画像が何であるかを説明するための「alt」を持つべきです。

純粋に装飾的な画像は「alt属性」に空の文字列を設定しなければなりません：「alt=""」。
これにより、スクリーンリーダが装飾的な画像を不必要に知らせることを防ぐことができます。

✅ お察しの通り、検索エンジンも画像の中身を理解することができません。検索エンジンもまた、画像を理解するために「alt」を使用しています。
もう一度言いますが、Webページに掲載している画像の「alt属性」に適切な説明を入れることは、検索エンジンに対して、作成したWebページに追加のボーナスを提供することになります！

キーボード：The keyboard

マウスやトラックパッドを使用できない方の中には、タブ間を移動するためにキーボードを使う方もいます。
キーボードを使用する方が文書の下に移動しながら各インタラクティブ要素にアクセスできるように、Webサイトのコンテンツを論理的な順序で表示することが重要です。Webページをセマンティックマークアップで構築し、CSSを使用して視覚的なレイアウトをスタイル化している場合、サイトはキーボードナビゲーションが可能なはずですが、これを手動でテストすることが重要です。

キーボードナビゲーション戦略の詳細については、Keyboard Accessibility | WebAIMを確認ください。

✅ Webサイトにアクセスして、キーボードだけを使って移動してみてください。
何がうまくいき、何がうまくいかないでしょうか？それは、なぜでしょうか？

まとめ：Summary

一部の人がアクセスできるWebは、本当の意味での

「ワールド・ワイド・ウェブ」（world-wide web）

ではありません。

作成するサイトがアクセシブルであることを保証する最善の方法は、アクセシビリティのベストプラクティス（最善の手法）を最初から取り入れることです。

ただ表示させるだけのWebページを作成するのに比べると、余分な手順は必要ですが、今回のレッスンの技術をワークフロー（Webサイト作成業務の流れ）に組み込むことで、作成する全てのページがアクセシブルになることを意味します。

チャレンジ：Challenge

以下のHTMLを使い、今回学んだWebアクセシビリティ戦略を踏まえて、できるだけアクセスしやすいように書き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <title>
      Example
    </title>
    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="site-header">
      <p class="site-title">Turtle Ipsum</p>
      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
    </div>
    <div class="main-nav">
      <p class="nav-header">Resources</p>
      <div class="nav-list">
        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
      </div>
    </div>
    <div class="main-content">
      <div>
        <p class="page-title">Welcome to Turtle Ipsum. 
            <a href="">Click here</a> to learn more.
        </p>
        <p class="article-text">
          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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>
      </div>
    </div>
    <div class="footer">
      <div class="footer-section">
        <span class="button">Sign up for turtle news</span>
      </div><div class="footer-section">
        <p class="nav-header footer-title">
          Internal Pages
        </p>
        <div class="nav-list">
          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
        </div>
      </div>
      <p class="footer-copyright">© 2016 Instrument</span>
    </div>
  </body>
</html>

子供プログラマーによる補足：

HTMLについて、何も学んだことがない方にとっては、いきなり難問ですね・・・
事前にHTMLの各種要素や、基本的な定型分を学んだ上で実施するといいかも知れませんね。

パソコンでHTMLの編集を行う場合には、何かしらのテキストエディタが必要になります。

例.
Windows
：サクラエディタ（インターネット上で無料ダウンロード）
：Visual Studio Code（インターネット上で無料ダウンロード）
：メモ帳（Windows標準アプリ）

Mac
：CotEditor（App Storeで無料ダウンロード）
：Visual Studio Code（インターネット上で無料ダウンロード）
：テキストエディット（Mac標準アプリ）

CotEditorの場合は、上記のコードをコピー&ペーストして、「index.html」のようなWebページ形式（.html）のファイル名にして保存後に、ファイルをダブルクリックするとローカル環境（自分のパソコン環境）でWebページを開くことができます。基本的には他のテキストエディタでも同じです。

Visual Studio Codeで新規のWebページ形式（.html）ファイルを作るには、起動後に上部メニューの

・「ファイル – 新規ファイル」（「File – New File」）

でファイルを作成後に上記のコードをコピー&ペーストして、「index.html」のようなWebページ形式（.html）のファイル名にして保存後に、ファイルをダブルクリックするとローカル環境（自分のパソコン環境）でWebページを開くことができます。
開くブラウザを指定したい場合は、ファイルを右クリック後に表示される項目で

・「このアプリケーションで開く」

で任意のブラウザを指定できます。Safariのブラウザで「Tabキー」の挙動を確認したところ、リンク間を移動できませんでしたが、Google Chromeのブラウザでは、テキストリンク間の選択ができるようでした。

レクチャー後のクイズ：Post-Lecture Quiz

初学者のためのWeb開発：クイズ

レッスン3-アクセシブルなWebページの作成：レクチャー後のクイズ

問題1.Lighthouse はアクセシビリティの問題をチェックするだけです。

・はい：true
・いいえ：false

問題2.カラーセーフパレットが役立つのは？

・色覚異常（色盲）：color-blindness
・視覚機能障害：visual impairments
・上記の両者にとっても役立つ：both th above

問題3.記述的なリンクは、アクセシブルなWebサイトにとって重要です。

・はい：true
・いいえ：false

【答え】

問題1 → いいえ：false

問題2 → 上記の両者にとっても役立つ：both th above

問題3 → はい：true

復習・自己学習：Review & Self Study

多くの政府には、アクセシビリティの要件に関する法律があります。あなたの国のアクセシビリティに関する法律をお読みください。
何が適用され、何が適用されないのか？例としては、この政府のWebサイト（Accessibility in government Organisations | GOV.UK）があります。

課題：Assignment

アクセシブルではないWebサイトの分析をする（Analyze a non-accessible web site | GitHub）

クレジット：Credits
Turtle Ipsum by Instrument（Instrument/semantic-html-sample | GitHub）

指示：Instructions

あなたがアクセシブルではないと思うWebサイトを特定し、そのアクセシビリティを改善するためのアクションプランを作成してください。
あなたの最初のタスクは、上述のサイトを特定し、分析ツールを使用せずにアクセシブルではないと思う理由を詳細に説明してください。その後、Lighthouse分析にかけてください。分析結果をもとに、最低10点の詳細なサイトの改善計画を作成してください。

ルーブリック（目標達成度の評価）：Rubric

・評価方法：Criteria
提出レポートの内容で評価する

・称賛：Exemplary
サイトがどのように不十分であるかについての文章や、Lighthouseのレポート結果の画面キャプチャ（PDF形式）、10点の詳細なサイトの改善計画が記されている場合

・適切：Adequate
要求したレポートの内容が20%欠落している場合

・改善が必要：Needs Improvement
要求したレポートの内容が50%欠落している場合

Web Development for Beginners by Microsoft レッスン３の日本語訳を終えて

今回のレッスンでは、ということで

・Webページのアクセシビリティ

について学びました。

色々な方にとって使いやすい・わかりやすいサイトを作るには、自分自身もまだまだ修行が必要なことを痛感しました…

個人・会社を問わずにホームページやブログなどを運営されている担当者の方にとっては、勉強になるレッスンではないかと思いました。

次回からは、いよいよWebプログラミングでお馴染みのJavaScriptの学習に入ります。
お楽しみに♪

次回のレッスンをお楽しみに♪

by 子供プログラマー | プログラミング入門ウェブ教室

：日本人のためのWeb Development for Beginners（microsoft / Web-Dev-For-Beginners：GitHub）| 一覧

– 【レッスン２】Introduction to GitHub：GitHub入門

：コンピュータ・プログラミング関連記事

：日本人のための人工知能プログラマー入門講座（機械学習）