タグ

2021年3月5日のブックマーク (3件)

  • aria-expandedのよくある間違い | masuP.net

    WAI-ARIAの中で、コンテンツが展開されているかどうかの状態を表すaria-expandedは、WAI-ARIAの中でもよく使われている属性のうちの一つ[注1]ですが、誤った使い方をみかけることも少なくありません。また私自身も間違った理解のまま使用していた時期もありました。 [注1] : 出典 Usage of ARIA attributes - Analysis - Discuss - HTTP Archive そこでaria-expandedのよく見かける間違いと、仕様に基づいた正しい使い方をまとめました。 間違いその1:aria-hiddenとaria-expandedを混同する aria-expanded は要素、または要素が制御する別のグループ化要素が、現在展開されるまたは折りたたまれるかどうかを示す。ステートです。要素そのものが隠れているかどうかを示すaria-hidden

    aria-expandedのよくある間違い | masuP.net
  • JavaScript で英数字や記号を全角から半角へ変換する方法

    ブラウザ上で半角入力の制御は CSS の ime-mode プロパティが存在します。しかしこれは Internet Exporer 独自のものなので、Chrome ブラウザなど対応していないブラウザも存在します。 全角入力を拒否するような制御を JavaScript に組み込むことも可能ですが、半角に直してもう一度同じ内容を入力させる仕様は最適な対応方法ではないと考えています。 そこでユーザビリティを損なわず、故意ではない全角入力を許容するために、英数字や記号を全角から半角に変換する処理を提案させていただきます。 全角から半角へ変換するメリットある特定項目のデータを半角で統一することで、生まれるメリットもたくさんあります。例えば、検索画面で対象となるデータは、全角と半角が混在していると部分一致の条件を拡張しなくてはいけないので抽出するのが大変です。 Oracle であれば TO_SINGL

    JavaScript で英数字や記号を全角から半角へ変換する方法
  • 端末がタッチ(タップ)に対応しているか確認する | GRAYCODE JavaScript

    ブラウザを表示している端末がタッチ可能かどうかを調べる方法について解説します。 この記事のポイント 端末がタッチに対応しているかを調べる PCのブラウザのエミュレータでiOS/Androidにしてもタッチ対応と判定する タッチに対応しているか判定する イベントハンドラのontouchstartプロパティ�はブラウザを表示している端末がタッチに対応しているときは存在し、対応していない場合は存在しない状態になります。 そこで、このプロパティが「undefined」かどうかを調べることがまず1つのヒントとなります。 iPhoneでwindow.ontouchstartを参照 加えて、同時に対応できるタッチの数をnavigatorオブジェクトのmaxTouchPointsプロパティから参照することで、より確実にタッチに対応しているかを調べることができます。 このタッチの数は1以上であればタッチに対

    端末がタッチ(タップ)に対応しているか確認する | GRAYCODE JavaScript