Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog > 2014年1月 > PayPalがBootstrap Accessibility Pluginを公開

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

2014年1月31日

PayPalがBootstrap Accessibility Pluginを公開

アクセシビリティ・エンジニア 黒澤

PayPal EngineeringブログでBootstrapフレームワークをよりアクセシブルにするBootstrap Accessibility Pluginの紹介記事が公開されています。Bootstrap Accessibility PluginBootstrap 3向けのプラグインで、いくつかのウィジットに対するキーボード操作の強化やWAI-ARIAのサポートなどが追加されます(他にもalertウィジットのコントラスト比が向上します)。

例えば、tabウィジット(タブ)はBootstrap Accessibility Pluginによって自動的にWAI-ARIAの属性が追加され、タブとしての意味をもつようになります。それにあわせ、タブを切り替える操作も変更されています。もともとのBootstrapではタブのつまみ部分にフォーカスをあてている状態でTabキーを押して隣のつまみに移動し、Enterキーなどを押すと表示されるコンテンツが切り替わりますが、Bootstrap Accessibility Pluginではタブのつまみ部分にフォーカスをあてている状態で、矢印キーを押すと表示されるコンテンツが切り替わります。この動作はデスクトップのアプリケーションにおけるタブの挙動に近いものです(もし皆さんがお使いのブラウザーにタブが複数表示されていたら、タブのつまみ部分にフォーカスを合わせて矢印キーを押してみてください)。なお、WAI-ARIA 1.0 Authoring PracticesのTab Panelデザインパターンでも同様のキーボード操作が挙げられています。

また、carouselウィジット(カルーセル)はWAI-ARIAのlistboxロールとして実装されています(以前、当BlogのカルーセルとWAI-ARIAで紹介した記事ではtabロールで実装するのがストレートな方法とされていますが、この違いは何に由来するものなのか興味深く思います)。このcarouselウィジットではWAI-ARIA対応(とlistboxとしてのキーボード操作)に加えて、カルーセルのスライドを切り替えるボタン(前や後)も変更されています。Bootstrapでは切り替えボタンはアイコンフォントのみで実装されていますが、Bootstrap Accessibility Pluginを導入するとPreviousとNextというテキストが追加されます(画面では1px四方に切り抜かれているため目で見ることはできません)。なお、PreviousとNextはJavaScriptファイルにハードコードされているため日本語でBootstrap Accessibility Pluginを使う場合には注意が必要です。

その他の機能もデモページで試すことができます。Bootstrap 3を利用している場合にはぜひ導入してみてはいかがでしょうか。

ミツエーリンクスでは、WCAG準拠JIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up