.png)
Watson AIは、スクリーンリーダーの最適化やキーボードナビゲーションなど、より複雑なアクセシビリティ調整を担当します。自動化されているため、これらのバックエンドの調整を効率よく、手頃な価格で、妥当な期間内に行うことができます。
文脈を理解するAI技術
Webサイトのビジュアルは一般的で普遍的なものであるため、目の見えるユーザーがサイトの流れを追うのは簡単です。レイアウトが理にかなっていれば、私たちはウェブサイトのコーディング方法を気にすることはありません。
WatsonのAIは、サイトを分析する際に同じ「思考」プロセスを適用します。過去の数百万件の事例と要素や動作を視覚的に照合し、そのページで要素が実際に何をするのか、何を目的としているのかを文脈から学びます。
そして、スクリーンリーダーを使う視覚障がい者が、画面に表示されている内容や各要素の目的を、本来の意図通りに正確に反映できるように、必要なコード調整を行います。
画像認識とOCRのAI技術
Watsonは、サイト上のすべての画像をスキャンします。代替テキスト（Alt属性）が欠けている場合は、OCRを使用して埋め込まれたテキストを抽出し、IRIS技術を使用して画像を構成するオブジェクトを学習します。
それからWatsonはこれらの画像に対して、正確で精巧な代替テキストを自動的に提供します。目の不自由なユーザーがサイトに入ると、スクリーン・リーダーはこれらの説明を頼りに、ページに何があるかを伝えることになります。
24時間ごとのスキャンと分析で
「アクセシビリティ対応」の状態を
維持する
コンプライアンスを維持することは、最初にそれを達成することと同じくらい重要です。なぜなら、ウェブサイトは動的なものであり、コンテンツの更新、ブラウザの変更、パフォーマンスツールによる最適化など、常に更新が行われるからです。これらの変更はコンプライアンスを損なう可能性があり、ほんの数回のアップデートでコンプライアンスが完全に崩壊することもあります。
WatsonのAIは、最低でも24時間に1回の割合で、すべてのサイトのすべてのページを再スキャンし、新しい更新が即座にコンプライアンスのために改善されることを保証します。
Watsonが解決できる、
多くのWebサイトに欠けている共通要件
ポップアップ
Watsonがフォーカスを移動、Escキーで解除可能に、スクリーンリーダー用タグも搭載
- ポップアップが表示されたら、キーボードのフォーカスはメインページから離れ、ポップアップの最初のクリック可能な要素内に戻ってこなければなりません。
- ポップアップ内でTabキーを使って移動する場合、最後の要素に到達して前に進もうとすると、ループして元に戻らなければなりません。
- ユーザーはEscキーでポップアップを閉じることができ、ポップアップの前にフォーカスされていた要素にフォーカスが戻らなければなりません。
- ポップアップには、"role "属性として "dialog "を指定する必要があります。
- ポップアップには、"true "と等しい "aria-modal "属性が必要です。
メニュー
Watsonはスクリーンリーダーにメニューを識別・解釈し、矢印キーによるナビゲーションを可能にします。
- すべてのリンクとメニュー項目を含むトップ要素には、"NAV "タグまたは " navigation / menu / menubar"（メニュータイプによって異なる）と等しい "role "属性が存在する必要があります（role=" navigation / menu / menubar"）。
- メニュー項目を構成するリンクには、"menuitem "と等しい "role "属性が必要である。
- ユーザーはTabキーで次の要素に、Shift+Tabで前の要素に移動でき、フォーカスリング（輪郭）を使ってフォーカスした要素を容易に識別できる必要があります。
- キーボードの左右の矢印を使って、メニューバーを移動することができます。メニューの最後に到達し、前進矢印キーを押すと、ナビゲーションは最初のアイテムにループバックします。
ドロップダウン
Watsonは、マウスを使えないユーザーのために、キーボードナビゲーションを可能にし、ナビゲーションフォーカスをロックアップします
- ユーザーは、Enterキーと矢印キーを使ってドロップダウンを開くことができます。ドロップダウンは、メニュー項目をフォーカスすることによっても開くことができます。
- ユーザーはドロップダウン内を上下の矢印で移動することができ、意図的に閉じない限り、ドロップダウン内でフォーカスが外れてループすることはない。
- ユーザーはEscキーでドロップダウンを閉じることができ、キーボードフォーカスはこのドロップダウンのルートメニュー項目に戻らなければなりません。
フォーム
フィールド要件とバリデーションを発表し、エラーメッセージと成功の両方を確認する。
- すべてのフィールドには、"id "と "for "属性、または "aria-label "属性によってフィールドに接続された "LABEL "タグを含める必要があります。
- 必須項目には視覚的な手がかり（アステリックス*、テキスト、その他）が必要で、"aria-required "属性はtrueに等しい。
- フィールドには、そのフィールドが現在有効か無効かをスクリーンリーダーに知らせるために、"aria-invalid "属性が含まれていなければならない。この属性は、バリデーションに応じて動的に変化しなければならない。例えば、空の必須フィールド "name "は、無効であることを示すためにaria-invalid="true "を含まなければならないが、ユーザーがそれを埋めるとaria-invalid="false "に変化する。
- フォームが送信され、エラーが発生した場合、キーボードフォーカスを最初の無効なフィールドに合わせ、このフィールドの問題点について、ユーザーに（視覚的にもスクリーンリーダーにも）説明を行わなければなりません。
- フォームが正常に送信された場合、スクリーンリーダーを使用している目の不自由なユーザーには、alert要素などを使ってその旨を知らせる必要があります。
リンク
Watsonは、空白または不十分なリンクテキストを識別し、ラベル付けし、修正します。
- テキスト、タイトル、またはアリア・ラベルを含む必要があります。
- 文書内で論理的に順序付けされていること（例えば、「続きを読む」は、タイトルとセクションの段落の後に来ること）。
- リンクは、Tabキーによるキーボード操作で到達可能なものでなければならない。
- リンクは、新しいウィンドウで開かれることを視覚的に示す必要があり、また、スクリーンリーダーに対しては、隠しテキストやタイトルを使ってその旨を告知する必要があります。
- リンクはページ上で目立つようにし、通常のテキストとは異なる外観にする必要があります。
アイコン
Watsonは文脈理解によりアイコンの目的を特定し、それに応じたタグ付けを行う
アイコンは、「ICON」タグや要素が存在しないため、特定のガイドラインが存在しません。アイコンの目的は（通常リンクやボタンとして）、ユーザーにとって普遍的に認識できるアクションを象徴することです。これはシンボルの視覚的な認識に基づいているため、accessWidgetは、アイコンが見えない、または認識できないユーザーのために、アイコンの目的またはアクションの説明を自動的に含めます。
画像
Watsonがフォーカスを移動、Escキーで解除可能に、スクリーンリーダー用タグも搭載
画像には、正しく、あるいはまったく見ることができないユーザーに対して、画像の中身を説明するためのAlt属性が必要です。バナナラボでは、画像認識技術により、テキストやオブジェクトの説明を引き出すだけでなく、画像の本質を記述しています。
例えば、ビーチで遊ぶ人々の画像に「水着が30％オフ」というテキストを添えれば、これらの要素をすべて説明する代替テキストを自動的に受け取り、スクリーンリーダーがそれをユーザーに伝えることができます。
ボタン
キーボード操作を可能にするために、ボタンとして動作するテキスト要素やリンク要素を特定する。
- ボタンは、テキスト、タイトル、またはアリアラベルを含む必要があります。
- 実際の "BUTTON "タグであるか、あるいは "button "と等しい "role "属性が存在する必要があります。
- ボタンには、text/aria-label/titleを含める必要があります。
WATSONの機能は？
Watsonは、サイト上のすべての画像をスキャンします。代替テキスト（Alt属性）が欠けている場合は、OCRを使用して埋め込まれたテキストを抽出し、IRIS技術を使用して画像を構成するオブジェクトを学習します。
それからWatsonはこれらの画像に対して、正確で精巧な代替テキストを自動的に提供します。目の不自由なユーザーがサイトに入ると、スクリーン・リーダーはこれらの説明を頼りに、ページに何があるかを伝えることになります。