ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近、Webにおけるアクセシビリティという言葉が注目されています。それだけWebが一般化されてきたということでしょう。単純に文字が大きければ良いという訳ではなく、万人にとって使いやすいシステムというのを考えなければなりません。

そのアクセシビリティに注目して作られたモーダルライブラリがModaalです。

Modaalの使い方

Modaalはアクセシビリティの基準であるWCAG 2.0のレベルAAに準拠して開発されています。デモコードです。まずはフォーム。

ブラウザいっぱいに出すこともできます。

画像。この辺りのバツ印の出す場所も大事なのでしょう。

確認モーダル。背景色と前景色のコントラストも大事なのだと思います。

Instagramの表示。

Modaalはiframe/Ajax、単数/複数画像、動画など多彩なコンテンツに対応しています。アクセシビリティの高いモーダルで、誰にとっても使いやすいシステムを目指す方はぜひ使ってみましょう。

ModaalはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Modaal is a WCAG 2.0 Level AA accessible modal plugin

humaan/Modaal: An accessible dialog window library for all humans.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2