今年、Web Payments(Web上のオープンな金銭取引の標準化)が大きく動く?

 これまでW3CのComunity Groupレベルで検討が進められていたWeb Payments(Web上のオープンな金銭取引の標準)が2013年になって、少し、もしかすると大きく進展することになりそうです。W3Cが力を入れるようになったということなのでしょうか。

 W3CのブログとW3C Wikiによると、Web Paymentsについて、W3Cは今後以下のような活動を予定しているそうです。

  • W3C Advisory Committeeでの報告(2013年6月か7月。開催地は東京?)
  • 外部有識者の招聘
  • ニーズを調査するための開発者を対象としたアンケートの実施
  • キーステークホルダーとの直接的なコンタクトDirect contact with key stakeholder groups (who?)
  • Web Paymentsのスコープが明らかにできた段階で、2013年後半にWeb Paymentsに関するワークショップの開催
  • 公式の報告書の発行

 
 Payment Task Forceなんて、いつの間に立ち上がっていたのだろうか・・・。Wikiの履歴を見る限り、2013年になってからのようですが。
 どちらにしても特定のプラットフォームに依存しなくても、Web上のお金のやり取りができるようになれば、プラットフォーム非依存なコンテンツの流通に大きく寄与すると思われますので、期待したいところです。

関連エントリ

 
 

Google Chrome がWebに音声認識機能を埋め込めるWeb Speech API に多言語で対応。WebへのTTS機能埋め込みも可能?

 Google Chromeが安定版のver. 25でWebアプリに音声認識機能を埋め込めるWeb Speech APIに対応しました。しかも、日本語を含む多言語対応です。音声でウェブアプリを操作するといったことが可能になるようです。
 Googleの中の人による紹介動画が公開されています。 

 Googleがデモサイトを公開していますので、音声認識の精度を実際に試すことが可能です。

Web Speech APIの仕様には、このAPIのユースケースとして以下が挙げられています。Web Speech APIはWebの音声入力(speech-input)と自動音声読み上げ(Text-To-Speech)の制御をJavaScriptによって実現することを目的としているようですが、自動音声読み上げ(Text-To-Speech)に該当するものがない・・・?

  • Voice Web Search
  • Speech Command Interface
  • Domain Specific Grammars Contingent on Earlier Inputs
  • Continuous Recognition of Open Dialog
  • Domain Specific Grammars Filling Multiple Input Fields
  • Speech UI present when no visible UI need be present
  • Voice Activity Detection
  • Temporal Structure of Synthesis to Provide Visual Feedback
  • Hello World
  • Speech Translation
  • Speech Enabled Email Client
  • Dialog Systems
  • Multimodal Interaction
  • Speech Driving Directions
  • Multimodal Video Game
  • Multimodal Search
参考

 

Web Speech APIとSpeech Input API

 Web Speech APIの他にフォームに音声入力機能を追加するSpeech Input APIというAPIがあり、こちらはChrome 11から対応しています。input要素にspeech属性を追加するだけなので、実装は非常に簡単です。

 Web Speech APIとSpeech Input APIは機能的に被っている部分があります。どちらもGoogleが提案したAPIのようですが、そのあたりの経緯は以下で説明されています。Speech Input APIを提案した後により広範なWebの音声入出力を扱うWeb Speech APIをJavaScirptベースのAPIとして提案したようです。

参考

 

Text-To-Speech(自動音声読み上げ)機能

 ここからは、勉強不足ということもあり、憶測が混ざります。ご注意ください。
 Web Speech APIによって、Text-To-Speech(自動音声読み上げ)機能をJavaScriptで制御することが可能になります。これがBookshareが提供するブラウザ版電子書籍リーダーでのTTS(自動音声読み上げ)機能でおそらく活用されているのではないかと思われます(Googleの公式ブログが言及しているので)。Google Chromeは2011年にTTS APIを公開TTSエンジンを搭載※していますので、それを使用しているのでしょうか。
※2013-07-08追記
Chrome自身がTTSエンジンを搭載したのではなく、OSなどが搭載しているTTSエンジンを利用するためのAPIを公開したという話でした。誤った情報を流してしまい、大変申し訳ありませんでした。
Chrome Text To Speech – Beautiful Google – Google活用の仕方
  以下の動画で紹介されていますが、テキストを読み上げながら、読み上げる箇所をハイライト表示しています。

参考

アクセシビリティに配慮した顔文字、ASCIIアートの代替テキストの提供

 顔文字、ASCIIアートがスクリーンリーダーなどの読み上げで大変なことになることはお察しのとおりかと思いますが、これらをアクセシブルにするための代替テキストの提供方法がW3Cの以下のドキュメントにまとめられています。

 と、いいつつも、実はこれから紹介する方法はブラウザ、スクリーンリーダーなどの支援機器が充分にサポートしていないようです。現時点では、アクセシビリティを確保するためには、ASCIIアート、顔文字を使わないほうがよいようです。

 というわけですので、以下はあくまで参考情報として紹介します。

顔文字

例1 隣接する位置に説明するテキストを配置

 ASCIIアートや顔文字のすぐ隣にそれを説明するテキストを配置します。

=8-0(恐怖)

 上の事例では、
 「=8-0」部分がそのまま読まれてしまいますので、この部分がユーザーの混乱を招く恐れもありそうですが、必要最低限の措置としては有効かもしれません。

例2 abbr要素のtitle属性を使用する

 省略語を表すabbr要素のtitle属性を使用します。

<abbr title="恐怖">=8-0</abbr>

  title属性の読み上げに対応している機器やアプリケーションが十分でないようです。また、abbr要素は略語をマークアップするための要素なので、abbr要素の本来の使い方から外れてしまっている問題もあります。
 

参考

例3 画像化し、img要素のalt属性を使用する

 顔文字を画像化してしまい、img要素のalt属性を使用する事例です。

<img src="fright.gif" alt="恐怖"/>

 画像化してしまっては、あえてテキストで絵的に表現する意味が失われてしまいますが、alt属性をサポートするブラウザやアプリケーションは多いため、有効な方法です。
 

ASCIIアート

事例4 スキップリンク

コード例


 さし絵:蝶のASCIIアート
 <a href="#skipbutterfly">ASCIIアートをスキップ</a>
                                                                LLLLLLLLLLL
                                                            __LLLLLLLLLLLLLL
                                                           LLLLLLLLLLLLLLLLL
                                                         _LLLLLLLLLLLLLLLLLL
                                                        LLLLLLLLLLLLLLLLLLLL
                                                      _LLLLLLLLLLLLLLLLLLLLL
                                                      LLLLLLLLLLLLLLLLLLLLLL
                                              L     _LLLLLLLLLLLLLLLLLLLLLLL
                                             LL     LLLLLL~~~LLLLLLLLLLLLLL
                                            _L    _LLLLL      LLLLLLLLLLLLL
                                            L~    LLL~        LLLLLLLLLLLLL
                                           LL   _LLL        _LL   LLLLLLLL
                                          LL    LL~         ~~     ~LLLLLL
                                          L   _LLL_LLLL___         _LLLLLL
                                         LL  LLLLLLLLLLLLLL      LLLLLLLL
                                         L  LLLLLLLLLLLLLLL        LLLLLL
                                        LL LLLLLLLLLLLLLLLL        LLLLL~
                  LLLLLLLL_______       L _LLLLLLLLLLLLLLLL     LLLLLLLL
                         ~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~       LLLLLL
                       ______________LLL  LLLLLLLLLLLLLL ______LLLLLLLLL_
                   LLLLLLLLLLLLLLLLLLLL  LLLLLLLL~~LLLLLLL~~~~~~   ~LLLLLL
             ___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____       _LLLLLL_
          LLLLLLLLLLL~~   LLLLLLLLLLLLLLL   LLLLLLLLLLLLLLLLLL     ~~~LLLLL
      __LLLLLLLLLLL     _LLLLLLLLLLLLLLLLL_  LLLLLLLLLLLLLLLLLL_       LLLLL
     LLLLLLLLLLL~       LLLLLLLLLLLLLLLLLLL   ~L ~~LLLLLLLLLLLLL      LLLLLL
   _LLLLLLLLLLLL       LLLLLLLLLLLLLLLLLLLLL_  LL      LLLLLLLLL   LLLLLLLLL
  LLLLLLLLLLLLL        LLLLLLLLLLLLL~LLLLLL~L   LL       ~~~~~       ~LLLLLL
 LLLLLLLLLLLLLLL__L    LLLLLLLLLLLL_LLLLLLL LL_  LL_            _     LLLLLL
LLLLLLLLLLLLLLLLL~     ~LLLLLLLL~~LLLLLLLL   ~L  ~LLLL          ~L   LLLLLL~
LLLLLLLLLLLLLLLL               _LLLLLLLLLL    LL  LLLLLLL___     LLLLLLLLLL
LLLLLLLLLLLLLLLL              LL~LLLLLLLL~     LL  LLLLLLLLLLLL   LLLLLLL~
LLLLLLLLLLLLLLLL_  __L       _L  LLLLLLLL      LLL_ LLLLLLLLLLLLLLLLLLLLL
 LLLLLLLLLLLLLLLLLLLL        L~  LLLLLLLL      LLLLLLL~LLLLLLLLLLLLLLLL~
  LLLLLLLLLLLLLLLLLLLL___L_ LL   LLLLLLL       LLLL     LLLLLLLLLLLLLL
   ~~LLLLLLLLLLLLLLLLLLLLLLLL     LLLLL~      LLLLL        ~~~~~~~~~
           LLLLLLLLLLLLLLLLLL_ _   LLL       _LLLLL
               ~~~~~~LLLLLLLLLL~             LLLLLL
                         LLLLL              _LLLLLL
                         LLLLL    L     L   LLLLLLL
                          LLLLL__LL    _L__LLLLLLLL
                          LLLLLLLLLL  LLLLLLLLLLLL
                           LLLLLLLLLLLLLLLLLLLLLL
                            ~LLLLLLLLLLLLLLLLL~~
                               LLLLLLLLLLLLL
                                 ~~~~~~~~~
<a name="skipbutterfly></a>            

 
 こういうやる夫系はどうするんだろう・・・・。

       ____
     /      \
   /  _ノ  ヽ、_  \
  / o゚((●)) ((●))゚o \  ほんとはVIPでやりたいんだお…
  |     (__人__)    |
  \     ` ⌒´     /
       ____
     /      \
   /  _ノ  ヽ、_  \
  /  o゚⌒   ⌒゚o  \  でもVIPPERはクオリティ高いスレしか相手してくれないお・・・
  |     (__人__)    |  
  \     ` ⌒´     /
       ____
     /⌒  ⌒\
   /( ●)  (●)\
  /::::::⌒(__人__)⌒::::: \   だからニュー速でやるお!
  |     |r┬-|     |
  \      `ー'´     /

 

参考

例5 画像化し、img要素のalt属性を使用する

 ASCIIアートを画像化してしまい、img要素のalt属性を使用する事例です。

<img src="yaruo.gif" alt="だからニュー速でやるお!と言っているやる夫"/>

 画像化してしまっては、あえてテキストで絵的に表現する意味が失われてしまいますが、alt属性をサポートするブラウザやアプリケーションは多いため、有効な方法です。
 

(2014/12/6追記)例6 figure要素とWAI-ARIAのrole属性を使う

WAI-ARIAのrole属性を解釈できるユーザーエージェントであれば、ASCIIアートを画像に相当するものであると、解釈させることもできるようです。
 詳細は、@momdo_ さんの以下のブログをご参照ください。

関連エントリ

ウェブアクセシビリティガイドラインについて
代替テキスト
リンクのはり方