タグ

accessibilityとuiに関するsoratomoのブックマーク (5)

  • CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

    CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか? ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSでpxとememの各単位がどのように機能するか アクセシビリティに関する考慮事項 どの単位をどこで使用すればよいのか どの単位がベストなのかが明らかでない場合 簡単にできる小技とメンタルモデル ボーナス: remを使用すると便利なテクニック はじめに C

    CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相
    soratomo
    soratomo 2022/06/07
    line-heightとかfontに絡む部分にはrem使うことあるけど、それ以外は使ってないなぁ。62.5%テクニックは、開発者都合のテクだと思うので最近は使うのを避けてる。
  • 入力フォームのプレースホルダーを使ってはいけない

    入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル

    入力フォームのプレースホルダーを使ってはいけない
    soratomo
    soratomo 2014/06/17
    なるほど、消えた文字がなんだったのか気になって、選択状態を外すとエラー、もう〜(´・ω・`)となることも多々ある。
  • アクセシビリティから変わるビジュアルデザイン

    W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです(翻訳サイトより抜粋)。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければなら

    アクセシビリティから変わるビジュアルデザイン
  • プラグイン無しでページネーションを設置

    WordPressでは多くのページネーションを実装するプラグインがありますが、使用しているテーマにあったデザインで機能も必要なものだけにできるように、プラグイン無しでページネーションを設置する方法を紹介します。 How to build a WordPress Post Pagination without plugin [ad#ad-2] ここでは上記元記事で紹介されているものをノーマル版とし、コメントで投稿されている拡張版の二つを紹介します。 Pagination without plugin:ノーマル版 Pagination without plugin:拡張版 Pagination without plugin:ノーマル版 How to build a WordPress Post Pagination without plugin PHP テーマファイル内の「fuction.ph

  • フォームのテキストエリアをより使いやすくするテクニック集

    <textarea name="code" class="css" cols="60" rows="5"> textarea { background: url(images/benice.png) center center no-repeat; /* This ruins default border */ border: 1px solid #888; } </textarea>

    soratomo
    soratomo 2010/07/20
    jQueryで、入力時に非表示にするとか。
  • 1