Oracle JETアプリケーションのアクセシビリティのテスト: 目視検査

はじめに

Webコンテンツ・アクセシビリティ・ガイドライン(WCAG)2.2には、アクセス可能なWebアプリケーションを作成するための60を超える成功基準のセットが含まれています。この学習パスでは、主に次のことに焦点を当てた、これらの基準のサブセットに焦点を当てます。

このチュートリアルでは、アプリのテストを開始する場所、つまり視覚検査に焦点を当てます。このチュートリアルとそれに続く2つの「キーボードのみのアクセシビリティのためのOracle JETアプリケーションのテスト」および「Oracle JETアプリケーションでのスクリーン・リーダー検証の実行」では、必要なテスト・ステップについて説明します。学習パスを続行する前に、これらの3つのテスト・チュートリアルを完了する必要があります。

アクセシビリティのためにWebアプリケーションを評価する最初のステップは、アプリのビジュアル・レビューを実行することです。レビュー中に、次の項目を探します。

目的

このチュートリアルでは、Webアプリケーションの手動アクセシビリティ・テストの実行方法、およびOracle JavaScript Auditフレームワークがアクセシビリティの問題の検出にどのように役立つかについて学習します。

前提条件

タスク1: スタータ・アプリの準備

この学習パスでは、Oracle JET 13.0 Nav Drawerスタータ・アプリケーションを使用しています。

  1. アプリケーションを配置するファイル・システム内の場所で、ダウンロードしたACCLearningPath.zipをACCLearningPathフォルダに抽出します。

  2. ターミナル・ウィンドウを開き、Oracle JETコマンドライン・インタフェース(CLI)の最新バージョンがインストールされていることを確認します(リリース13.0以降が必要です)。

    $ ojet --version

    Oracle JET CLIの最新バージョンが表示された場合、インストールは正しいです。そうでない場合は、使用しているプラットフォーム用のnpm installコマンドを使用して再インストールしてください。

    • Windowsの場合:

       $ npm install -g @oracle/ojet-cli

    • MacおよびLinuxシステムの場合:

       $ sudo npm install -g @oracle/ojet-cli

      インストールが完了すると、Oracle JET CLIにすべての変更のサマリーが表示されます。

  3. ACCLearningPathディレクトリに移動し、Oracle JETアプリケーション・ツールをリストアします。

    $ ojet restore

  4. アプリを実行します。

    $ ojet serve

    Oracle JETツールは、ローカルWebブラウザでアプリケーションを実行します。ブラウザが開き、アプリケーションの「概要」ページが表示され、「概要」タブがロードされます。アプリは使用可能です。

    ターミナル・ウィンドウとブラウザを開いたままにしておき、加えた変更でアプリが自動的に更新されるようにします。

タスク2: アプリケーションの監査

Oracle JET Audit Framework (JAF)は、コマンドライン・ユーティリティおよびサポートAPIで、構成ファイル内で検出されたランタイム・オプションに基づいて、Oracle JETアプリケーションのファイルを監査するように設計されています。アプリケーションの監査によって返される診断メッセージは、アプリケーションのJETリリース・バージョンに固有の組込みルール・セットから導出されます。ただし、監査フレームワークは拡張可能で、ユーザーはカスタム・ルールを記述して機能を拡張できます。

Oracle JAF監査は、アプリケーション内のアクセシビリティおよびその他の問題を識別するのに役立ちますが、ACCLearningPathアプリケーションで対処するすべてのアクセシビリティの問題は検出されません。そのため、アプリケーションの監査に加えて、アクセシビリティの問題を見つけて対処するために、この「アクセシビリティの問題の識別」学習パスで説明されている手順およびステップに従う必要があります。JAF監査は、作業を開始する前にアプリケーションの潜在的な問題を特定するために、サンプル・アプリケーションにアクセスできるようにするために最初から実行する必要があります。Oracle JAFの詳細は、「Oracle JET Audit Frameworkの使用方法および拡張」を参照してください。

CLIモードでOracle JAFをダウンロードして使用し、アクセシビリティの問題を確認します。

  1. npmを使用して、Oracle JAF CLIをインストールします。

    ターミナル・ウィンドウを開き、Oracle JAFのインストール済バージョンを確認します。

    $ ojaf -v

    インストールされていない場合、またはJAFのバージョンが現在のリリースではない場合は、古いバージョンをアンインストールし、最新バージョンをインストールします。

    $ npm uninstall -g @oracle/oraclejet-audit

    $ npm install -g @oracle/oraclejet-audit

  2. アプリケーションのACCLearningPathディレクトリに移動し、--initコマンドライン・フラグを使用してデフォルトのJAF構成を初期化します。

    $ ojaf --init

    ツールは、ACCLearningPathディレクトリのデフォルトのJAF構成ファイルoraclejafconfig.jsonをスキャフォールドし、アプリケーションのルート・ディレクトリにあるJETアプリケーション構成ファイルoraclejetconfig.jsonに基づいてデフォルトの構成設定を定義します。

  3. エディタでoraclejafconfig.jsonを開き、監査対象のJETのバージョン(13.0、13.1など)に対してjetVerプロパティの値が正しいことを確認します。

    "builtinJetRules": true,
   "jetVer": "13.0",

    oraclejafconfig.jsonファイルでJAFプロパティを追加または修正することで、アプリケーション監査をカスタマイズできます。構成オプションの詳細は、Oracle JAF構成ファイルのプロパティについてを参照してください。

  4. 初めてアプリケーションを監査する前に、--dryrunコマンドライン・フラグを使用してJAFが監査するファイルのデフォルト構成を確認できます。

    $ ojaf --dryrun

    予行演習では、アプリケーションを監査しませんが、現在のJAF構成設定に基づいて監査するファイルを確認します。

    ノート: ojaf --helpコマンドを入力して、コマンドライン・フラグの完全なリストを取得できます。

  5. JAF監査ユーティリティを起動するコマンドを入力して、アプリケーションの監査を実行します。

    $ ojaf

  6. 監査を実行すると、Oracle JAFはディレクトリでoraclejafconfig.jsonを検索し、監査レポートを作成します。

    このレポートには、アプリ内で見つかったルール違反の問題、及びアプリ内でのそれらの位置がリストされます。さらに、レポートには、検出された問題のサマリーとその重大度、監査されるルールおよび監査されるファイルが含まれます。

    JAF監査レポート

    監査レポートの問題のリストで、departments.htmlファイル('aria-label' or 'aria-labelledby' missing on <oj-film-strip>)にある重大度レベルのblockerの問題に注意してください。

    aria-labelプロパティがアプリケーションのフィルムストリップ・コンポーネントにないため、スクリーン・リーダーがコンポーネントのアイデンティティにアクセスできない可能性があります。これは、後のチュートリアルで取り上げるアクセシビリティの問題の1つです。

これは、この学習パスでのOracle JAFの説明の最後です。アプリケーションの監査が終了したら、ACCLearningPathディレクトリからフォルダjaftmp@およびファイルoraclejafconfig.jsonを削除してください。

タスク3: ページ構造のレビュー

ページ構造は、アプリの目視検査の論理的な開始点です。HTML見出しは、詳細に焦点を当てることなく、ページ・コンテンツの概要を提供します。スクリーン・リーダーは、ユーザーが適切にマークアップされた見出し間をすばやく移動できるようにするためのショートカットを提供します。

ACCLearningPathアプリケーションを使用して、ページ構造を確認します。

  1. 実行中のアプリケーションで、ページのセクションが見出しで識別されるかどうかを判断します。

    見出しのテキストは、ページ上の通常のテキストとは大きくまたはスタイルが異なります。<h1>から<h6>タグを使用して、真のHTMLヘッダーを作成します。

  2. 各見出しのテキストが、関連する内容を適切に説明しているかどうかを確認します。

    「概要」ページの「概要」タブを確認します。3番目の右端のパネルには、「テキストの間隔」という見出しがあります。このパネルの内容は、テキストの間隔を調整することに関係します。したがって、この見出しは適切な説明の見出しの例です。

  3. ChromeのDevToolsの「要素」タブを使用して、見出しが正しいHTMLの見出しか、見出しに似ているように設計されたテキストかを判断します。

    • 見出し「概要ページ」を右クリックし、コンテキスト・メニューから「検査」を選択して、ページのドキュメント・オブジェクト・モデル(DOM)構造を表示します。

      DevTools 「要素」ペインに表示されるDOMツリー内の強調表示された要素では、HTML見出しを作成する正しい方法が使用されます。

       <h4>The Introduction Page</h4>

    • DevToolsを閉じ、「リソース」ページという見出しを右クリックし、コンテキスト・メニューから「検査」を選択します。

      このDOMツリーで強調表示された要素は、HTMLヘッダーのようにスタイル設定されたテキストです。

       <span class="h4Style">The Resources Page</span>

      スクリーン・リーダーは、このコードをヘッダーとして検出しません。スクリーン・リーダー・ユーザーは、多くの場合、見出しごとにページを移動し、見出しに似たスタイルのテキストは無視されます。次のステップでは、誤ってコード化された見出しを修正します。アプリを実行したままにし、ブラウザを開いて、次の変更がアプリにどのように影響するかを確認します。

  4. ACCLearningPath/src/js/viewsフォルダに移動し、コード・エディタでoverview.htmlを開きます。

  5. <span class="h4Style">タグを見つけます。

  6. <span class="h4Style">タグを<h4>タグに置き換えます。

  7. </span>タグを</h4>タグに置き換えます。

  8. ファイルを保存し、ブラウザでアプリケーションに対する変更を表示します。

タスク4: ページ・タイトルのレビュー

アプリの目視検査には、ページ・タイトルの有効性の評価が含まれます。

実行中のスタータ・アプリケーションをナビゲートし、各ページ・タイトルを確認します。

  1. ページ・タイトルがページ、タブおよびアプリケーション名を明確に識別するかどうかを決定します。

  2. ページ間を移動したり、紹介ページのタブ間でページ・タイトルを変更するかどうかを決定します。

    表示される新しいページまたはタブごとにページ・タイトルを変更する必要があります。たとえば、ページの右上にあるメイン・メニューで「紹介」を選択した場合、タイトルは「紹介」を読み、「リソース」を選択すると、タイトルは「リソース」と表示されます。

    「紹介」ページのタイトルには、「紹介」という語と、現在選択されているタブの名前の両方を含める必要があります。タブバーから別のタブを選択すると、タイトルが新しく選択したタブを反映するように変更されます。

    • 概要- 概要
    • はじめに- 組織
    • はじめに- 従業員
    • はじめに- 部門

    同様に、「リソース」ページ・タイトルには「リソース」という語を含める必要があります。

    ページまたはタブ間を移動しても、ページ・タイトルは変更されないことがわかります。この問題は、後のチュートリアルで修正されます。

Webアプリケーションのページ・ヘッダーにナビゲーション・リンクやロゴなどの繰返しコンテンツがある場合は、ナビゲーションのスキップ・リンクを含めます。業界標準では、タブによってアクセスされるまで、ナビゲーションのスキップ・リンクを非表示にすることをお薦めします。

ブラウザで実行されているアプリケーションのスキップナビゲーション・リンクの存在をテストします。

  1. アプリケーションで、<Ctrl+L>を押してアドレス・バーにフォーカスを移動します。

  2. <Tab>を押して、ナビゲーションのスキップ・リンクを表示してフォーカスを受信します。

    ナビゲーション・スキップ・リンクが表示されないため、フォーカスがページの最初のフォーカス可能な要素(ページの右上にあるユーザー・メニューのjohn.hancock@oracle.com)に移動します。フォーカス可能な要素は、「キーボードのみのアクセシビリティ」チュートリアルで詳細に定義されています。

    テスト中に、スタータ・アプリケーションにスキップナビゲーション・リンクが実装されていないことが判明しました。

    「ナビゲーションのスキップ」リンクを追加するには、次の3つのステップがあります。

    1. index.htmlファイルにリンクを追加します。
    2. app.cssファイルにスタイル・クラスを追加して、タブが表示されるまでナビゲーションのスキップ・リンクを非表示にします。
    3. ターゲット・アンカーをintro.htmlおよびresources.htmlファイルに追加します。

index.htmlファイルを更新します

index.htmlファイルは、Oracle JET Webアプリケーションのオーバーアーカイブ構造を定義します。このページにスキップナビゲーション・リンクを配置する必要があります。

  1. ACCLearningPath/srcディレクトリに移動し、コード・エディタでindex.htmlを開きます。

  2. <body>タグを見つけます。

    <body class="oj-web-applayout-body">
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

  3. <body>タグとそれに続くコメントの間に、ターゲットが#mainであるリンクを挿入します。

    <body class="oj-web-applayout-body">
   <a class="hideSkipNav" href="#main">Skip to main content</a>
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

    hideSkipNavクラスでは、ユーザーがページの最上部から開始して<Tab>を押すまで、リンクが表示されません。

  4. index.htmlを保存して閉じます。ファイルは index-html.txtに似ているはずです。

app.cssファイルを更新します

index.htmlファイルでhideSkipNavスタイル・クラスを参照しました。次に、app.cssで定義する必要があります。すべてのカスタム・スタイル定義がこのファイルにあります。

  1. ACCLearningPath/src/cssフォルダに移動し、app.cssを編集します。

  2. .hideSkipNavスタイル・クラスおよびプロパティをファイルの最後に追加します。

    .hideSkipNav { 
   position: absolute;
   left: -1000px; }

.hideSkipNav:focus {
   position: unset;
   left: 0px; }

  3. app.cssを保存して閉じます。ファイルはapp-css.txtのようになります。

ページのHTMLファイルの更新

スキップ・ナビゲーション・リンクのターゲットは各ページのメイン・コンテンツの上部にある必要があるため、「紹介」ページと「リソース」ページの両方にターゲット・アンカー・タグを追加します。

  1. ACCLearningPath/src/js/viewsフォルダに移動し、intro.htmlファイルを編集します。

  2. oj-hybrid-paddingクラスを使用して<div>を見つけます。

    <div class="oj-hybrid-padding">
   <div id="mainContainer">

  3. 2つの<div>タグの間にアンカー・タグとh2見出しを挿入します。

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Introduction</h2>
</a>
   <div id="mainContainer">

    追加されたコードでは、スキップ・ナビゲーション・リンクのターゲットだけでなく、ページ構造を改善するためのh2ヘッダーも提供されます。

  4. intro.htmlを保存して閉じます。ファイルは intro-html.txtに似ているはずです。

  5. コード・エディタでresources.htmlを開き、oj-hybrid-paddingクラスを持つ<div>を見つけます。

    <div class="oj-hybrid-padding">
   <ul>

  6. <div>タグと<ul>タグの間にアンカー・タグとh2ヘッダーを挿入します。

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Resources</h2>
</a>
   <ul>

  7. resources.htmlを保存して閉じます。ファイルはresources-html.txtのようになります。

  8. 実行中のアプリケーションで、<Ctrl+L>を押してアドレス・バーにフォーカスを移動します。

  9. <Tab>を押すと、ナビゲーションのスキップ・リンクが表示され、フォーカスを受け取ります。

  10. <Enter>を押して、ナビゲーションのスキップ・リンクをアクティブにします。

    次に、フォーカスがページのメイン・コンテンツに移動します。

    「ナビゲーションのスキップ」リンクの機能をテストしたら、目視検査の次の要素に移動します。

タスク6: 色と位置の使用の確認

ボタンは、あるページまたはアクションから次のページに移動する方向の重要な部分です。開発者は、色付きのボタンを使用してページの外観と機能を強化します。「続行するには緑色のボタンを押してください」は一般的な指示です。しかし、適切なラベル付けがなければ、視覚障害のあるユーザーはこれらの指示および同様の指示に従うことはできません。

概要ページの中央パネルには、3つの色のボタンを含むツールバーと、色と位置に基づいてボタンを押すためのいくつかの手順が含まれています。ブラインドまたはカラーブラインド・ユーザーは、ラベルやその他の識別機能がないため、ボタンを区別できません。このボタンのセットは成功基準1.3.3および1.4.1に失敗します。

色の指示の使用

中央パネルの各色付きボタンには、テキスト・ラベルが関連付けられている必要があります。次の変更により、ボタンにラベルとして色名が追加されます。

  1. ACCLearningPath/src/js/viewsフォルダに移動し、overview.htmlファイルを編集します。

  2. 3つのoj-button要素のセットを見つけます。

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">
</oj-button>

  3. コード内のボタンを変更して、色識別子を作成します。

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">Green
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">Red
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">Purple
</oj-button>

  4. overview.htmlを保存し、ボタンに適切なテキスト・ラベルがあることを確認します。

    ファイルは overview-html.txtに似ているはずです。

タスク7: 可読性の検証

目視検査の最終段階は、視力低下ユーザーに固有です。行、単語および文字の間隔を調整するか、ページのズーム・レベルを変更するかによって、読みやすさが増減するかを決定します。

「概要」ページを使用して、これらの基準を説明し、テキストの間隔とアプリのズームを確認します。

テキストの間隔とズームの確認

  1. 実行中のアプリケーションで、「テキストの間隔」というタイトルのページの右端のパネルを確認します。パネルには2つのセクションがあります。両方のセクションのテキストを比較して、すべてのテキストが存在することを確認します。

    パネルの上部には、通常の間隔を持つテキストがあります。下部には、文字、単語および行の間隔が増加した同じテキストが含まれます。

    下部のセクションのどの文字も歪んだり、クリップしたり、重複しない場合、ページは達成基準1.4.12に合致します。

  2. ブラウザのズーム・レベルを200%に増やします。ツールバーの拡大鏡のズーム・アイコンをクリックし、+記号をクリックしてズームを増やします。

    すべてのテキストが読み取り可能で、テキストが各パネルの内部で正しく折り返される場合、ページは200%の倍率で達成基準1.4.4を満たします。

    • 成功基準1.4.10のリフローは、「コンテンツは、情報や機能を失うことなく、次の2つのディメンションでスクロールすることなく表示できます。
      • 320 CSSピクセルに相当する幅での垂直スクロールコンテンツ。
      • 256 CSSピクセルに相当する高さの水平スクロール・コンテンツ。コンテンツの一部を除き、使用目的または意味に2次元レイアウトが必要です。」

    スクロールが必要な方向が1つだけになるように、ページが再フォーマットされます。ページは水平方向または垂直方向にスクロールされますが、両方向にはスクロールされません。Success Criterion 1.4.10では、ページの使用が容易になります。

  3. ズームを400%に増やします。

  4. スクロール・バーの外観についてページを確認します。水平スクロール バーと垂直スクロール バーの両方が表示された場合は、この条件は表示されません。

初期テスト・フェーズが完了しました。

次のステップ

このモジュールの次のチュートリアルに進みます。

このチュートリアルは、モジュール「アクセシビリティの問題の識別」の一部です。

アクセシビリティ学習パスのメイン・ページに戻ると、アクセシビリティのすべてのモジュールにアクセスできます。

その他の学習リソース

docs.oracle.com/learnで他のラボを確認するか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスして、Oracle Learning Explorerになります。

製品ドキュメントについては、Oracle Help Centerを参照してください。