インストール

モジュールをインストールします。 

  1. npm install @wordpress/a11y --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。もし、言語機能やAPIのサポートが限られているか、全くない環境を使用している場合は、コードに@wordpress/babel-preset-defaultに含まれるポリフィルを含める必要があります。

API

セットアップ

ライブリージョンを作成します。

スピーク

ARIAライブリージョンを使用して、画面リーダーに動的なインターフェースの更新を簡単に通知することができます。このモジュールは、speak関数に触発されています。

使用法 

  1. import { speak } from '@wordpress/a11y';
  3. // For polite messages that shouldn't interrupt what screen readers are currently announcing.
  4. speak( 'The message you want to send to the ARIA live region' );
  6. // For assertive messages that should interrupt what screen readers are currently announcing.
  7. speak( 'The message you want to send to the ARIA live region', 'assertive' );

パラメータ

  • メッセージ string: 支援技術によって通知されるメッセージです。

  • ariaLive ['polite'|'assertive']: aria-liveの礼儀レベル; デフォルト: ‘polite’。

背景

文脈のために、@joedolsonによるWordPress.orgのこの記事を引用します:

なぜ。

現代のウェブ開発では、JavaScriptを使用して画面の特定の領域を更新することが一般的です。モダンなJavaScriptベースのユーザーインターフェースにおけるAJAXレスポンスの使用により、ウェブ開発者はページを再読み込みまたは更新することなく、デスクトップアプリケーションに似た美しいインターフェースを作成できます。

JavaScriptはほとんどのユーザーにとって素晴らしい使いやすさの向上をもたらしますが、コンテンツが動的に更新されると、アクセシビリティの問題を引き起こす可能性があります。これは、その問題に対処するために取ることができるステップの一つです。

何。

ページの一部がJavaScriptで更新されると、更新は通常アニメーションや明るい色で強調表示され、見やすくなります。しかし、画面を見る能力がない場合、更新された領域がARIAライブ領域としてマークされていない限り、これが発生したことを知ることはできません。

もしこれがマークされていなければ、画面リーダーには通知がありません。しかし、ARIAライブ領域が大きすぎる場合、更新後にすべての領域のコンテンツが通知される可能性もあります。ユーザーにはシンプルで簡潔なメッセージを提供したいと思います。

どうやって。

それがwp.a11y.speak()の目的です。これは、開発者がテキストメッセージを送信できる要素にARIAライブ通知エリアを作成して追加するシンプルなツールです。このエリア内のテキストの変更は、支援技術によって自動的に通知されます。このARIAライブ領域には「status」のARIAロールがあり、暗黙のaria-live値はpolite、暗黙のaria-atomic値はtrueです。

これは、支援技術がユーザーに更新を通知しますが、一般的には現在のタスクを中断せず、更新は低い優先度を持つことを意味します。もし、現在のセッションが終了しそうであるという通知のように、より高い優先度の更新を持つアプリケーションを作成している場合は、assertiveのaria-live値を持つ独自のメソッドを作成する必要があります。

ブラウザサポート

詳細はhttps://make.wordpress.org/core/handbook/best-practices/browser-support/を参照してください。

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージは[https://www.npmjs.com/]に公開され、[https://make.wordpress.org/core/]を含む他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主な[https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md]をお読みください。