アクセシビリティー

アクセシビリティーが重要な理由

今日のデジタル環境では、すべてのユーザーに対するフロントエンド UI のアクセシビリティーの確保は、単に望ましいことではなく、必要不可欠なことです。Axon Ivy は、能力や障害にかかわらず、誰もがポータルを利用できるようにすることの重要性を認識しています。このことを念頭に置いて、私たちは Axon Ivy Portal のアクセシビリティー機能の強化についてじっくりと検討しました。この取り組みは始まったばかりで、今後もアクセシビリティー機能の向上に継続的に注力していきます。最高品質を確保するため、私たちは Microsoft Lighthouse アクセシビリティーチェッカーなどのツールを使用し、WCAG 2.1 規格のガイドラインに従って、UI を評価、改良しました。

Axon Ivy Portal におけるアクセシビリティーへの取り組み

私たちは包括的にアクセシビリティーに取り組んでおり、最も重要なインクルーシブなエクスペリエンスの実現に向けて力を注いでいます。以下は、私たちが評価、改善した主な領域です。

コントラスト

テキスト、ボタン、背景の要素のコントラストは、視覚障害があるユーザーにとって非常に重要です。WCAG 2.1 規格で定められたコントラスト比に従って、ダークモードとライトモードの両方で UI を最適化しました。ボタン、ウィジェット、背景を含むすべてのコンポーネントが必要なコントラスト閾値を満たすように徹底することで、見やすさと読みやすさを高めます。

ズーム機能

ポータルのデスクトップ版とモバイル版の両方で、ズーム機能を改良しました。UI の見やすさと使いやすさはそのままに、簡単に拡大縮小できるため、テキストや画像を拡大する必要があるユーザーも快適にポータルを操作できます。

キーボードナビゲーション

ポータルでのユーザーエクスペリエンスを効率化する基本的なキーボードショートカットを導入しました。ユーザーは素早く簡単に主要なセクションを移動できます。

Alt + 1：ダッシュボードにジャンプします。
ダッシュボードのサブナビゲーション：ナビゲーションバーに複数のダッシュボードが表示されている場合、 Tab キー を使用してダッシュボードを順に切り替えることができます。目的のダッシュボードが強調表示されたら、 Enter を押して開きます。
Alt + 2：プロセスセクションにジャンプします。
Alt + 3：タスクセクションにジャンプします。
Alt + 4：ケースセクションにジャンプします。
Alt + 5：統計セクションにジャンプします。
Alt + 6：検索セクションにジャンプします。
Alt + 7：ユーザー設定にジャンプします。

ウィジェットのナビゲーション

タスクウィジェット：Alt + W を押すと、タスクウィジェットの最初のタスクにフォーカスします。もう一度押すと、リストの次のタスクにフォーカスが移動します。
ケースウィジェット：Alt + Q を押すと、ケースウィジェットの最初のケースにフォーカスします。その後は押すたびに、リストの次のケースにフォーカスが切り替わります。
プロセスウィジェット：Alt + A を押すと、プロセスウィジェットの最初のプロセスにフォーカスします。その後は押すたびに、次のプロセスにフォーカスが切り替わります。

リストの最後の表示可能な項目に達した後にショートカットが押されると、ポータルはスクロールダウンします。リストの最後の項目に達した後にショートカットが押されると、フォーカスが最初の項目にジャンプします。

複数のタスク／ケースウィジェットのナビゲーション

画面に 2 つのタスク／ケースウィジェットが表示されている場合、フォーカスは 2 つのウィジェット間で順に切り替わります。最初のウィジェットの最後の要素に達した後、フォーカスは自動的に 2 番目のウィジェットの最初の要素に移動します。ウィジェットが 1 つのみの場合、最後の要素に達した後、フォーカスが最初の要素に戻り、連続的なナビゲーションを行えます。

拡張機能

タスクウィジェットのナビゲーション

タスクウィジェットのナビゲーションを使用して、キャンセルしたタスクのポップアップに直接移動することもできます。

reset-task-dialog

また、ウィジェット内でアクションを移動できます。

task-actions-popup

Tab キーを押して、タスクのアクションにフォーカスを設定できます。目的の行に移動したら、 Enter を押してコンテキストメニューを開きます。その後は再びキーボードショートカットを使用して、メニュー内を移動できます。 Esc キーを使用して、いつでもコンテキストメニューを終了できます。

タスクのナビゲーションの例

特定のタスクを選択したい場合、 Alt + W を押して、最初のタスクにフォーカスします。関連するアクションにアクセスするには、 Tab キー、 Enter の順に押します。コンテキストメニューが開きます。複合キーを繰り返し押して、メニュー内を上から下に移動できます。メニューを終了するには、 Esc を押します。

ケースウィジェットのナビゲーション

ケースウィジェットのナビゲーションでも、ケースのアクションに移動できます。

case-actions-popup

キーボードショートカットを押して、ケースにフォーカスし、 Enter を押して、コンテキストメニューを開きます。再びショートカットを押してメニュー内を移動するか、 Esc を押してメニューを終了できます。

ケースのナビゲーションの例

特定のケースを選択するには、 Alt + Q を押して目的のケースに移動します。関連するアクションにアクセスするには、 Enter を押してコンテキストメニューを開きます。ショートカットを繰り返し押してメニュー内を移動するか、 Esc を押してメニューを閉じます。

ブラウザとキーボードの互換性

これらのショートカットは Chrome、Firefox、Edge で利用可能で、ヨーロッパ、アジア、米国のキーボードレイアウトでシームレスに動作します。

タスク、ケースリストの拡張記述要素

ポータルのナビゲーションとアクセシビリティーを向上するため、プロセス、タスク、ケースに素早くアクセスするためのショートカットを実装しただけでなく、さらに詳しく説明する記述要素をウィジェットに追加しました。これらの拡張により、重要な情報をより明確に詳しく表示し、スクリーンリーダーの最適なサポートを実現します。

Microsoft ナレータースクリーンリーダーのサポート

Microsoft ナレーターにより、スクリーンリーダーをサポートします。キーボードショートカット Ctrl + Windows キー + Enter で起動できます。これにより、視覚障害があるユーザーは簡単にポータルを操作し、表示される情報を理解できます。

タスクウィジェットの記述要素

ショートカットにより、タスクリストの最初の強調表示された要素を起動し、以下の情報を読み上げます。

タスク名：タスクの名前またはタイトル。
優先度：タスクの優先度（高、中、低など）。
ステータス：タスクの現在のステータス（実行中、完了、未完了など）。
有効期限：タスクの期限。

ユーザーがキーボードショートカットを使用して最初のタスク要素にフォーカスすると、スクリーンリーダーは、「タスクの開始 - タスク名： <task name> - 優先度： <priority> - ステータス： <status> - 有効期限： <expiry date>」の形式で情報を読み上げます。

ケースウィジェットの記述要素

ケースリストでも、追加情報が強調表示されるアクションフィールドに埋め込まれています。

ケース名：ケースの名前またはタイトル。
状態：ケースの現在の状態（未完了、完了、削除済みなど）。
作成日：ケースの作成日。
完了日：ケースの完了日。
オーナー：ケースの現在のオーナー。

ユーザーがキーボードショートカットを使用して最初のケース要素にフォーカスすると、スクリーンリーダーは、「ケース名： <case name> - 状態： <state> - 作成日： <creation date> - 完了日： <finish date> - オーナー： <first owner name>」の形式で情報を読み上げます。

選択されたタスクやケースが「完了」状態にない場合、現在のステータスをユーザーに伝えるため、関連するすべての詳細が読み上げられます。

スクリーンリーダーの言語のサポート

スクリーンリーダーが正しく機能するようにするため、言語設定を HTML ページ要素に直接組み込みました。これらの設定はユーザーの言語設定を優先するため、スクリーンリーダーはユーザーが指定した言語でコンテンツを読み上げることができます。これらの調整により、視覚障害を持つユーザーの完全なアクセシビリティーを実現し、ポータルでのエクスペリエンスを大幅に拡充します。

ボタンの代替テキスト

スクリーンリーダーが容易に識別できるように、ボタンを含む多くの要素に ARIA（Accessible Rich Internet Applications）属性を実装しました。支援技術を利用するユーザーは、より効果的にポータルを操作できます。