Vol.272

How to Build HTML Forms Right: Accessibility Jump to heading #

HTML フォームの正しい作り方 Jump to heading #

フォームは Web の中で最も重要な部分の一つであるが、Web を使ってみれば使ってみるほど、貧弱なフォームをよく目にすると Austin 氏は嘆く。このシリーズでは全 5 回に渡って Web フォームのベストプラクティスを解説していく。この記事はその中のパート 1、セマンティクスについて解説をする。

Product thinking is a lifeline for struggling design systems || Matthew Ström: designer & developer Jump to heading #

プロダクト思考をデザインシステムに活かす Jump to heading #

デザインシステムを作りあげた後、それを維持することが難しい。この記事ではプロダクト思考を取り入れることで、デザインシステムをどのようにチームに根付かせていけばよいか、ヒントを与えてくれる。

Is it ok to ‘grey out’ disabled buttons? Jump to heading #

グレーアウトされたボタンはアリか Jump to heading #

使用できないことを示すためにボタンをグレーアウトさせる UI があるが、これがアクセシブルなのか。このパターンは非常によくあるデザインパターンがだが、色のコントラストなどの問題からアクセシビリティを損なう可能性がある。この記事では、グレーアウトボタンを使用する際に気をつけておきたいポイントを紹介する。

The Expanding Gamut of Color on the Web | CSS-Tricks Jump to heading #

Display P3 色空間についての解説、color 関数を使った実装方法、Lab や LCH を使った実装方法を紹介する。

#20 HTMHell special: close buttons Jump to heading #

閉じるボタンの実装における 11 のバッドプラクティスを紹介する。疑似要素を使った実装や、アイコンのみを使った実装などは、アクセシビリティの観点から勧められない。

In Brief Jump to heading #

• Using calc to figure out optimal line-height | Hugo Giraudel: calc を使用して適切な line-height を計算する方法

• window.location Cheatsheet: radio を checkbox といった選択式 UI についての考察

• Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects | CSS-Tricks: TRANSLATED TITLE

• Behind the Carbonmade onboarding UX (a case study) - DESK Magazine: carbonmade.comで提供している UX を損なわないオンボーディングについてのケーススタディ

• Improve test error messages of your abstractions: Jest において、抽象化した関数をテストする際のエラーメッセージを改善する