html-aria

Web 標準動向 2026年10月版 こんにちは！ サイボウズ株式会社 プロダクトエンジニアの くらっち (@kuracchi04) です。 はじめに サイボウズは 2025 年 4 月より、W3C のメンバーに加入しました。 blog.cybozu.io 標準化プロセスに関わることができるようになるための最初の一歩として、フロントエンドエンジニアの一部のメンバーは積極的に Web 標準のキャッチアップを行っています。 そこで、毎月メンバーが興味を持った Web 標準に関する話題や、実際に標準化プロセスに関わることができた場合にはその報告などを 1 つの記事としてまとめ、紹介していきます。 また、ここでは W3C に限らず、TC39 や WHATWG などの標準化団体のトピックについても扱います。 ! 今月の執筆者は以下の 4 名です。 nus3 State of系サーベイへのスポンサーのお知らせを執筆 Saji ECMA402 (Intl) 周りのトピックを執筆 saku HTML, CSS に関連するトピックを執筆 mehm8128 主にアクセシビリティに関連するトピックを執筆 くらっち ECMA262 周りのトピックを執筆 State of系サーベイへのスポンサー State of JS などを運営されている Sacha Greif さんのスポンサーを、弊社でさせていただくことになりました！ devographics.com State of 系のサーベイでは、開発者が実際にどの機能やライブラリを利用していて、それらをどう感じているのかを知ることができます。サイボウズでも、プロダクト開発の際に参考にさせてもらっています。 State of 系のサイトにメールアドレスを登録しておくと、サーベイの開始時期をメールで知らせてくれます。結果を見るだけでなく、普段プロダクト開発をしている方はぜひサーベイに参加してみてください。 回答していく中で、この 1 年で追加された機能を振り返ることができたり、知らなかった機能に出会えたりするのでおすすめです。 HTML Updated Candidate Recommendation: Scalable Vector Graphics (SVG) 2 w3.org SVG2 の Candidate Recommendation Snapshot が更新されました。 2026/12/1 までコメントを募集しているとのことです。 Blink: Intent to Prototype: The focusreset event groups.google.com 要素が消えてキーボードフォーカスがリセットされたときに発火する、focusreset イベントの Intent to Prototype が出ました。 Chromium では要素が削除されたときに blur イベントが発火しますが、Gecko と WebKit では発火しないため、新たにイベントを用意し、Chromium でも要素が削除されたときにはこちらのイベントを発火するようになる予定とのことです。 これは、UI ライブラリで hacky な方法を使ってフォーカス制御している utils などを置き換えるのに役に立ちます。 Blink: Intent to Prototype: document.advanceFocus() and beforefocus groups.google.com element.focus() はキーボードフォーカスの移動先が分かっている場合に移動先要素のメソッドを利用して発火します。しかし、Tab キーを押したときのように、ブラウザが次の移動先を選択してキーボードフォーカスを移動させたいときのメソッドがありませんでした。 そこで現在 Open UI で議論中である document.advanceFocus() や beforefocus を用いて、移動先要素の計算をブラウザに委ねて「次のフォーカス可能要素にキーボードフォーカスを進める」ということを命令するメソッドが開発されるようです。 focusgroup 属性よりも低レベルで命令的なメソッドになっています。 併せて、要素がフォーカス可能かどうかを紹介する API の案も出されています。 Proposal: Expose sequential focus navigation primitives · Issue #13051 · whatwg/html Gecko: Intent to prototype: Retain focus when elements become disabled groups.google.com button などの要素にキーボードフォーカスしている最中にその要素が disabled になったとき、キーボードフォーカスを失わないようにする変更のプロトタイプが作成されています。 今まではキーボードフォーカスを失っていたため、disabled 属性の代わりに aria-disabled などを用いて無効化状態を実装する hack が用いられることがありましたが、そのような対応が不要になります。 なお、一度フォーカスを外して再度戻ったときには、今まで通りフォーカスが当たらないようです。 Should focused elements which become disabled lose focus? · Issue #13159 · whatwg/html Ship: HTML-in-canvas groups.google.com Chrome の 157 から Stable で HTML-in-Canvas が Ship されます。Stable での Ship はブラウザの中では初めてとなります。 これまで Canvas では、テキスト選択やページ内検索、翻訳、Autofill、アクセシビリティが失われ、逆に HTML を重ねると 3D 空間での前後関係やフレーム同期ズレ、毎フレームの CSS 再計算が課題となっていました。 <canvas content="drawable"> 内の要素を drawElementImage() で描画すれば、ブラウザ標準機能や AI エージェントと親和性の高いネイティブ HTML の機能を保ったままシェーダー表現を利用可能です。 Three.js や Babylon.js、PlayCanvas、PixiJS でも対応が進んでいます。 HTML-in-Canvas in Chrome 157: Interactive DOM inside 2D, WebGL, and WebGPU Overscroll areas – 28 October 2026 w3.org サイドメニューやボトムシートを、スクロールの仕組みを使って宣言的に実装する Overscroll Areas の設計が議論されています。2025 年の TPAC では HTML と CSS のどちらで扱うかが論点でしたが、現在は HTML の属性と Invoker Commands で構造と操作を表し、CSS で表示方法を制御する方向で進んでいます。scroll chaining、scroll snap、inert、backdrop、Invoker Commands など、既存の仕組みを組み合わせる設計です。 また、ボタンを必須とすることで、スワイプ操作を使えないキーボードや支援技術の利用者にも操作手段を提供可能にする点も決まっています。ボタンのデザインを前提としたスワイプデザインは、デザイナーにもコミュニケーションが必要になる部分かもしれません。 Overscroll Areas - TPAC 2026 whatwg/spec-ai: AI tooling for working with WHATWG standards whatwg/spec-ai WHATWG が、仕様の執筆やレビューを AI agent で支援するための repository を公開・運用しています。 HTML Living Standard の Pull Request をレビューし、問題の修正まで行う review-and-fix Skill や、WHATWG の記法を確認する静的チェックが追加されています。Pull Request 増加へのレビューを支援する Skill という位置付けです。 Custom Attributes webplatformco/project-custom-attributes 既存の HTML、SVG、MathML 要素へ、再利用可能な振る舞いを属性として追加する Custom Attributes が提案されています。要素自体を Custom Element に置き換えるのではなく、カスタムの属性で振る舞いのみを付与する発想です。 Customized built-in elements は、<button is="..."> のように is 属性を使って既存要素を拡張します。Interop 2027 では、相互運用が進んでいない customized built-in elements（is 属性）を非推奨化する提案も出ています。一方、Custom Attributes は要素の種類を保ったまま、複数の独立した振る舞いを属性として組み合わせられることを目指しています。 TPAC での議論も前向きに進んでおり、今後注目していきたい機能の一つです。 CSS [css-logical] Flow-relative syntax for margin-like shorthands csswg-drafts#1282 長年要望の多かった、Logical Properties のショートハンド対応方法が決定されました。 CSS には margin-block-start や margin-inline-end といった logical longhand がありますが、margin: 10px 20px 15px のような shorthand の値は、物理的な top、right、bottom、left の順序で展開されます。shorthand は parse 時に longhand へ展開されるのですが、logical property を物理方向へ対応付けるには、後から確定する writing-mode や direction が必要です。この処理順の違いが、logical shorthand の導入を難しくしてきました。 解決策として、パース時に Logical Properties であることをフラグとしてマークする方法が議論されました。今回の resolution では、値の末尾へ !logical または !physical を付ける形式と、複数の宣言を @logical または @physical で囲む形式を仕様化する予定です。 .box { margin: 10px 20px 15px !logical; } @logical { .box { margin: 10px 20px; padding: 5px; } } CSSWG TPAC misc w3.org w3.org [css-fonts][mediaqueries-5] Add prefers-bold-text user preference media feature csswg-drafts#14477 2026年9月の記事で紹介した prefers-bold-text media query を Media Queries に追加することが決まりました。 [css-mixins] Types for private properties (in mixins and elsewhere) and probably function locals csswg-drafts#14442 @private と @function の本文内に @property をネストし、local な custom property の型と初期値を定義できるようにすることが決まりました。 @mixin --card { @private { @property --space <length>: 1rem; } padding: var(--space); } Proposal: Custom Highlight API Extensions csswg-drafts#14613 Custom Highlight API で opacity と CSS Animations、CSS Transitions を利用できるようにすることが決まりました。多数の span 要素を生成せずに、Range で指定した文字列の背景色や文字色、text decoration を fade させられるようになります。 [css-grid-3][css-display-4] Naming for grid lanes reading-flow values csswg-drafts#14290 Grid Lanes の視覚的な配置に合わせて読み上げや focus navigation の順序を制御する、reading-flow の値が決まりました。 grid-lanes-track は track に沿った順序、grid-lanes-flow は item を配置する flow に沿った順序を表します。order property を反映する grid-lanes-order も追加されます。 .gallery { display: grid-lanes; reading-flow: grid-lanes-flow; } Blink: Intent to Prototype: CSS Linked Parameters for External SVGs groups.google.com 外部 SVG へ名前付きの CSS 値を渡し、SVG 側で env() を使って読み取れるようにする CSS Linked Parameters の Intent to Prototype です。 外部 SVG は参照元 document の style や custom property を継承しません。そのため、theme に応じて icon の色を変えるには、SVG を inline 化するか、色ごとに別の file を用意する必要がありました。この提案では、1 つの cache された SVG を再利用しながら、参照ごとに異なる値を渡せます。 img { link-parameters: param(--icon-color: green); } <circle fill="env(--icon-color, black)" /> WebKit Features for Safari 27.2 webkit.org Safari 27.2 では、Customizable Select と Grid Lanes の既存実装が追加されました。両実装とも Chrome に続く主要ブラウザ 2 つ目の実装です。 ARIA・WCAG feat: add listview role to ARIA aria#2951 TPAC にて、List View というインタラクティブなリスト構造のセマンティクスを定義する議論がありました。 listbox とは違ってフォーム要素ではなく、grid とは違って 1 次元であるような UI で、チャットのメッセージ一覧、最近開いたファイル一覧、ページネーション、カルーセルなどが例として挙げられています。 List View 内では Tab キーの代わりに矢印キーで操作できるようにすることで、ページを読み進めるのに Tab キーを押す手間を省くことができるというメリットが提示されています。 これに対して、新しく listview のような親 role と、それに対応する子 role を追加することが決定しました。そして、ul, ol 要素に listview role がつけられると、その子の li 要素には自動で子 role がつくようにするとのことです。 なお、role 名は未確定のようです。 参考 Interactive lists | Sarah Higley A proposal for a listview role to discuss during TPAC 2026 Filtering a listbox with a text field (filterable select) aria#2841 現在 Open UI で検討されている Filterable Select という UI のアクセシビリティマッピングについて、TPAC で議論がありました。 テキスト入力欄に隣接してリストボックスが存在している、GitHub のラベルフィルター UI のようなものが想定されています。 一見 combobox role が適切なように思えますが、今回のパターンは開閉状態を持たない、入力したテキストとは別で選択肢の値が送信値になる、入力しなくても直接選択肢を選択できるといった違いから、適さないという結論になりました。 また、aria-activedescendant を誤った使い方をしてアクセシビリティ上の問題が発生するケースも取り上げられ、aria-activedescendant の仕様が改善されることになりました。 [accname PR 235] feat: update step 2F to exclude nodes referenced by aria-actions aria#2208 accessible name に使われる text alternative の計算ステップにおいて、aria-actions で参照されているノードが除外されるようになるようです。 Simplify allowances for explicit declaration of implicit role on elements html-aria#612 button 要素の button is also allowed, but NOT RECOMMENDED. や del 要素の Any role, though deletion is NOT RECOMMENDED. など、要素が持つ暗黙の role を指定するのを非推奨であると記載するのをやめるという issue です。 暗黙の role を指定するのは多くの場合不要ですが、指定することでアクセシビリティを損なうこともありません。よって、基本的にはこのような記述を削除し、暗黙の role を指定することでアクセシビリティ上の問題が発生する場合のみ明記する方針になるとのことです。 browser accessibility heuristics wiki aria#2931 以前紹介した browser accessibility heuristics wiki のページに、WebKit で ul / ol に対して list-style-type を none に指定すると、list role がつかなくなるというヒューリスティックが記載されるようです。これは不具合ではなく意図的な動作です。 参考 x.com 170179 – VoiceOver does not announce a list for groups of links when list-style: none; ACD - Accessibility Compat Data acd.lolaslab.co ACD Project の Web サイトが公開されました。 ACD の概要や貢献方法、その他記事が公開されています。 JavaScript ECMA402 今月公開された、10 月 8 日の TG2 meeting notes の内容です。 github.com/tc39/ecma402/blob/main/meetings/notes-… How should JS handle un-deprecation of EST5EDT, CST6CDT, MST7MDT, PST8PDT in TZDB 2026d? ecma402#1103 EST5EDT などのタイムゾーン ID は、IANA の TZDB で一度非推奨になっていました。しかし互換性への苦情を受けて TZDB 2026d で非推奨が取り消され、再び独立したゾーン（primary zone）として扱われるようになりました。このままだと、これらの ID が Intl.supportedValuesOf("timeZone") の結果に含まれ、タイムゾーンの選択 UI にも表示されることになります。 これらのタイムゾーンは、過去や将来の日付で都市ベースのタイムゾーンと異なる時刻になることがあり、事情を知らないユーザーが選択 UI でこれらを選んでしまうことが懸念されていました。またこれらのタイムゾーンに対する現在のブラウザの挙動は 2 通りに分かれてしまっているという問題もあります。Firefox と Chrome はこれらを都市ベースの ID（America/New_York など）の alias として扱い、Safari は受け付けません。 会議の結果、これらを canonical ID（Intl.supportedValuesOf で列挙される正式な ID）として認めないことを仕様に明記し、alias として受け付けるかどうかは実装に任せることになりました。こうすると Firefox / Chrome / Safari の現在の挙動はどれも仕様に沿ったものになります。この方針で仕様の PR を作り、TG1（TC39 の本会議）に提出して承認を求める予定です。 add String.toTitleCase, String.toLocaleTitleCase ecma402#294 文字列をタイトルケース（単語の先頭を大文字にする形）に変換するメソッド toTitleCase / toLocaleTitleCase を追加しようという Issue です。CSS には text-transform: capitalize がありますが、JavaScript には同等の機能がありません。またアイルランド語のように通常より複雑な変換が必要な言語があり、CLDR や ICU がそれに対応していないという課題もあります。 会議の結果、CSSWG と今後の進め方を相談するため、TPAC のブレイクアウトセッションに申し込むことになりました。 Duration / time units in Amount proposal-amount#139 Amount は、数値と単位を組にして扱う ECMA-262 の提案です。この Issue では、minute-and-second のような時間の単位を持つ Amount をどうフォーマットするかが議論されました。Amount のフォーマットには Intl.NumberFormat を使いますが、複数の単位の組み合わせを表示する Intl Sequence Units が時間の単位を対象にしていないため、そのままではフォーマットできません。 Intl.DurationFormat でフォーマットすればよいという意見が出ましたが、その場合は toLocaleString() の options が NumberFormat 用と DurationFormat 用の 2 通りの形になってしまうという問題があります。そのため、時間の単位ではエラーを投げてもよいという意見もありました。 会議では結論が出ず、Amount を Temporal.Duration に変換する手段（Amount.prototype.toDuration を追加する、Temporal.Duration.from が Amount を受け取れるようにする、など）を別の Issue で検討することになりました。 Exact input handling for sequence unit values: Iterable vs. Array-like vs. IsArray proposal-intl-sequence-units#19 Intl Sequence Units で、フォーマットする値をどの形式（Iterable / Array-like / 配列のみ）で受け取るかについての Issue です。しかし、この Issue 自体が TC39 の AI ポリシーに違反しているという指摘があり、会議では内容を議論せずに延期することになりました。 Should we coerce the value field? proposal-intl-unit-protocol#6 Intl Unit Protocol は、value と unit のフィールドを持つオブジェクトを Intl.NumberFormat.prototype.format() に渡して、数値と単位をまとめてフォーマットできるようにする Stage 2 の提案です。この Issue では、value フィールドにも既存の format() と同じ型変換を行うか、つまり Symbol.toPrimitive を実装した独自の数値型も受け付けるかが議論されました。 会議の結果、Intl.NumberFormat が以前から独自の数値型を受け付けていることにそろえ、型変換を行う現在の仕様を維持する方向になりました。 Should we check for the protocol even if the formatter is not a unit/currency formatter? proposal-intl-unit-protocol#7 現在の仕様では、format() は style に関係なく、引数から常に Intl Unit Protocol のフィールドを読み取ります。そのため、単位を使わない NumberFormat（style: "decimal" など）にプロトコルのオブジェクトを渡したときにどう扱うかが問題になっていました。 会議の結果、style が "unit" か "currency" のときだけフィールドを読み取るように変更することになりました。仕様の挙動が変わる normative な変更なので、次回の TG1 に提出して承認を求める予定です。 Input unit type checking proposal-intl-unit-protocol#8 unit フィールドに不正な単位が入っていたときに、どの時点で例外を投げるかについての Issue です。フィールドの読み取りなど、外から観測できる処理との順序がまだ決まっていません。 会議の結果、この点は Stage 2.7 に向けたレビューで確認することになりました。 Cyclic year doesn't show up in resolvedOptions ecma402#816 中国暦のように干支で年を表すカレンダーで、Intl.DateTimeFormat.prototype.resolvedOptions() の結果に year が含まれないという Issue です。以前の会議で修正方針に合意していましたが、仕様と実装のどちらを直すべきかが改めて確認されました。 仕様では、表示パターンに relatedYear が含まれていれば resolvedOptions() の結果にも year が含まれると定めています。会議の結果、仕様は正しく実装が準拠していないことが確認され、この挙動を検証する test262 のテストを追加することになりました。 Normative: Define %TypedArray%.prototype.toLocaleString ecma402#1095 TG2 の議題ではありませんが、今月マージされた normative な PR です。ECMA-262 は、ECMA-402 も実装する処理系に対して、%TypedArray%.prototype.toLocaleString（Uint8Array などの型付き配列の toLocaleString）を Array.prototype.toLocaleString と同じように ECMA-402 の定義で置き換えるよう求めています。しかし、ECMA-402 にはその定義がありませんでした。 この PR で ECMA-402 に定義が追加され、各要素の toLocaleString に locales と options が渡されることが明記されました。 ECMA262 Deferred re-exports advanced to stage 2.7 tc39/proposal-deferred-reexports 再エクスポートに defer を付けることで、使われていないモジュールの読み込みと実行をスキップできるようにする提案です。 TC39 第 116 回の MTG で Stage 2 から Stage 2.7 へ昇格しました。 ただし、エディタ（ECMA262の仕様書の編集を行うグループ）のレビューが未完了のため、エディタ承認を条件とした昇格です。 ライブラリのエントリポイントがすべての公開 API を再エクスポートする「バレルモジュール」パターンでは、使わない機能まで含めてモジュールグラフ全体が読み込まれます。 バンドラの tree-shaking は副作用の扱いがツールごとに異なり、ブラウザで ESM を直接実行する場合は使えません。 この提案は、「使われなければ無視して良い」再エクスポートを表現できるようにするものです。 // math.js export defer { add } from "./math/add.js"; export defer { sub } from "./math/sub.js"; export { mul } from "./math/mul.js"; // main.js import { add, mul } as math from "./math.js"; import("./math.js", { exports: ["add", "mul"] }); // 動的 import 版 Composites advanced to Stage 2 tc39/proposal-composites Map や Set のキーとして使える、値ベースの等価性を持つ Composite を導入する提案です。 TC39 第 116 回の MTG で Stage 1 から Stage 2 へ昇格しました。 現在の Map / Set は要素の同一性判定に SameValueZero を使うため、オブジェクトは「自分自身とだけ等しい」扱いになります。 構造化された値をキーにしたくても、中身が同じ 2 つのオブジェクトは別物と判定されてしまい、この挙動を変える手段はありません。 回避策として JSON.stringify で文字列化してキーにする方法がありますが、キーの列挙順で結果が変わる、循環参照で例外になるなど、正しく使うのが難しいものでした。 Composite は「中身で等価判定したい場合に明示的に選べる別の手段」で、これを使うと同じ中身なら同じ参照になるオブジェクトを作れるようになります。 const pos1 = Composite({ x: 1, y: 4 }); const pos2 = Composite({ x: 1, y: 4 }); pos1 === pos2; // true（同じ値の組からは同じオブジェクトが返る） // 既存の Map / Set でそのままキーとして機能する const itemAtPosition = new Map(); itemAtPosition.set(pos1, "book"); itemAtPosition.get(Composite({ x: 1, y: 4 })); // "book" // キーはソートされ正規形を持つため、記述順は等価性に影響しない Composite({ b: 2, a: 1 }) === Composite({ a: 1, b: 2 }); // true Bigint from exponential advanced to stage 2 tc39/proposal-bigint-from-exponential 1e6n のような指数表記で BigInt を書けるようにし、BigInt("1e6") のような文字列からの変換も受け付けるようにする提案です。 TC39 第 116 回の MTG で Stage 1 から Stage 2 へ昇格しました。 // これまで: 桁を手で書く const scale = 1_000_000_000_000_000_000n; BigInt(1e21); // Number を経由するので精度が保証されない // この提案: 指数表記で書ける const scale2 = 1e21n; BigInt("1e21"); // 1000000000000000000000n BigInt("86.4e12"); // 86400000000000n（整数になる小数部は許容） Baseline 📃 October 2026 release notes web-platform-dx.github.io Misc THIS IS FOR EVERYONE の日本語訳が発売 str.toyokeizai.net ティム・バーナーズ＝リー氏の THIS IS FOR EVERYONE の日本語訳本が、10/17 に発売開始されました。 Web Sustainability | Our mission | W3C w3.org W3C のミッションの 1 つとして、サステナビリティのページが追加されました。 W3C のサステナビリティへの取り組みの概要や、Sustainable Web Interest Group で作業中の Web Sustainability Guidelines の紹介があります。 Web Sustainability Guidelines については、以下の記事で紹介されています。 Web Sustainability Guidelinesとは Blink: Intent to Prototype: Decisions API groups.google.com 自然言語の入力を、構造化された質問と選択肢に照らして端末上で評価する Decisions API の Intent to Prototype です。Intents にも書かれている通り、ブラウザ上の System One モデル (e.g. Jev) のようなものです。 現時点では design sketch の段階で、仕様や ship の計画はありません。prototype を通して、FB を募り、今後の方針を決めていく段階でしょう。 Decisions API Explainer

html-aria#539