Niquelao » ウェブログアーカイブ » JavaScriptでアクセシブルなカレンダー（不要だが便利）

» ウェブログのアーカイブ » JavaScriptでアクセシブルなカレンダー（不要だけど便利） Niquelao - アクセシビリティ JavaScriptでアクセシブルなカレンダー（不要だけど便利） 2007年2月11日 投稿者：Rumoroso 日付を入力する必要があるフォームフィールドでは、ユーザー体験を向上させると同時にデータ形式の制御を強化するために、JavaScriptによるカレンダーを含めることができる。わかっている、禁句だ 、しかし慎重に制御しながら行えば、標準やアクセシビリティに関して悪影響を及ぼす必要はない。 目的 まず、2つの主要な目的を設定した。目的というよりは、構築する際の作業指針となったものだ： アクセシブルで非侵入的であること。明らかに、JavaScriptのサポートがない場合はカレンダーを展開するオプションは提供されないが、サポートがあるなら…生成されるコンテンツをアクセシブルで利用可能にしない手はないだろう？ 実装と使用が簡単であること。自分のウェブページに実装したいプログラマーが追加コードを導入する必要がないような方法を模索した。CSSで様々な種類のセレクタ（要素、id、クラス…）を使ってドキュメントの各部分にスタイルを関連付けるように、同じことを動作の関連付けに使えないだろうか？ さらに、副次的な目的として：最適化、汎用化、国際化…（現実的に、ナンパする目的と金儲けする目的は削除せざるを得なかった。） 例 動作を確認するには、例にアクセスしてダウンロードできる 。 ドキュメントへの組み込み カレンダーをドキュメントに組み込むのは、対応するscript要素をheadに含めるだけの簡単さだ： カレンダーは「fecha」クラスを含む任意のテキストフィールドに対して読み込まれる。日付の形式はスクリプトの最初の行で設定する。例えば、日付を日/月/年の順にし、日が1桁の場合は前に0を付けず、月には必要に応じて0を付ける場合： var formato = ‘d/mm/y’; テキストフィールドの横にカレンダーを表示するには、そのフィールドに「fecha」クラスを付ける必要がある。さらに、すべての可能なパラメータはクラスとして導入する。完全なリストは以下の通り： カレンダーを読み込む（必須）：fecha 今日より前の日付：prev 今日より後の日付：post 年の範囲：rangX（Xは年数） 当日を含めない：todnact 利点 これに帰属できる利点としては： 使いやすく実装が簡単。 非侵入的。 コードと生成されるコンテンツはアクセシブル（マークアップ、構成、コンテンツ…）であり、支援技術（スクリーンリーダー…）の使用を通じて利用可能。この点では、表示時、動作中、消滅時のフォーカスがどこに落ちるかが考慮されている。つまり、表示されるとフォーカスは直接年に直接落ち、そこからタブ移動する際に論理的な順序に従い、カレンダーが閉じられると（閉じるリンクまたは日付選択後）、フォーカスは関連付けられていたテキストフィールドに落ちる。 デバイスに関係なく、そのナビゲーションが容易になる。ウェブを閲覧できる任意のデバイスを使ってナビゲートできる。 そのパラメータは簡単に設定でき、呼び出しは非常にシンプル（クラス名の使用による）。 言語は親ドキュメントから直接取得し、新しい翻訳をコードに追加できる。ドキュメントに言語が宣言されていない場合（起こるべきではないが）、デフォルトでスペイン語が使用される。現在、スペイン語に加えて英語を含む。さらに、アメリカ英語かどうかを認識するようにした。内容が変わるからではなく、曜日の配置を変えるためだ（日曜日が最初に来る）。 カレンダーに適用されるスタイルは、スクリプトを通じてリンクされたCSSによって含まれるため、サポートがない場合はそのスタイルシートが呼び出されず、ドキュメントのダウンロードが最適化される。 テーブルの任意のセル（アクティブな日、非アクティブな日、当日）にスタイルを適用できるようにクラスが含まれており、土曜日や日曜日専用のスタイルもある。 生成されるコード 以下にスクリプトによって生成されるコードの一部を含める。見てわかるように（そしてすでに述べたように）、スタイルシートを通じてレイアウトを制御できるようにクラス名とidが含まれている。

結論 締めくくりとして…このカレンダーについて何が言えるだろうか？…それは「不要だけど便利」であり、「アクセシビリティの観点で悪影響を及ぼさない」ということだ。 …ところで、今日は何日だろう？ カテゴリー：アクセシビリティ、Javascript —> 2件のコメント juan 2007年3月16日 素晴らしいですが、日付を選択したり年を移動したりするときに時々エラーが発生し、IEが動作しなくなり、Firefoxでも同様です。何が原因かわかりますか？ Rumoroso 2008年8月21日 フィールドの内容を送信していないのか、実際に変数を送信していないのかを確認してください。スクリプトはフォームの送信に干渉しないので、問題は別のところから来ている可能性があります。よろしく コメントのフォローはRSS 2.0フィードで可能です 。また、コメントを残す か、あなたのサイトからトラックバックを送ることもできます。 前の記事：Enhorabuena TAW 次の記事：acc_calendar v1.1 コメントを残す 名前とメールのフィールドは必須です 追加する… 特に注目するタグ 一般 アクセシビリティ bert bos blockquote bug cañas 引用 cite 動作 知識 CSS escuas 標準 fieldset Firefox 形式 フォーム ソース hidden ie IE 7 情報 javascript legend リスト niquelando 必須 opera ビーチ q squash 休暇 w3c WCAG xhtml この作品はCreative Commonsのライセンスの下にあります 。

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.