こんにちは！KEPPLE CREATORS LAB エンジニアの吉田です。
私たちは、月に１度フロントエンドに関連する勉強会をゆるーーく開催しています。
今回の内容
前回に続き、HTMLとCSSを活用して、使いやすさとWebアクセシビリティの向上についてになります。
前回の記事も合わせてご覧いただけると幸いです！
HTML/CSSを使ったユーザビリティとアクセシビリティの向上
以前のJavaScript Tech TalkでもCSSの進化が話題になりましたが、2024年6月4日からウェブアクセシビリティ義務化により、さらに注目が集まっているようです。
今回も以下の記事を参考に、ウェブアクセシビリティについて議論しました。
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集
入力欄の font-size は 16px 以上とする
iOSでテキスト入力欄のfont-sizeが16ピクセル未満になると、
自動的にズームされてしまうため、最低16ピクセルに設定することが推奨されます。
不本意にズームされるとユーザーにとって使いにくいので、font-sizeを適切に設定することが重要です。
See the Pen input zoom by Ryotaro Yoshida (@Ryotaro-Yoshida) on CodePen.
transition を指定する際は transition-property も同時に指定する
transitionを指定する際は、意図しないアニメーションを避けるために、transition-propertyも指定することが重要です。
例えば、transition: all 0.3sとすると、予期しないプロパティまでアニメーションしてしまいます。
弊社では主にUIライブラリを使用していますが、歴史的な経緯で一部の CSS で transition-property を書いていない transition が残っていました。
このような技術的負債は、カイゼン活動日という毎週金曜日に技術的負債を解消するための取り組みで改善しています。
カイゼン活動日の詳細は以下にまとめておりますのでご参照ください！
上下マージンを要素に含めたい場合は親要素に display:flow-root を指定する
できれば、padding で対応したいですが、以下のような場合では、display: flow-rootが推奨されます。
- コンテナ内の浮動要素が高さを押し上げず折りたたまれる場合
- 上下 margin を完全に含めたい場合
これにより、コンテナは浮動要素を含むようになり、フォーカスリングが切り取られるリスクを防ぎます。
以下は「コンテナ内の浮動要素が高さを押し上げず折りたたまれる場合」の例です。
See the Pen display: flow-root by Ryotaro Yoshida (@Ryotaro-Yoshida) on CodePen.
textarea は高さを臨機応変に調整する。
field-sizing: contentを指定すると、内容に応じて高さが調整されます。
ただし、デザインによっては自動で高さが変わると不都合な場合もあるため、状況に応じて使い分けることが重要です。
まとめ
以上、JavaScript Tech Talkからのハイライトでした。使いやすさとアクセシビリティを向上させるためのこれらのテクニックをぜひ実践してみてください。
関連リンク
