お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
新規登録 UI まとめてみた｜あき
シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録まわりで離脱の少ないデザインを勉強したかったので、いくつかアプリをスクショしました。自分用で作成しましたが、誰かの参考になればと思います。 また、まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです〜。 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規登録のタイミング ・注意すべきデザインの視点 ・スクショの保管場所1. 登録必須型ユーザー登録なしではアプリが利用できないパターン。 傾向 母数としては一番多い形式。プロフィールが大切なフィットネス系では、利用前にかなりの入力を求
検索フォームをCSSでデザインするサンプル集 | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]検索ボックスをSafari風デザインにするスクリプト -Safari Searcher
jQuery Safari Searcher demo 検索ボックスのスタイルは通常用とインクリメンタルサーチ用が用意されており、ダウンロードできるファイルには画像やアニメーションgifなど一式が揃っています。 ボックスの幅の対応は画像が500pxのため、それより小さい幅まではそのまま対応できると思います。 Safari SearcherはjQueryのプラグインのため、実装にはjquery.jsが必要です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
