テーマ： html
-
srcset、sizes、picture によるレスポンシブ画像
幅記述子付きの srcset と sizes 属性により、ブラウザーは現在のビューポートと画素密度で表示領域を満たす最小の画像ファイルを選べる。x 記述子は固定表示サイズに複数密度を用意し、source を持つ picture は構図の切り替えと形式のフォールバックを扱う。読み込み中のレイアウトずれを防ぐため、width と height を保つ。
-
HTML 標準のフォーム検証：required、pattern、type と Constraint Validation API
HTML はスクリプトなしで送信前にフォーム部品を検証する。required、minlength、min/max、pattern、型付き入力が制約を定め、ブラウザーが送信を止めてメッセージを表示する。CSS では :user-invalid を装飾でき、Constraint Validation API は同じ状態をスクリプトに公開する。これは使いやすさの層であり、安全性の層ではない。サーバーで再度検証する。
-
Web Components：カスタム要素、Shadow DOM とカプセル化の境界
カスタム要素はハイフンを含むタグ名でクラスを登録し、ライフサイクルのコールバックを持ちます。Shadow DOM はスタイルが両方向に漏れないスコープ付きの部分木を与え、テンプレートと宣言的シャドウルートがマークアップを提供します。parts やカスタムプロパティーでの装飾から、ElementInternals でのフォーム参加、ラベルの関連付けまで、境界を越える機能は意図的に開く必要があります。
-
Forms that declare native HTML constraints produce fewer server-side validation rejections per submission than forms validated only in custom JavaScript
Hypothesis: the browser blocks interactive submission of a form whose native constraints (required, pattern, type, min and max) fail, while MDN notes that calling submit() bypasses this and novalidate disables it; the proposal is that forms carrying native constraints that mirror the server rules reach the server with fewer rejections per submission than forms whose checks live only in custom scripts, because the native checks keep working when the script fails to load or errors; a proposed A/B test, with no result claimed.
-
Favicons and the web app manifest: the files to ship and how to declare them
Browsers fall back to /favicon.ico when no link rel=icon is declared, so keep that file in place; declare a scalable SVG or a sized PNG with link rel=icon, an apple-touch-icon, and a manifest whose icons carry sizes and a purpose (any, maskable, monochrome). Search engines want one stable, square favicon per hostname.
-
アクセシブルなフォーム：ラベル、エラーメッセージ、オートコンプリート
すべてのコントロールに for と id で関連付けたラベルを付け、必須項目を文字と属性で示します。autocomplete トークンでブラウザーや支援技術に入力目的を伝え、エラーの一覧と aria-describedby で関連付けた各項目のメッセージを表示します。
-
dialog versus popover: modal behaviour, the top layer and light dismiss
dialog with showModal() is modal: top layer, inert page, ::backdrop, Escape, closedby and form method=dialog; the popover attribute makes any element a non-modal top-layer overlay that a button toggles without script, light-dismissed in auto state. Use dialog for blocking prompts and forms, popover for menus, tooltips and toasts.
-
ARIA roles: why a native HTML element beats a div with a role
The W3C's first rule of ARIA use is to prefer a native HTML element or attribute that already has the semantics and behaviour required; ARIA only changes what assistive technology is told, never what the element does. A div with role=button still needs focusability, key handling and states added by hand, and every mistake is invisible in visual testing.
-
Focus management in single-page interactions: dialogs, route changes and removed elements
When a page changes without a full load, keyboard focus must be moved on purpose: into a dialog when it opens and back to its trigger when it closes, to the new view's heading after a client-side route change, and to a sensible neighbour when the focused element is deleted. Otherwise focus falls to the document body and screen-reader users are sent back to the top.
-
Barrierefreiheit: die vier WCAG-Grundsätze praktisch angewendet
Die WCAG 2.2 ordnen alle Erfolgskriterien vier Grundsätzen zu: wahrnehmbar, bedienbar, verständlich, robust. Wer pro Grundsatz die häufigsten Verstösse kennt (fehlende Textalternativen, Tastaturfallen, zu wenig Kontrast, unbeschriftete Felder, zu kleine Ziele), findet viele Barrieren ohne Spezialwerkzeug; Stufe AA ist das übliche Ziel.
-
details and summary: native disclosure widgets, exclusive accordions and hidden until-found
details/summary is a disclosure widget with no script: the open attribute shows the content, a shared name attribute makes a group exclusive so opening one closes the others, the toggle event reports changes, and summary is styled as display: list-item. For collapsed content that must stay searchable, hidden=until-found reveals it on find-in-page or fragment navigation.
-
Image delivery: AVIF and WebP with fallbacks, lazy loading and fetch priority
Serve modern formats through picture sources with a type attribute and a JPEG or PNG img as the fallback (or negotiate on Accept with Vary), lazy-load only images below the first viewport with width and height set, and mark the largest above-the-fold image fetchpriority=high instead of lazy.
機械可読： JSON