Niquelao » acc_calendar: アクセシブルなJavaScriptカレンダー（不要だが便利）

» acc_calendar: アクセシブルなJavaScriptカレンダー（不要だが便利） Niquelao どう仕上がったって？ 2007年7月7日 投稿者 Rumoroso —> アクセシビリティとJavaScript？ acc_calendar: アクセシブルなJavaScriptカレンダー（不要だが便利） 2008年6月1日更新、投稿者 Rumoroso 日付を入力する必要があるフォームフィールドでは、ユーザー体験を向上させると同時にデータ形式の制御を強化するために、JavaScriptによるカレンダーを含めることができます。ええ、禁断の言葉です。ただし、慎重に制御しながら行えば、標準やアクセシビリティに悪影響を与える必要はありません。 目的 まず、2つの主要な目的を設定しました。目的というよりは、構築する際の作業指針となったものです： アクセシブルで非侵襲的であること。もちろん、JavaScriptのサポートがない場合はカレンダーを展開するオプションは提供されませんが、サポートがあるなら…生成されるコンテンツをアクセシブルで利用可能にしない理由があるでしょうか？ 実装と使用が簡単であること。自分のウェブページに実装したいプログラマーが追加コードを導入する必要がない方法を模索しました。CSSでさまざまな種類のセレクタ（要素、id、クラスなど）を使ってドキュメントの各部分にスタイルを関連付けるように、同じことを動作の関連付けに使えないでしょうか？ さらに、副次的な目的として：最適化、汎用化、国際化…（現実的に、ナンパと金儲けの目的は削除せざるを得ませんでした。） ドキュメントへの組み込み まず最初に、スクリプトは完全なサンプルをダウンロードすることで直接入手できることをお伝えします。 ドキュメントへのカレンダーの組み込みは、対応するscript要素をheadに含めるだけです： カレンダーは、「fecha」クラスを含む任意のテキストフィールドに対して読み込まれます（ドキュメントの言語がスペイン語の場合）。日付の形式はスクリプトの最初の行で設定します。たとえば、日付を日/月/年の順にし、日が1桁の場合は前に0を付けず、月には必要に応じて0を付け、年の形式を4桁にする場合： var formato = ‘d/mm/yyyy’; すでに述べたように、テキストフィールドの横にカレンダーを表示するには、ドキュメントで宣言された言語がスペイン語の場合、そのフィールドに「fecha」クラスを付ける必要があります（英語の場合は「date」など）。これらのクラス名は、スクリプト内で直接変更したり、他の言語用に新しいものを追加したりできます。 さらに、すべての可能なパラメータはクラスとして導入されます。完全なリストは以下の通りです： カレンダーを読み込む（必須）：fecha 今日より前の日付：prev 今日より後の日付：post 年の範囲：rangX（Xは年数） 当日を含めない：todnact 利用可能な日付のフィルターを適用：disp AJAXでinputを動的に読み込む場合は？ このスクリプトには、AJAXで非同期的に新しいテキストフィールドがいつでも導入された場合、その読み込み後にcargaLinks()関数を呼び出すだけで、inputにカレンダーを開くためのリンクが関連付けられるという特性があります。 最初の例 今年の将来の日付、d/mm/yyyy形式（class=“fecha post”） 今年の将来の日付、d/mm/yyyy形式、今日を含めない（class=“fecha post todnact”） 生年月日、d/mm/yyyy形式、100年前まで（class=“fecha prev rang100”） 今後20年間の日付、d/mm/yyyy形式、今日を含めない（class=“fecha post rang20 todnact”） 過去15年間の日付、d/mm/yyyy形式（class=“fecha prev rang15”） 10年前から10年後までの日付、d/mm/yyyy形式（class=“fecha rang10”） 新機能（2007年4月） 場合によっては、日付を3つのテキストフィールドに分けて入力したいことがあります。それを可能にする機能を追加しました。そのためには、inputに割り当てられたクラスを使用してすべてを制御し続けます。グループを構成するには、3つのテキストフィールドにそれを識別するコードを追加する必要があります。奇妙に思えるかもしれませんが、そうでもありません。実際には、3つすべてでクラスとして使用する「fecha」という単語に、文字または数字を追加するだけです。たとえば、3つすべてに「fechaA」クラスを適用すると、すぐにカレンダーを開くためのリンクが関連付けられるだけでなく、グループとして動作するようになります。後でそれを明確に示す2つの例を掲載します。 各フィールドには、関連付けるデータに応じたクラスを付ける必要があります： 日のフィールドには「day」クラス 月のフィールドには「month」クラス 年のフィールドには「year」クラス 配置する順序は完全に自由で、カレンダー設定用のクラス（年数、前、後など）は、使用する最初のフィールドに配置します。次の例でその方法を確認できます： 2番目の例 今後10年間の日付、日、月、年形式： 日 / 月 / 年 重要な考慮事項は、どのフィールドが何のためのものかを常にユーザーに知らせることです。例では前のテキストで知らせており、さらにinputのラベルにも含まれています。 過去15年間の日付、年、月、日形式： 年 / 月 / 日 重要な考慮事項は、どのフィールドが何のためのものかを常にユーザーに知らせることです。例では前のテキストで知らせており、さらにinputのラベルにも含まれています。 更新（2007年4月） スクリプトを修正して、そこから適用されるスタイルを減らしました。現在、生成されるリンクは画像をコンテンツとして持っています（以前はスタイルシートから読み込まれていました）。リンクはinputの直後（label内に含まれている場合はその外）に生成され、以下のマークアップを持ちます： 3つのテキストフィールドに日付を読み込むためのリンクの場合、リンクのクラスは「enl_cal_group」になり、最初のフィールドの前に配置されます。 更新（2007年7月7日） から

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.