WATSON AI

世界で最も柔軟な
アクセシビリティアシスタント

WATSON AIのインターフェースは、他のサイト訪問者(健常者)に影響を与えることなく、ユーザーが各々の状況や好みに合わせてウェブサイトのデザインやUIを個人的に調整することを可能にします。

バナナラボは、革新的なアイデアと高度な技術力を駆使し、世界中のお客様に最高のソリューションを提供しています。
私たちは、様々な分野でのニーズに応えるため、以下のようなサービスを提供しています。

ウェブ
アクセシビリティ

Web Accessibility

アクセシビリティ対応審査・改善
Webサイトやアプリケーションなどのデジタルコンテンツが、可能な限り多くの人に利用しやすいようにするアクセシビリティ対応のサービスを提供しています。

アクセシビリティ対応審査
アクセシビリティ改善
アクセシビリティ対応サイト・アプリ開発

ウェブ開発

Web Development

ホームページの企画・デザイン・開発
私たちは、ホームページの企画・デザイン・開発に関する幅広いサービスを提供しています。お客様のビジネスやブランドイメージに合わせたホームページを作り上げることで、集客力の向上やブランド認知度の向上など、様々なメリットを提供しています。

企画
デザイン
開発

ウェブデザイン

Web Creative

現場・ウェブ用の販促物作成
現場やウェブで使用する販促物の制作サービスを提供しています。お客様のニーズに合わせて、魅力的で効果的な販促物を制作することで、商品やサービスのPRをサポートします。

販促物の制作において、お客様の目的やターゲットに合わせた最適なデザインやコンテンツを提供することで、ビジネスの成長をサポートいたします。豊富な実績と経験を活かし、お客様のニーズに合わせた販促物制作をご提供いたします。

現場用販促物の制作
ウェブ用販促物の制作

ウェブコンサルタント

Web Consultation

当社のウェブコンサルタントサービスは、企業のWebサイトやWebプロモーションの課題を解決し、ビジネスの成長を促進するためのサポートをトータルにサポートすることで、ビジネスの成長を促進します。

Web戦略の立案
Webサイトの改善提案
Webプロモーションの企画
Webセミナー・研修の開催
業務改善・自動化ツールの導入
各々の状況や好みに合う

世界で最も柔軟な
アクセシビリティ
アシスタント

WATSON AIのインターフェースは、他のサイト訪問者(健常者)に影響を与えることなく、ユーザーが各々の状況や好みに合わせてウェブサイトのデザインやUIを個人的に調整することを可能にします。

INDUSTRY-SCALE REVOLUTION

WATSON AIでどのホームページも
アクセシビリティ対応化

資料請求はこちら

Watson AIは、スクリーンリーダーの最適化やキーボードナビゲーションなど、より複雑なアクセシビリティ調整を担当します。自動化されているため、これらのバックエンドの調整を効率よく、手頃な価格で、妥当な期間内に行うことができます。

SCAN. ANALYZE. DEPLOY. MAINTAIN.

文脈を理解するAI技術

Webサイトのビジュアルは一般的で普遍的なものであるため、目の見えるユーザーがサイトの流れを追うのは簡単です。レイアウトが理にかなっていれば、私たちはウェブサイトのコーディング方法を気にすることはありません。

WatsonのAIは、サイトを分析する際に同じ「思考」プロセスを適用します。過去の数百万件の事例と要素や動作を視覚的に照合し、そのページで要素が実際に何をするのか、何を目的としているのかを文脈から学びます。

そして、スクリーンリーダーを使う視覚障がい者が、画面に表示されている内容や各要素の目的を、本来の意図通りに正確に反映できるように、必要なコード調整を行います。

COMPUTER VISION APPLIED TO ACCESSIBILITY

画像認識OCRのAI技術

Watsonは、サイト上のすべての画像をスキャンします。代替テキスト(Alt属性)が欠けている場合は、OCRを使用して埋め込まれたテキストを抽出し、IRIS技術を使用して画像を構成するオブジェクトを学習します。

それからWatsonはこれらの画像に対して、正確で精巧な代替テキストを自動的に提供します。目の不自由なユーザーがサイトに入ると、スクリーン・リーダーはこれらの説明を頼りに、ページに何があるかを伝えることになります。

ONGOING ACCESSIBILITY COMPLIANCE

24時間ごとのスキャンと分析で
「アクセシビリティ対応」の状態を
維持する

コンプライアンスを維持することは、最初にそれを達成することと同じくらい重要です。なぜなら、ウェブサイトは動的なものであり、コンテンツの更新、ブラウザの変更、パフォーマンスツールによる最適化など、常に更新が行われるからです。これらの変更はコンプライアンスを損なう可能性があり、ほんの数回のアップデートでコンプライアンスが完全に崩壊することもあります。

WatsonのAIは、最低でも24時間に1回の割合で、すべてのサイトのすべてのページを再スキャンし、新しい更新が即座にコンプライアンスのために改善されることを保証します。

STREAMLINED WEB ACCESSIBILITY

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を含める必要があります。
A PERSONALIZED ACCESSIBILITY EXPERIENCE

WATSONの機能は?

Watsonは、サイト上のすべての画像をスキャンします。代替テキスト(Alt属性)が欠けている場合は、OCRを使用して埋め込まれたテキストを抽出し、IRIS技術を使用して画像を構成するオブジェクトを学習します。

それからWatsonはこれらの画像に対して、正確で精巧な代替テキストを自動的に提供します。目の不自由なユーザーがサイトに入ると、スクリーン・リーダーはこれらの説明を頼りに、ページに何があるかを伝えることになります。

機能一覧を見る