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

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

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

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

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

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

マウスなしで使用可能(キーボードのみ)。
スクリーン・リーダー、拡大鏡などの支援技術を使用可能。
音声、色、アニメーションまたはタイミングに依存せずに使用可能。

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は、VPATで示される程度までWCAG 2.1 AAに準拠するアプリケーションをレンダリングできますが、該当するアクセシビリティ標準を完全に理解し、JETを適切に使用して、障害を持つユーザーの協力のもとに支援技術を使用してアクセシビリティ・テストを実施するのは、アプリケーションの設計者および開発者の責任です。

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

Oracle JETコンポーネントは、WCAG 2.1 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.1 AA標準に準拠するように設計されています。ただし、UI全体の一貫性、色の使用、画面上のテキストや指示の品質など、Oracle JETが完全に制御しきれていない標準も多くあります。

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

ノート:

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

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

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

Oracle JETチームでは、ページのアクセシビリティを確保するためにWAI-ARIAランドマークを使用することをお薦めしており、Oracle JETスタータ・テンプレート・コレクションで使用できる例を提供しています。次の図では、Oracle JET Web Nav Drawerスタータ・テンプレートの実行時の表示内容を示します。この例では、ページは、banner、navigation、mainおよびcontentinfoランドマークのリージョンなど、WAI-ARIAランドマーク・リージョンと互換性のあるリージョンで構成されています。

図access_quick_start.pngの説明

次の例で強調表示されているコードは、Web Nav Drawerスタータ・テンプレートのランドマークを示しています。各ランドマークは、ランドマーク・リージョンを定義する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]]"
                            edge="start"
                            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-navigation-list id="navTabBar" class="oj-sm-only-hide oj-md-condense oj-md-justify-content-flex-end"
                                data="[[navDataProvider]]"
                                edge="top"
                                item.renderer="[[KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
                                selection="{{selection.path}}">
            </oj-navigation-list>
          </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>
    <!-- This injects script tags for the main javascript files -->
		<!-- injector:scripts -->
		<!-- endinjector -->
  </body>
</html>

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

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

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

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

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

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

図access_high_contrast.pngの説明

Oracle JETには、アプリケーションで高コントラスト・モードを構成するのに使用できるoj-hicontrastクラスが用意されています。

高コントラスト・モードでの色および背景イメージの制限の理解

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

高コントラスト・モードでは、背景、枠線およびテキストの色も含めて、CSSの色が無視されるかオーバーライドされる場合があります。したがって、高コントラスト・モードでは、状態を示す別の方法が必要になる場合があります。たとえば、選択されたことを示すために、枠線を追加または変更する必要があります。さらに、アプリケーションで、暗い背景色または明るい背景色で機能する高コントラストの代替イメージの表示が必要になる場合があります。一部のオペレーティング・システム(Microsoft Windowsなど)には、高コントラスト・モード用の表示プロファイルが複数用意されています(白地に黒、黒地に白モードを含む)。

白い背景に黒、または黒い背景に白のように、背景を含むイメージを提供することを検討してください。そうすることで、コントラストがイメージ自体の中に含まれるため、ページの背景色が何であっても問題とはなりません。

Oracle JETアプリケーションへの高コントラスト・モードの追加

ほとんどの場合、Oracle JETアプリケーションで高コントラスト・モードを有効にするための操作は必要ありません。RequireJSを使用してOracle JETコンポーネント・モジュールをロードする場合、Oracle JETでは、ユーザーが高コントラスト・モードで実行中かどうかを検出するスクリプトがロードされます。スクリプトが検出に成功すると、oj-hicontrastクラスがbody要素に配置されます。

ただし、この方法には制限があります。高コントラスト・モードを検出する標準的な方法がないため、すべてのブラウザですべての場合にスクリプトが機能する保証はありません。.oj-hicontrastスタイルを確実に適用するには、高コントラストのユーザー・プリファレンス設定をアプリケーションに追加し、プリファレンスが設定されている場合にoj-hicontrastクラスをbody要素に追加するようにアプリケーションを構成します。クラスが追加されると、定義されたページに.oj-hicontrast CSSスタイルが適用されます。次のコード引用は、ボタンがフォーカスされるとojButtonコンポーネントのoutline-widthが3に変更されるRedwood CSSを示しています。

.oj-hicontrast .oj-button.oj-focus .oj-button-button {
  outline-width: 3px; }

ノート:

使用不可コンテンツの場合、JETでは、WCAG 2.1 - 達成基準1.4.3「コントラスト(最小)」に指定されているアクセス可能な輝度コントラスト比を、アクセス可能なテーマでサポートしています。

第1.4.3項には、非アクティブなユーザー・インタフェース・コンポーネントの一部であるテキスト、またはテキストのイメージにコントラスト要件はないと記載されています。使用不可コンテンツは、使用可能コンテンツに必要な最小コントラスト比を満たさない場合があるため、意味のある情報を表示するのに使用できません。たとえば、チェック・ボックスは使用不可モードでも選択状態で表示できますが、色のコントラスト比が十分でない場合があるため、すべてのユーザーが、チェック・ボックスが選択状態であると識別できるとはかぎりません。ページで正しく操作するのに情報が必要な場合は、プレーン・テキストなどの別の方法で情報を表示する必要があります。

高コントラストのイメージまたはアイコン・フォントの追加

高コントラストのイメージ・ファイルをサポートするために、Oracle JETには、次の場合に高コントラスト・モードで正しいCSSを生成するのに使用できるSassミックスインが用意されています。

別のイメージを使用するとき。
背景イメージを使用せずにイメージを使用するとき。

Oracle JETクックブックのCSSイメージには、使用できる例が用意されています。

高コントラスト・モードをサポートするために、イメージ・ファイルのかわりにアイコン・フォントも使用できます。アイコン・フォントは単色を使用するという制限があります。これらのアイコンはテキストであるため、CSSの色を無視するシステム上でも、背景色に対してコントラストを出すことができます。ただし、色を使用して状態を示す場合(たとえば、選択されるとアイコンを青色に変更する)、高コントラスト・モードでは色が無視される場合があります。かわりに、枠線を設定するなど別の方法が必要になる場合があります。Oracle JETクックブックのアイコン・フォントには、アイコン・フォントのデモが用意されています。

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

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です。

次の例は、アプリケーションのindex.htmlファイルに定義されているARIAライブ・リージョンのサンプルを示しています。この例で、aria-live属性はassertiveに、aria-atomic属性はtrueにそれぞれ設定されています。

<div id="globalBody" class="oj-offcanvas-outer-wrapper oj-offcanvas-page">
    <!-- Region for announcing messages to Screen Readers -->
    <div id="announce" class="sendOffScreen" :aria-live="[[manner() ? manner() : 'assertive']]" aria-atomic="true">
      <p id="ariaLiveMessage"><oj-bind-text value="[[message]]"></oj-bind-text>
    </div>
    <div id="navDrawer" role="navigation" class="oj-contrast-marker oj-web-applayout-offcanvas oj-offcanvas-start">
      <oj-navigation-list id="navDrawerList" data="[[navDataProvider]]" edge="start" item.renderer="[[KnockoutTemplateUtils.getRenderer('navTemplate', true)]]"
        on-click="[[toggleDrawer]]" selection="{{selection.path}}">
      </oj-navigation-list>
    </div>
    <div id="pageContent" class="oj-web-applayout-page">
		... contents omitted

次の例は、アプリケーションのappController.jsファイルにobservableとイベント・リスナーを設定する方法を示しています。

define(['knockout', 'ojs/ojresponsiveutils', 'ojs/ojresponsiveknockoututils', 'ojs/ojcorerouter', 'ojs/ojarraydataprovider', 'ojs/ojknockout', 'ojs/ojoffcanvas'],
  function (ko, ResponsiveUtils, ResponsiveKnockoutUtils, CoreRouter, ArrayDataProvider) {
    function ControllerViewModel() {
      var self = this;

      self.manner = ko.observable('assertive');
      self.message = ko.observable();
      function announcementHandler(event) {
        self.message(event.detail.message);
        self.manner(event.detail.manner);
      };

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


      var smQuery = ResponsiveUtils.getFrameworkQuery(ResponsiveUtils.FRAMEWORK_QUERY_KEY.SM_ONLY);
      self.smScreen = ResponsiveKnockoutUtils.createMediaQueryObservable(smQuery);
      var mdQuery = ResponsiveUtils.getFrameworkQuery(ResponsiveUtils.FRAMEWORK_QUERY_KEY.MD_UP);
      self.mdScreen = ResponsiveKnockoutUtils.createMediaQueryObservable(mdQuery);

      let navData = [
        { path: '', redirect: 'dashboard' },
        { path: 'dashboard', detail: { label: 'Dashboard', iconClass: 'oj-ux-ico-bar-chart' } },
        { path: 'incidents', detail: { label: 'Incidents', iconClass: 'oj-ux-ico-fire' } },
        { path: 'customers', detail: { label: 'Customers', iconClass: 'oj-ux-ico-contact-group' } },
        { path: 'about', detail: { label: 'About', iconClass: 'oj-ux-ico-information-s' } }
      ];

      // Router setup
      let router = new CoreRouter(navData, {
        urlAdapter: new UrlParamAdapter()
      });
      router.sync();

      this.moduleAdapter = new ModuleRouterAdapter(router);

      this.selection = new KnockoutRouterAdapter(router);

      // Setup the navDataProvider with the routes, excluding the first redirected
      // route.
      this.navDataProvider = new ArrayDataProvider(navData.slice(1), {keyAttributes: "path"});
	... contents omitted

お知らせを送信するには、ページのviewModelファイル内またはルーターのenterメソッドで定義可能なディスパッチャを使用できます。次の例は、self.transitionCompletedライフサイクル・メソッドでディスパッチを起動する、ページのviewModelファイルを示しています。

define(['knockout','ojs/ojpopup'],
  function (ko) {

    function DashboardViewModel() {
      var self = this;

      self.transitionCompleted = function (info) {
        var message = "Loaded Dashboard page"
        var params = {
          'bubbles': true,
          'detail': { 'message': message, 'manner': 'assertive' }
        };
        document.getElementById('globalBody').dispatchEvent(new CustomEvent('announce', params));
      };

ARIAライブ・リージョンの使用の詳細は、ARIAライブ・リージョンを参照してください。