React コンポーネントの「制御・非制御」を意識しない方法
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
Building dark mode on Stack Overflow - Stack Overflow
On March 30, 2020, we enabled folks to opt into a beta dark mode on Stack Overflow. Let’s talk about the work that went into it. Dark mode opt-in bannerI’m Aaron Shekey, Stack Overflow’s principal product designer on design systems. I help design all the interface components that get assembled into new features. First, a bit of irony. I don’t actually prefer dark user interfaces. I often find the
Preferreds-reduced-motion: 動きが少ないほうがよい場合もあります | Articles | web.dev
装飾的なアニメーションや切り替え効果を好む人はいません。また、動きを際立たせるユーザーもいます。 視差スクロールやズーム効果などで病気になったりします。ユーザー設定のメディアです。 クエリ prefers-reduced-motion を使用すると、 より優先される傾向があります。 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 74 <ph type="x-smartling-placeholder"></ph> 79 <ph type="x-smartling-placeholder"></ph> 63 <ph type="x-smartling-placeholder"></ph> 10.1 ソース 実生活やウェブでは動きが多すぎる 私は先日、子どもたちとアイススケートをしていました。太陽が輝き、氷が重なった素敵な日だった リンクは人々
CSS Gridとアクセシビリティについて気になっていたこと
前回の記事でCSS Gridは「魔法の杖」だと書きましたけど、1つ気になっていたことがあります。 それは、HTMLソースの順番（ソースオーダー）と視覚的な順番（ビジュアルオーダー）にまつわるアクセシビリティについてです。FlexboxでもそうなんですがCSS Gridを使うとCSSで表示順を変更することができます。そうするとHTMLソースにあるコンテンツの順番とブラウザで表示される順番が異なる場合が出てくるわけですね。 「でも、それってアクセシビリティ的にはどうなんだろう？」というのが気になっていました。 マルチデバイス対応のレイアウトを考える際、CSSで表示順を変えられるのはものすごく便利で、まさにここがCSS Gridの「魔法の杖」的な要素の一つでもあるわけです。でも、技術的にできるからといって考えなしにやっていいかというと、そんなことはないですよね。 調べてみたところ、CSS Gri
アクセシビリティを意識した CSS の書き方 - Frasco
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。 私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA
Bulletproof Accessible Icon Fonts Posted by Zach Leatherman 01/13/2014 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens w
ブラウザエンジン先端観測会 アウトラインメモ
ブラウザエンジン先端観測会 : ATND に参加してきたのでメモ。 途中から参加なのでServoの話は途中からです。 Twitterのログはこちら ブラウザエンジン先端観測会 #1 - Togetterまとめ Servo (by Tetsuharu OHZEKI a.k.a @saneyuki_s) スライド: Servo parallelism ACID2は通った Servoのレイアウトの計算 ボトムアップの場合 子供のノードは並列に計算する 全ての計算が終わった時に親に行く トップダウン もっとシンプルに親からやっていく floatの話 floatの影響を受けるものはフラグを立てる フラグが立ったものは遅延的に計算する floatの計算終了後に再度計算する = assign height 遅延的にやるのは、同計算していいのか分からないため overflow Block format c
アイコンの実装方法
ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー
WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users
CSS in Action Invisible Content Just for Screen Reader Users You are here: Home > Articles > CSS in Action: Invisible Content Just for Screen Reader Users Introduction There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Designing With Reduced Motion For Motion Sensitivities — Smashing Magazine
Replacing Radio Buttons Without Replacing Radio Buttons — SitePoint