BLOG

ホームページ制作・Wordpress構築やHTML5やUnity3Dでのアプリ開発など
WEBやアプリ開発に関する技術的な内容をお届けいたします。

アクセシビリティ対応に役立つフロントエンドフレームワーク5選!


昨今の公共機関ではアクセシビリティを考慮したホームページが制作されています。アクセシビリティを考慮することは健常者以外へのアクセスを向上させるだけでなく基本的なユーザー体験(UX)を高めます。
アクセシビリティを考慮する上で、ある程度の知識と技術は必要になりますが、その上でホームページ制作・WEBサイト制作の手助けをするフロントエンドフレームワークをご紹介します。

1.Bootstrap

言わずと知れたTwitter社謹製のフロントエンドフレームワークです。Bootstrapで提供される各機能は、WAI-ARIAでのアクセシビリティに対応しているだけでなく、ある程度のデザイン性も確保しています。
アクセシビリティだけでなく、レスポンシブでデザイン性を確保するにあたりベースにできるフレームワークとしては一押しです。

2.Foundation

米ZURB社のフロントエンドフレームワークです。Foundationで提供される各機能は、もちろんWAI-ARIAに対応しています。
ただModal機能(DIalog)を表示しているときでも、フォーカスがモーダル以外の部分に移ってしまうのが少し気になるところです。

3.jQuery UI

WEB制作に携わるものでは誰も知らない人はいないでしょう、jQueryのUIフレームワークです。jQueryだけあってアクセシビリティに対してこなれた実装になっています。外見もCSSで制御すればうまく動作させられそうです。

4.Responsive

少し誤解を招きそうですが、「Responsive」というアクセシビリティに対応したフレームワークです。私たち日本人にとって、横書きは左から読むのが一般的ですが、右から読む言語も考慮して要素を左右逆転させる機能が盛り込まれていたりします。

5.Web Experience Toolkit

アクセシビリティに力を入れている国、カナダ政府が提供しているMITライセンスのアクセシビリティフレームワークです。
Web Experience Toolkitのサイト上でもサンプルが豊富でお手本にすれば間違いないといった感じでしょうか。

ただ提供されている各機能によって、Javascriptがバラバラになっていますので、多種の機能が必要とされるWEBサイト制作では少々使いづらいかもしれません。

まとめ

アクセシビリティに対応したフロントエンドフレームワークを各種見てきましたが、提供されている機能(コンポーネント)の動作やデザインに落としこむことを考えると、Bootstrapが利用しやすいかもしれません。