ドラゴンに入る（ドロップ）：アクセス可能なリストの並べ替え

アクセシビリティに重点を置いたWeb開発者である長年にわたり、私は主に、支援技術（AT）によって十分にサポートされている広く採用されている標準化されたUIコンポーネントを扱ってきました。 これらのタイプのウィジェットには、簡潔なARIAオーサリングプラクティスと、アクセシビリティの問題についてWebコンポーネントをテストするために使用できるaxe-coreなどの優れたツールがあります。 あまり一般的ではないウィジェット、特にユーザーインタラクションに広く採用されている規則がないウィジェットを作成することは、非常に難しい場合があります。

私が遭遇した最も困難な課題の1つは、並べ替え可能なドラッグアンドドロップリストです。 並べ替え可能なリストは、マウスユーザーにとって直感的な規則を備えた、やや一般的に使用されるウィジェットですが、キーボードのみの支援技術ユーザーがこの単純なタスクを実行する方法は明確ではありません。 サポートされているARIA属性がないため、Dragon Dropはライブ領域を利用して、すべてのユーザーがリストを並べ替えるのに必要な情報を伝達します。

ライブリージョン

ライブリージョンは、コンテンツの変更をスクリーンリーダーに通知するために使用できるARIA属性を備えたHTML要素です。 フォーカスを移動することなく、完全にカスタマイズされたスクリーンリーダーのアナウンスを提供できます。 ライブリージョンは、ページのリモート部分でのリアルタイムの更新、ステータスの更新、および時間に敏感な情報に最適です。

これらは、チャットログ、進行状況インジケーター、スポーツスコアの更新、天気予報でよく使用されますが、スクリーンリーダーのユーザーに過度の冗長なエクスペリエンスを簡単に作成できるため、慎重に使用する必要があります。 ライブリージョンを初めて使用する場合、またはライブリージョンで何ができるかを調べたい場合は、ライブリージョンの遊び場をチェックしてください。このプレイグラウンドでは、独自のカスタムライブリージョンを構成できます。

アプリケーションでライブリージョンを使用する場合は、npmのライブリージョンモジュールを参照してください。

 <div aria-live="assertive" role="log" aria-relevant="additions" aria-atomic="true"></div>

ライブリージョンを使用する理由

理想的な世界では、ドラッグアンドドロップのARIA属性でaria-grabbed -grabbedとaria-dropeffectに単純に依存することができたでしょう。 ただし、実際には、これらの属性のサポートはまれであり、サポートされている場合、エクスペリエンスは混乱を招き、スクリーンリーダーユーザーにとって直感に反します。 さらに、これらの2つの属性は、ARIA 1.1以降非推奨になっています。つまり、これらの属性のサポートが将来的に増えることはありません。

この非推奨に関するW3Cの会話は、ここにあります。 これらの問題のために、私はドラゴンドロップでaria- aria-grabbedとaria-dropeffectを使用しないことに決めました。 さまざまな支援技術/ブラウザの組み合わせ内でのARIA属性のさまざまなサポートは、アクセシビリティの世界では非常に普及しています。 幸い、 role 、 aria-live 、 aria-relevant 、 aria-atomicなどのライブリージョン属性は、JAWS、NVDA、VoiceOverなどのスクリーンリーダーで非常に広くサポートされています。

最適化されたアクセシビリティ

Dragon Dropは、マウス、キーボード、および支援技術のユーザー向けに機能する、高度に構成可能なリスト並べ替えモジュールです。 数年前、私がそれを書くことを決心したとき、私が取り組んでいたプロジェクトでアクセス可能な並べ替えリストが数回出されましたが、私はまだ実用的な解決策を見ていませんでした。 私が出会った数十のドラッグアンドドロップリスト並べ替えプラグインのうち、それらのほとんどはアクセシビリティを念頭に置いて設計されておらず、その結果、非常にアクセスできませんでした。

Dragon DropはVoiceOver、JAWS、NVDAでテストされており、ATユーザーがリストを正常に並べ替えることができます。

私は、並べ替え可能なリストに遭遇したときにユーザーが抱く可能性のあるすべての質問に答えることに着手しました。 これらの質問は、一般的な慣習を通じて目の見えるマウスユーザーに対して回答されていますが、残りのユーザーについてはどうでしょうか。

どうすればアイテムを受け取ることができますか？

アイテムの取得状態を伝達するコントロールと、トップレベルのヘルプテキストを提供することで、この質問に答えることができます。 たとえば、アクセス可能なテキスト（名前、役割、値はATによって収集されます）「アイテム1の並べ替え、トグルボタン」を含むコントロールは、アクティブ化されたときにアイテムをピックアップしてキックオフするボタンであることをユーザーに通知します。並べ替え。

Dragon dropは、 aria-pressed属性を使用して、アイテムが「ドラッグ」されているときとされていないときをATユーザーに通知します。 アイテム全体をドラッグ可能にするか、子の「ドラッグハンドル」のみをドラッグできるように構成できます。どちらの場合も、 role="button"とtabindex="0"の存在が保証されます。

ドラッグアイテムがアクティブになると、 aria-pressed="true"が要素に適用され、 「アイテム1が取得されました」などの構成可能なアナウンスが、ライブ領域を介してスクリーンリーダーに読み上げられます。

アイテムを移動するにはどうすればよいですか？

aria-describedbyを使用して、コントロールを「並べ替えボタンをアクティブにし、矢印キーを使用してリストを並べ替えるか、マウスを使用してドラッグ/並べ替え」などの便利なヘルプテキストに関連付けます。 実際に並べ替える方法をユーザーに指示します。 これにより、スクリーンリーダーのユーザーは、アイテムが押されたときに、上矢印キーと下矢印キーによってアイテムがそれぞれリストの上下に移動することを知ることができます。

どうすればアイテムをドロップできますか？

aria-pressed属性が使用されるため、ユーザーはアイテムをドロップする方法を簡単に知ることができます。 何らかの形、形、または形で、最も広く使用されているすべてのスクリーンリーダーは、トグルボタンの押された状態を伝えます。 アイテムがドロップされると、aria-pressed属性が「false」に設定され、 「アイテム1がドロップされました」などのカスタマイズされたアナウンスがスクリーンリーダーに読み上げられます。

リストがいつ並べ替えられたかを知るにはどうすればよいですか？

上下の矢印キーを使用してリストの順序を変更するたびに、すべてのユーザーにこの変更が通知されるようにする必要があります。 目の見えないユーザーの場合、ライブリージョンに再度依存する必要があります。 「リストが並べ替えられました。アイテム1がリストの4番目になりました。」などの構成可能なアナウンス。 、は、並べ替えられたリストの更新された状態を伝えるために読み取られます。 これは重要です。なぜなら、目の見えるユーザーは変更された順序を即座に視覚的にフィードバックし、まったく同じ情報をATユーザーに伝える必要があるからです。

再注文をキャンセルするにはどうすればよいですか？

このようなやり取りには広く採用されている規則に頼ることができないため、ヘルプテキストに「エスケープを押して並べ替えをキャンセルする」などの指示を含めることができます。 さらに、ライブリージョンを利用して、キャンセルをユーザーに通知するカスタマイズされた読み出しを提供します。

キーボードの相互作用

ドラゴンの動きを見る

いくつかの異なる構成を体験するDragonDropデモを確認してください。

ドラゴンドロップをアプリにドロップする

Dragon Dropは、通常のリストを完全にアクセス可能なドラッグアンドドロップで並べ替え可能なリストに変換します。

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> const dragon = document.getElementById('dragon'); // Enter the dragon new DragonDrop(dragon); </script>

インストール

Dragon Dropはオープンソース（MITライセンス）プロジェクトであり、npmを介してインストールできます。

 $ npm install drag-on-drop

これは、browserifyやwebpackなどのモジュールで使用できます。

 // if you're not down with ES6, you can require('drag-on-drop') import DragonDrop from 'drag-on-drop';

Dragon Dropは、unpkgCDNを使用してページに簡単にドロップすることもできます。

 <script source="https://unpkg.com/drag-on-drop"></script> <script> var dragonDrop = new DragonDrop(listElement); </script>

構成

幅広いユースケースをサポートするために、DragonDropは非常に構成可能です。

デフォルトの構成は次のとおりです。

 { item: 'li', handle: 'button', activeClass: 'dragon-active', inactiveClass: 'dragon-inactive', announcement: { grabbed: el => `Item ${el.innerText} grabbed`, dropped: el => `Item ${el.innerText} dropped`, reorder: (el, items) => { const pos = items.indexOf(el) + 1; const text = el.innerText; return `The list has been reordered, ${text} is now item ${pos} of ${items.length}`; }, cancel: 'Reordering cancelled' } }

お知らせ

Dragon Dropの「アナウンス」構成オプションは、Dragon Dropが提供するスクリーンリーダーエクスペリエンスのバックボーンであるため、最も重要です。 これは、 "grabbed" 、 "dropped" 、 "reorder" 、および"cancel"機能を含むオブジェクトであり、発生するすべてのインタラクションのカスタムライブリージョンアナウンスを可能にします。

これらの各関数は、指定されたアクションが発生したときにライブ領域に追加されるアナウンステキストの文字列を返す必要があります。 これらの機能を利用することの追加の利点は、ライブリージョンメッセージのローカライズをサポートすることです。

アナウンスを容易にするために、アクションが実行されたリストアイテム要素とリスト内のアイテムの配列がそれぞれ引数として渡されます。

 { announcement: { // grabbed is called when an item is picked up grabbed: (targetItem, items) => `${targetItem.innerText} grabbed`, // dropped is called when an item is dropped dropped: (targetItem, items) => `${targetItem.innerText} grabbed`, // reorder is called each time the order of the list is altered reorder: (targetItem, items) => { return `${targetItem.innerText} is now ${items.indexOf(targetItem) + 1} of ${items.length}` }, // cancel is called when a reordering is cancelled (via escape key) cancel: () => 'The initial order has been restored, reordering cancelled' } }

ヘルプテキスト

並べ替え可能なリストの使用方法を説明するヘルプテキストを提供することは絶対に不可欠です。 これは、このテキストを支援技術で利用できるようにする方法についての意見を少なくするために、DragonDropが行っていないことです。 推奨される実装は、 aria-describedbyを使用して、ヘルプテキストを次のようなインタラクティブアイテムに関連付けることです。

 <p>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</p> <ul> <li> <button>Reorder Item 1</button> <span>Item 1</span> </li> <li> <button>Reorder Item 2</button> <span>Item 2</span> </li> <li> <button>Reorder Item 3</button> <span>Item 3</span> </li> </ul>

GitHubのドラゴンドロップ

DragonDropの3番目のバージョンが最近リリースされました。 使用に興味がある場合は、GitHubのDragonDropのドキュメントを参照してください。 Dragulaの作成者、Dragon Dropがマウスの操作に使用するモジュール、および素晴らしいロゴをデザインしたAaronPearlmanに特に感謝します。

ドラゴンの未来

将来、ドラッグアンドドロップインタラクションがWAI-ARIA技術仕様に追加された場合、ドラゴンドロップが非標準のインタラクションに依存し、ライブリージョンが変更される可能性があります。 可能な限り多くのスクリーンリーダーで十分にサポートされていることを確認し、最新のARIA仕様を最新の状態に保つために、引き続きテストを実行します。 さらに、タッチスクリーン/モバイルデバイスのサポートや複数列のリスト（スプリントボードなど）など、パイプラインにはかなりの数の機能があります。 将来追加される可能性のあるもう1つの機能は、Dragon DropReactコンポーネントです。

現在、以下のデモに示すように、Dragon DropはReactで使用できますが、リストの並べ替えによって発生したDOMの変更がReactによって検出されないため、予期しない動作が発生する可能性があるため、理想的ではありません。 Dragon Dropでバグを見つけた人、またはGitHubで問題を作成するための機能のアイデアを持っている人は誰でもお勧めします。 すべてのフィードバックと貢献を歓迎し、大いに感謝します！