12 アクセシブルなOracle JETアプリケーションの開発

Oracle JETおよびOracle JETコンポーネントは、障害を持つユーザーのために組込みのアクセシビリティ機能を備えています。 これらの機能を使用して、アクセシブルなOracle JET Webアプリケーション・ページを作成します。

Oracle JETとアクセシビリティについて

Oracle JETコンポーネントには、World Wide Web Consortium (W3C)によって開発された、AAレベル(WCAG 2.2 AA)のWebコンテンツ・アクセシビリティ・ガイドライン・バージョン2.2に準拠した、組込みのアクセシビリティ・サポートがあります。

アクセシビリティとは、弱視や全盲、難聴またはその他の身体的な制限などの障害を持つユーザーが、アプリケーションを使用できるようにすることです。 これは、たとえば次のことが可能なアプリケーションの作成を意味します:

  • マウスなしで使用(キーボードのみ)

  • スクリーン・リーダー、拡大鏡などの支援技術を使用可能

  • 音声、色、アニメーションまたはタイミングに依存せずに使用可能

Oracle JETコンポーネントは、次のサポートを提供します。

  • キーボード・ナビゲーションおよびタッチ・ナビゲーション

    Oracle JETコンポーネントはWeb Accessibility Initiative - Accessible Rich Internet Application (WAI-ARIA)のDeveloping a Keyboard Interfaceのガイドラインに準拠しています。 アプリケーションでOracle JETコンポーネントを使用する場合は、次のガイドラインに従ってください。 たとえば、tabindexを0より大きい値に設定しないでください。 各Oracle JETコンポーネントのAPIドキュメントには、キーボード・エンド・ユーザー情報とタッチ・エンド・ユーザー情報(該当する場合)がリストされ、WAI-ARIAガイドラインからのいくつかの逸脱も記載されています。

  • ズーム

    Oracle JETでは、最大400%までのブラウザ・ズームをサポートしています。 たとえば、Firefoxブラウザでは、「表示」 -> 「ズーム」 -> 「拡大」の順に選択できます。

  • スクリーン・リーダー

    Oracle JETでは、WAI-ARIA標準に準拠するコンテンツを生成することによって、JAWS、Apple VoiceOver、Google TalkBackなどのスクリーン・リーダーをサポートしており、特別なモードは必要ありません。

  • Oracle JETコンポーネントのロールと名前

    各Oracle JETコンポーネントには適切なロール(button、linkなど)があり、各コンポーネントは関連する名前(ラベル)をサポートしています(該当する場合)。

  • 十分な色のコントラスト

    Oracle JETには、Oracle JETリリース9.0.0以降、少なくとも4.5:1の輝度コントラスト比を提供するように設計されたRedwoodテーマが用意されています。

支援ツールやアクセシビリティに悪影響があるため、Oracle JETでは、アクセス・キーの使用はサポートされていません。

オラクル社では、自主的製品アクセシビリティ・テンプレート(VPAT)を使用して、各製品が該当するアクセシビリティ標準にどの程度準拠しているかを文書化しています。 使用するOracle JETのバージョンに該当するVPATで、既知の例外や不具合(ある場合)などの重要情報を確認する必要があります。

Oracle JETは、WCAG 2.2 AAに準拠したアプリをVPATで示された程度にレンダリングできますが、アプリ設計者および開発者は、該当するアクセシビリティ標準を完全に理解し、Oracle JETを適切に使用し、無効なユーザーと支援技術を使用してアクセシビリティ・テストを実行します。

Oracle JETコンポーネントのアクセシビリティ機能について

Oracle JETコンポーネントは、WCAG 2.2 AA標準に準拠するコンテンツを生成するように設計されています。 ほとんどの場合、Oracle JETコンポーネントにアクセシビリティを追加するための操作は必要ありません。 ただし、コンポーネントによっては、ラベルや他のプロパティの設定が必要な場合があります。

そのようなコンポーネントの場合は、コンポーネントのAPIドキュメントのアクセシビリティの項に、コンポーネントのアクセシビリティを確保するために必要な情報が記載されています。

ノート:

一部のOracle製品には、スクリーン・リーダーのユーザーなど、特定のタイプのユーザー用に最適化されたコンテンツをレンダリングするランタイム・アクセシビリティ・モードがあります。 Oracle JETでは、大部分でアクセシビリティ対応のコンテンツを常にレンダリングします。 オペレーティング・システムの高コントラスト・モードに依存するユーザー用のモードがあります(アクセス可能なOracle JETページの作成を参照)。

キーボード・ナビゲーションおよびタッチ・ナビゲーションが可能なOracle JETコンポーネントでは、APIドキュメントにキーストロークおよびジェスチャのエンド・ユーザー情報がリストされています。 ナビゲーションはコンポーネントに組み込まれているため、ナビゲーションを構成する操作は必要ありません。

各Oracle JETコンポーネントのアクセシビリティ機能と要件については、『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』を参照してください。 左側のリストから対象のコンポーネントを選択してください。 また、キーストロークとジェスチャをサポートする各Oracle JETコンポーネントでサポートされているキーストロークとジェスチャのリストは、Oracle® JavaScript Extension Toolkit (JET)キーボードおよびタッチ・リファレンスを参照してください。

アクセス可能なOracle JETページの作成

Oracle JETで生成されるコンテンツは、WCAG 2.2 AA標準に準拠するように設計されています。 ただし、UI全体の一貫性、色の使用、画面上のテキストや指示の品質など、Oracle JETが完全に制御しきれていない標準も多くあります。

アクセシビリティに対応する完全な製品開発計画には、適切なUI設計、コーディング、およびツールや支援技術を使用して障害を持つユーザーの協力のもとに実施するテストが含まれます。

ノート:

ほとんどの場合、アプリケーションのエンド・ユーザー用ドキュメントには、特定のコンポーネントの操作に必要なキーストロークの例など、アクセシビリティに関する情報を記載する必要があります。

WAI-ARIAランドマークの構成

WAI-ARIAランドマークは、支援技術を使用するユーザーにナビゲーション情報を提供します。 ランドマーク・ロールによってページ・リージョンの目的を識別し、ユーザーは目的のリージョンに直接ナビゲートできます。 ランドマークがない場合、支援技術を使用するユーザーは[TAB]キーを使用してページをナビゲートする必要があります。

Oracle JETチームでは、ページのアクセシビリティを確保するためにWAI-ARIAランドマークを使用することをお薦めしており、Oracle JETスタータ・テンプレート・コレクションで使用できる例を提供しています。 次の図は、Oracle JET Webナビゲーション・ドロワー・スタータ・テンプレート(navdrawer)の実行時ビューを示しています。 この例では、ページは、banner, navigation, mainおよびcontentinfoランドマークのリージョンを含む、WAI-ARIAランドマーク・リージョンと互換性のあるリージョンに編成されています。

access_quick_start.pngの説明が続きます
図access_quick_start.pngの説明

次の例のコードは、navdrawerテンプレートのランドマークを示しています。 各ランドマークは、ランドマーク・リージョンを定義するHTML要素に配置されます: navigationリージョンの場合はdiv、bannerリージョンの場合はheader、mainリージョンの場合はoj-module、contentinfoリージョンの場合はfooter。 

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>Oracle JET Starter Template - Web Nav Drawer</title>
    ...contents omitted
  </head>

  <body class="oj-web-applayout-body">
    ...contents omitted

    <div id="globalBody" class="oj-offcanvas-outer-wrapper oj-offcanvas-page">
      <div
        id="navDrawer"
        role="navigation"
        class="oj-contrast-marker oj-web-applayout-offcanvas oj-offcanvas-start">
        <oj-navigation-list
          id="navDrawerList"
          data="[[navDataProvider]]"
          item.renderer="[[KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
          on-click="[[toggleDrawer]]"
          selection="{{selection.path}}"></oj-navigation-list>
      </div>
      <div id="pageContent" class="oj-web-applayout-page">
        <header role="banner" class="oj-web-applayout-header">
          <div
            class="oj-web-applayout-max-width oj-flex-bar oj-sm-align-items-center">
            ...contents omitted
          </div>
          <div
            role="navigation"
            class="oj-web-applayout-max-width oj-web-applayout-navbar">
            <oj-tab-bar
              id="navTabBar"
              class="oj-sm-only-hide oj-md-condense oj-md-justify-content-flex-end"
              data="[[navDataProvider]]"
              edge="top"
              item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
              selection="{{selection.path}}"></oj-tab-bar>
          </div>
        </header>
        <oj-module
          role="main"
          class="oj-web-applayout-max-width oj-web-applayout-content"
          config="[[moduleAdapter.koObservableConfig]]"></oj-module>

        <footer class="oj-web-applayout-footer" role="contentinfo">
          ...contents omitted
        </footer>
      </div>
    </div>
   ...contents omitted
  </body>
</html>

アプリケーションにcomplementaryリージョンがある場合は、role="complementary"をHTML div要素に追加します: 

<div role="complementary"></div>

WAI-ARIAランドマーク・ロールの詳細は、landmark_rolesを参照してください。

高コントラスト・モードの構成

高コントラスト・モードは、ページ上のコンポーネントを識別するために高レベルのコントラストが必要なユーザー向けです。 Microsoft WindowsやmacOSなどのオペレーティング・システムでは、ユーザーが高コントラスト・モードで実行する方法が用意されています。

次の図は、Oracle JETのアイコン・フォント・イメージで高コントラスト・モードに変更した結果を示しています。

access_high_contrast.pngの説明が続きます
図access_high_contrast.pngの説明
高コントラスト・モードでの色および背景イメージの制限の理解

高コントラスト・モードでは、アプリケーションで対処が必要な色および背景イメージの制限があります。

高コントラスト・モードでは、背景、枠線およびテキストの色も含めて、CSSの色が無視されるかオーバーライドされる場合があります。 したがって、高コントラスト・モードでは、状態を示す別の方法が必要になる場合があります。 たとえば、選択されたことを示すために、枠線を追加または変更する必要があります。 高コントラスト・モードでCSSを変更するには、forced-colorsを参照してください。

また、アプリは、暗いバックグラウンド色または明るいバックグラウンド色で動作する別の高コントラスト・イメージを表示する必要がある場合があります。 白い背景に黒、または黒い背景に白のように、背景を含むイメージを提供することを検討してください。 そうすることで、コントラストがイメージ自体の中に含まれるため、ページの背景色が何であっても問題とはなりません。

高コントラスト・モードのテスト

Oracle JETアプリケーションで高コントラスト・モードをテストする場合は、オペレーティング・システム・レベルで高コントラスト・モードを設定し、Google Chrome、Microsoft Edge、Mozilla Firefoxなどの高コントラスト・モードをサポートするブラウザでアプリケーションをテストすることをお薦めします。

高コントラスト・モードの有効化については、ご使用のコンピュータのオペレーティング・システムのマニュアルを参照してください。 たとえば、Microsoft Windowsで高コントラスト・モードをオン/オフするには、左の[Alt]+左の[Shift]+[PrtScn]のキー組合せを使用します。 新しいモードを表示するには、ブラウザのリフレッシュが必要な場合があります。

スクリーン・リーダー・コンテンツの非表示

スクリーン・リーダー・ユーザーに対して読み上げられるが、視覚障害のないユーザーには表示されないテキストをページに設定する場合があります。 Oracle JETには、コンテンツを非表示にするのに使用できるoj-helper-hidden-accessibleクラスが用意されています。

oj-helper-hidden-accessibleスタイルのデフォルトは、RedwoodテーマのCSSファイル(web/css/redwood/x.x.x/web/redwood.css)にあります。 テーマ適用とOracle JETの詳細は、「Oracle JETアプリケーションでのCSSおよびテーマの使用」を参照してください。

ARIAライブ・リージョンの使用

ARIAライブ・リージョンは、Webページのコンテンツが更新されたときに、支援技術への通知を行うためのメカニズムです。

シングルページ・アプリケーションの使用時、ページまたはページ・リージョンになんらかの変更があった場合、アプリケーションのURLは変更されていないために、スクリーン・リーダーのような支援技術のユーザーにはページ・コンテンツの変更が通知されません。 ページまたはページのセグメントの変更時にスクリーン・リーダーに通知を提供できるようにするには、ARIAライブ・リージョンはWebページ内の動的な変更を通知します。 ARIAライブ・リージョン内で更新が発生すると、その時点でのフォーカスの位置にかかわらず自動的にスクリーン・リーダーに通知され、スクリーン・リーダーでは更新されたコンテンツをユーザーに知らせます。 これを行うには、aria-live属性を使用します。

aria-live属性によって要素はライブ・リージョンとして識別されます。 次の3つの値を指定できます。

  • off: 通知なし

  • polite: スクリーン・リーダーでは現在のタスクが完了してからユーザーに通知

  • assertive: スクリーン・リーダーでは現在のタスクを中断してユーザーに通知

要素に定義されたaria-live属性の値がpoliteに設定されている場合、スクリーン・リーダーは中断されることなく、ユーザーが画面を操作していないときにARIAライブ・リージョン内の変更を知らせます。 値がassertiveに設定されている場合は、新しい情報の優先度が高くなり、ただちにユーザーに通知されます。

また、ARIAライブ・リージョンのいくつかの拡張属性を使用して、ライブ・リージョン全体またはライブ・リージョンの一部に関する情報を支援技術に伝達することができます。 使用するいくつかのライブ・リージョンの拡張属性を次に示します。

  • aria-atomic: ページにライブ・リージョンが含まれている場合に、aria-atomic属性をaria-live属性とともに使用します。 この属性を使用して、支援技術でライブ・リージョン全体を1つの単位として表現するか、変更されたリージョンのみを通知するか設定します。 使用可能な値は、trueまたはfalseです。 デフォルト値はfalseです。

  • aria-relevant: ユーザーに通知する必要のある特定のライブ・リージョン内で発生した変更のタイプを説明する場合に、この属性をaria-live属性とともに使用します。 有効な設定は、additions、removals、textおよびallです。 デフォルト設定はadditions、textです。

次の例では、navdrawerテンプレートを使用して作成されたOracle JETアプリのindex.htmlファイルに定義されたARIAライブ・リージョンを示します。 この例では、aria-live属性がassertiveに設定され、aria-atomic属性がtrueに設定されています: 

. . . 
<div id="globalBody">
  <div id="announce" tabindex="-1" 
       class="send-off-screen" 
       :aria-live="[[manner]]" aria-atomic="true">
	<p id="ariaLiveMessage"><oj-bind-text value="[[message]]"></oj-bind-text></p>
  </div>
. . .

次の例は、アプリのappControllerファイルでobservablesおよびイベント・リスナーを設定する方法を示しています。 

. . .
class RootViewModel {
  manner: ko.Observable<string>;
  message: ko.Observable<string | undefined>;
  . . .

  constructor() {
    // handle announcements sent when pages change, for Accessibility.
    this.manner = ko.observable('polite');
    this.message = ko.observable();

    let globalBodyElement: HTMLElement = document.getElementById(
      'globalBody'
    ) as HTMLElement;
    globalBodyElement.addEventListener(
      'announce',
      this.announcementHandler,
      false
    );
. . . 
function ControllerViewModel() {
. . . 

  // Handle announcements sent when pages change, for Accessibility.
  this.manner = ko.observable('polite');
  this.message = ko.observable();
  announcementHandler = (event) => {
    this.message(event.detail.message);
    this.manner(event.detail.manner);
  };

 document
  .getElementById('globalBody')
  .addEventListener('announce', announcementHandler, false);

デフォルトでは、初期テンプレートでスキャフォールドする各Oracle JETアプリ(navdrawerなど)には、Aria Liveリージョンにアナウンスメントを送信するための関数(announce)を定義するアクセシビリティ・ユーティリティ・モジュールが含まれています。 このモジュールは、アプリがTypeScriptベースかJavaScriptベースかによって、appRootDir/srcディレクトリのtsまたはjsサブディレクトリにあります。 使用例は、Oracle JETアプリの生成された各モジュール(dashboardなど)にも実装されます。 

. . .
import * as AccUtils from '../accUtils';

class DashboardViewModel {
  constructor() {}
  connected(): void {
    AccUtils.announce('Dashboard page loaded.');
    document.title = 'Dashboard';
    // implement further logic if needed
  }
. . .
define(['../accUtils'], function (accUtils) {

  function DashboardViewModel() {

    this.connected = () => {
      accUtils.announce('Dashboard page loaded.', 'assertive');
      document.title = 'Dashboard';
      // Implement further logic if needed
    };
. . .