<details> と <summary> によるコンテンツの折り畳み / 展開
ウェブコンテンツの UI 設計において、デフォルトでは全体俯瞰を重視するなどの理由で概要コンテンツのみを提示し、ユーザーの任意で詳細コンテンツを展開表示させたい、というケースがあるかと思います。まさにそのための HTML 要素として、details 要素と summary 要素の組み合わせがあります。
ウェブコンテンツの UI 設計において、デフォルトでは全体俯瞰を重視するなどの理由で概要コンテンツのみを提示し、ユーザーの任意で詳細コンテンツを展開表示させたい、というケースがあるかと思います。まさにそのための HTML 要素として、details 要素と summary 要素の組み合わせがあります。
YouTube で、動画内にチャプター (内容ごとの区切り) が付けられるようになりました。
2020年5月22日に開催された「アクセシビリティの祭典 2020」に、ボーナストラック的な位置づけで登壇させていただき、「Essence of "Form Design Patterns"」というテーマでお話をしました。
監訳本「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」には、あらゆるユーザーにとって利用可能なフォームを提供するための具体的な考えかたや実装方法が詰まっています。この記事は、その要点を一覧できるようまとめたものです。内容把握のチェックリストとしてご活用いただけたら幸いです。
監訳本「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」には、あらゆるユーザーにとって利用可能なフォームを提供するための具体的な考えかたや実装方法が詰まっています。この記事は、その要点を一覧できるようまとめたものです。内容把握のチェックリストとしてご活用いただけたら幸いです。
監訳本「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」には、あらゆるユーザーにとって利用可能なフォームを提供するための具体的な考えかたや実装方法が詰まっています。この記事は、その要点を一覧できるようまとめたものです。内容把握のチェックリストとしてご活用いただけたら幸いです。
「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」が、クリスマスイブの日に出ることになりました。2018年にドイツの Smashing Magazine から刊行された、Adam Silver 著「Form Design Patterns - A practical guide to designing and coding simple and inclusive forms for the web」の日本語訳です。
「Design Systems — デジタルプロダクトのためのデザインシステム実践ガイド」を読みました。昨今ウェブサイトの情報設計や UI デザインにおいてポピュラーになりつつある「デザインシステム」というアプローチについて、著者自身の経験や他社事例を交えつつ、その効果的な構築と運用の実践方法をまとめたものです。
WCAG 2.1 が今年正式に W3C 勧告になりました。より進化したガイドラインになった一方で、個人的には若干もやもやする箇所がいくつかあります。今回は達成基準 2.5.5 Target Size を取り上げ、タッチ操作のターゲットのサイズに関する私的な解釈を加えてみたいと思います。
WCAG 2.1 が今年正式に W3C 勧告になりました。より進化したガイドラインになった一方で、個人的には若干もやもやする箇所がいくつかあります。今回は達成基準 1.4.11 Non-text Contrast を取り上げ、非文字情報の配色 (コントラスト) に関する私的な解釈を加えてみたいと思います。