ページの本文へ

Hitachi

企業情報研究開発

RIA(リッチインターネットアプリケーション)の開発現場では、アクセシビリティの確保に工数がかかってしまうという課題があります。そこで日立は、アクセシブルなRIAを効率よく開発できるようにするため、ユーザビリティにも配慮したアクセシブルな汎用UI部品を開発し、社内で共有しています。これらの部品を評価するために業務アプリケーションを想定したプロトタイプを開発し、スクリーンリーダーユーザーにも参加いただく形でユーザーテストを実施しました。その結果を受けて改善も図っています。

2011年10月31日更新

汎用UI部品の概要

開発状況一覧

以下に紹介する汎用UI部品は、Ajax (HTML5 & WAI-ARIA)または、Silverlight®で制作しています。次の表はそれぞれの開発状況です。

Ajax (HTML5 & WAI-ARIA) Silverlight
チェッカブルテキストボックス 開発中 未定
ユーザブルデータグリッド 開発中 開発済
カラーアジャスター 開発中 開発済
2重タブパネル 未定 開発済
スイッチボタン 開発中 開発済
モードメモリボタン 開発中 開発済

Silverlightは、米国Microsoft Corporationの米国およびその他の国における登録商標または商標です。

チェッカブルテキストボックス(CheckableTextBox)

「1000000000」を「10億」、「2011」を「今年/平成23年」と表示

入力した結果を別の認知しやすい形態で動的に示す各種テキスト入力ボックスです。例えば金額を入力する際に、100万と入力したいのに「10000000」と0を1つ多く入力してしまうなどの間違いを防ぐことが狙いです。数値以外にも、日付、時刻、年号などの入力ミスを防ぐテキストボックスを開発中です。動的に表示される内容をスクリーンリーダーで読み上げられないというのがこれまでのアクセシビリティの課題でしたが、その課題解決も図ろうとしています。

  • ※特許出願中

ユーザブルデータグリッド(UsableDataGrid)

大半の業務アプリケーションには多機能なデータグリッドがありますが、それらには共通して存在する機能も多いため、汎用化することで開発工数の軽減が図れるのではないかと考えています。また、UIを共通化することで、ユーザが利用する上での混乱も防げると考えられます。以下のような機能を実装しています。

  • 複数の条件を指定することが可能な絞込み検索(フィルタリング)機能
  • 列の入れ替え、表示列の変更、列幅変更が、マウスとキーボードの両方で操作可能
  • キーボードだけでリストを複数選択することが可能

カラーアジャスタブルWeb画面開発用ツール(ColorAdjuster)

このツールを用いて作られた画面は、文字や背景、枠線などの各要素の色をエンドユーザーがカスタマイズできます。その際、選択した色を中心とした25色が、色の識別が難しい特性を持つ人が見やすいかどうかという情報と一緒に示されるため、コンテンツの管理者がエンドユーザー各々の画面を一括してカスタマイズする場合でも問題が起こりにくいといえます。また、Web画面の開発者は、このツールを用いて画面を開発する際に、色の識別が難しい特性を持つ人にも見やすい配色にできます。

  • ※特許出願中/意匠権取得済

2重タブパネル(MultiStepTabPanel)

2つの階層からなるタブパネルです。多くの情報を少ない表示エリアで上手く見せることのできるUIなので、ニュースサイトなどでよく見られます。多機能で情報量が多いWebアプリケーションの場合にも活用のニーズはありますが、制作するのに工数がかかるという理由から汎用化しました。画面を見ることのできないユーザがスクリーンリーダーで操作する際にも、2重タブの構造が伝わるような工夫をしています。

スイッチボタン(SwitchButton)

機能としてはトグルボタンやラジオボタンが2つ並んだものと同じですが、その見た目を工夫したものです。ボタンを押すたびに、ボタンに書かれている文言が変わるトグルボタンでは、ボタンに書かれている文言が、押された後の状態を表すのか押すときの動作を表すのかがわからないという問題があります。その問題を解決できるUIとして制作しました。

モードメモリボタン(ModeMemoryButton)

モードメモリボタンのUI

コンボボックス(プルダウン)と、コンボボックスの中から選んだ機能を実行するためのボタンがセットになったUIです。一度選んだ機能は、次にその画面を表示したとき選ばれた状態になります。多機能なWebアプリケーションでは、全てのボタンを並べることができず、コンボボックス(プルダウン)の中にたくさんの機能を入れ込んでしまうことがあります。しかしエンドユーザにとっては、よく使う機能が決まっているのにたくさんの機能の中から毎回それを選ぶのが煩わしいと感じる場合もあるので、そのようなユースケースを想定して制作しました。