HTML つよつよ勢は全員 State of HTML 2025 に意見を送ろう！（8月15日まで）

はじめに

こんにちは。@debiru_R です。私は2000年頃からHTMLの仕様やブラウザ実装を追いかけているHTML研究者です。

State of HTML 2025 という調査が2025年7月中旬から始まっています！

これは2023年から始まった、HTMLの最新仕様についてのみなさんの認知度と意見・要望について実態調査するものです。みなさんの回答はモダンブラウザの開発ベンダーのロードマップに直接影響を与えるものになります。

• 2023年に始まったきっかけ：https://x.com/LeaVerou/status/1684203493731581952
• 2025年の調査開始：https://x.com/LeaVerou/status/1947678622304678306

State of HTML 2025

概要

State of HTML 2025 より引用：

フロントエンド開発は、見栄えがよく、アクセスしやすく、読みやすいWebサイトを作成する技術です。

また、何百ものコンポーネント、複雑なステート、高度なデータクエリやキャッシュを備えた複雑なアプリを構築する技術でもあります。

それだけでなく、3Dグラフィックスの表示、ファイルシステムへの読み書き、セキュリティ問題の処理、パフォーマンスの向上を実現する手段でもあります。

Webプラットフォームの責務が増え続けている今、HTMLとその他すべてのWebプラットフォームAPIに特化した調査を行うことは、これまで以上に意味のあることです。今年で3年目になります。

そして、霧の中から私たちの進むべき道を見つける手助けをしてくれる、Webのスーパースターである Lea Verou が、今年の質問のキュレーションを手伝ってくれました。

例年同様、皆さんの回答はブラウザベンダーのロードマップに直接影響を与えることになります。お好きな飲み物を片手に、今年の「HTMLの現状」アンケートにお答えください！

When will the results be released?

The survey will run from July 15 to August 15, 2025, and the survey results will be released around September 15, 2025.

回答期限は8月15日(金)までです。調査結果は9月15日頃に公開予定です。

回答にあたって

アンケートへようこそ！この最初のセクションでは、さまざまなWebプラットフォームの機能に関するご経験を共有していただきます。

• 🤷 知らない：これが初めて見るもの、または聞いたことはあるが、何をするものか分からない。
• 👀 知っている：これについて読んだことや学んだことはあるが、実際に使ったことはない。
• 🤓 使ったことがある：少なくとも1回は使用したことがある（試しに使っただけの場合も含む）。

ちなみに、選択した項目について詳しくお伝えしたい場合は、小さな「コメント」アイコンをクリックしてください！

設問

1. Forms

Form-related elements and attributes.

1-1. <datalist>

• <datalist> の基本機能

ユーザーがフォームコントロールで選択できるプリセットのリストを提供する方法であり、同時にカスタムオプションも許可します。

<input name="country" list="countries">
<datalist id="countries">
  <option>Afghanistan</option>
  ...
</datalist>

1-2. input.showPicker()

• input.showPicker() の基本機能

JavaScriptから色選択ツールや日付入力フィールドなど、何らかの選択ツール（ピッカー）を持つフォームコントロールのピッカーを開きます。

<input id="dateInput" type="date">
<button onclick="dateInput.showPicker()">Select date</button>

1-3. Customizable Select

• <select> 要素のスタイルカスタマイズ

スタイル設定可能でカスタマイズ可能なドロップダウンコントロールです。以前は <selectlist> と <selectmenu> でした。

select,
::picker(select) {
  appearance: base-select;
}

1.4 <input type="color">

• <input type="color"> の基本機能

ユーザーが色値を選択できるカラーピッカーを作成します。

1-5. <input type="color" colorspace="display-p3">

• srgb 色空間ではない display-p3 色空間を扱えるカラーピッカー

広色域（P3）の色を選択できるカラーピッカーを作成します。

1-6. <input type="color" alpha>

• RGB ではなく RGBA が扱えるカラーピッカー

半透明の色を選択できるカラーピッカーを作成します。

1-7. contenteditable="plaintext-only"

• （太字や背景色を伴うテキストをコピーペーストした際に）スタイル情報を維持しない

要素のプレーンテキストの編集を許可しますが、リッチテキスト形式の編集は許可しません。

<h2 class="title" contenteditable="plaintext-only"></h2>

1-8. HTML forms に関する課題は何ですか？

• 自由記述

さまざまなフォームコントロール（<input>、<textarea>、<select>、<button> など）、動作（バリデーション、オートコンプリートなど）、JS経由のフォームの処理、編集API（contentEditable）などについて考えてみましょう。ブラウザーのサポート、不足している機能、スタイルなど、気になることはすべて検討対象になります。

2. Interactivity

APIs that enable richer user interactions.

2-1. <details> and <summary>

• <details> and <summary> の基本機能

インタラクティブにコンテンツの表示/非表示を切り替えることができる開示ウィジェットです。

<details>
    <summary>Details</summary>
    Longer content
</details>

2-2. Exclusive accordion

• <details> の排他的な開閉

グループ内の <details> 要素をグループ化して、グループ内で同時に開くことができる要素を1つにします。

<details open name="sidebar_panel">
    <summary>Main info</summary>
    <!-- controls -->
</details>
<details name="sidebar_panel">
    <summary>Style</summary>
    <!-- controls -->
</details>

2-3. <dialog>

• <dialog> の基本機能

モーダルまたは非モーダルのダイアログボックスを作成します。例えば、確認プロンプトやデータ入力用のサブウィンドウなどです。

<dialog id="confirm">
    <form method="dialog">
        Are you sure?
        <button value="1">Yes</button>
        <button value="0">No</button>
    </form>
</dialog>

2-4. <dialog closedby="any">

• closedby="closerequest" と closedby="any" と closedby="none" の違い
  • closerequest は ESC キーが押された場合にクローズが実行される
  • any は close-request またはダイアログの外側をクリックした際にクローズが実行される
  • none はそれらの動作が行われてもクローズを実行しない

ダイアログを、その外側をクリックすることで閉じることができるようにします（light dismiss; 簡易非表示操作）。

2-5. dialog.requestClose()

• cancel イベントを経由して dialog.close() を呼び出す（cancel イベントのハンドラで preventDefault() を呼ぶことでクローズ処理を中断できる）

ダイアログをキャンセル可能な方法で閉じます（dialog.close() とは異なる）。

2-6. Popover API

• popover 属性の基本機能

HTML構文とJS APIによるオーバーレイ、ポップアップ、メニューなどのポップオーバーを実現します。

<button popovertarget="foo">Toggle the popover</button>
<div id="foo" popover>Popover content</div>

2-7. popover="hint"

• popover="auto" と popover="hint" と popover="manual" の違い
  • <A auto>, <B auto>, <C hint>, <D hint>, <E manual>, <F manual> があると仮定する
  • auto 同士の開閉は排他的に連動し、hint 同士の開閉も排他的に連動する
  • A が開いた後、B が開かれると A が閉じる
  • A が開いた後、C が開かれても A は閉じず両方開かれ、D を開くと C だけが閉じる
  • E の開閉は、他の開閉と独立して行われる（E, F を同時に開くことができる）

ツールチップなどのより一時的なポップオーバーを作成する方法です。

<div id="tooltip" popover="hint">
  Save this document
</div>
<button popovertarget="tooltip">
  Save
</button>

2-8. command and commandfor attributes (Command Invokers)

• command, commandfor 属性の基本機能

<button> 要素が事前定義されたカスタムコマンドを実行するための宣言的な方法です。

<button commandfor="mydialog" command="show-modal">
  Show modal dialog
</button>
<dialog id="mydialog">
  <button commandfor="mydialog" command="close">
    Close
  </button>
  *dialog content*
</dialog>

2-9. element.before()

• element.before() の基本機能

要素を別の要素の直前に移動するDOMメソッドです。

referenceElement.before(newElement);

2-10. element.moveBefore()

• element.moveBefore() の基本機能

状態（フォーカス、iframe の読み込み状態、アニメーションのフレームなど）を維持しながら、要素を別の要素の直前に移動します。

referenceElement.parentNode.moveBefore(newElement, referenceElement);

2-11. 動的なHTMLの変更に関する課題は何ですか？

• 自由記述

ブラウザの互換性問題やサポート不足、（フォームを除く）インタラクティブ要素や動作に関する機能の欠如、DOM操作、イベント、および関連するAPIに関するその他の問題です。

3. Graphics & Multimedia

Rendering graphics and animations.

3-1. <svg> (inline SVG)

• <svg> の基本機能

マークアップに直接埋め込むSVG要素です。

<svg>
  <circle cx="50" cy="50" r="50" />
</svg>

3-2. <canvas>

• <canvas> の基本機能

JavaScriptを用いて2Dまたは3Dグラフィックスを動的に描画するための要素です。

<canvas width="200" height="200"></canvas>

3-3. colorSpace for 2D canvas

• canvas.getContext の colorSpace オプション

<canvas> 要素に描画されるグラフィックの色空間を設定します。

const ctx = canvas.getContext("2d", {colorSpace: "display-p3"});

3-4. ctx.drawElement() (HTML in canvas)

• ctx.drawElement() の基本機能

<canvas> 上にHTML要素を描画し、再描画とヒットテストの利便性を提供します。

<canvas id="canvas" layoutsubtree="true">
  <p>Hello world!</p>
</canvas>
<script type="module">
  const ctx = canvas.getContext("2d");
  const text = canvas.querySelector("p");
  ctx.drawElement(text, 30, 0);
</script>

3-5. <model> for AR/VR/3D content

• <model> の基本機能

HTMLに3Dモデルを埋め込み、組み込みのコントロールを使用可能にします。

<model src="3d-assets/car.glb"></model>

3-6. navigator.xr (WebXR Device API)

• navigator.xr の基本機能

AR/VRセッションを対応する出力デバイスで作成します。

const xr = navigator.xr;
const session = await xr?.requestSession("immersive-vr");

3-7. WebGPU

• navigator.gpu の基本機能

ブラウザ内で高性能なグラフィックスと並列計算を実現するため、GPUへの低レベルアクセスを提供するJavaScript APIです。

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter?.requestDevice();

3-8. WebGL

• WebGLの基本機能

GPUを使用して <canvas> 上で2Dおよび3Dグラフィックスをレンダリングするための低レベルAPIでOpenGLを基盤としています。

const gl = canvas.getContext("webgl");

3-9. JPEG XL

• （WebPよりも新しい）可逆圧縮も可能な画像フォーマット

Web環境向けに最適化された画像形式です。

<img src="image.jxl" />

3-10. Canvas, SVG, WebGLなどのAPIを使用してグラフィック、サウンド、または動画をレンダリングする際の課題は何ですか？

• 自由記述

グラフィックの生成、画像の使用、アニメーションのレンダリング、グラフィック性能、グラフィックプリミティブやAPIの欠如、動画などに関する問題を考えてみてください。

4. Content

Embedding, multimedia, data, and other content-related features.

4-1. <math> (inline MathML)

• <math> の基本機能

MathMLを用いてHTML中に直接数式を表示します。

<!-- x² + 1 -->
<math>
  <msup><mi>x</mi><mn>2</mn></msup>
  <mo>+</mo><mn>1</mn>
</math>

4-2. <mapviewer> (inline MapML)

• MapMLの基本機能

HTMLにインタラクティブな地図を埋め込みます。

<mapviewer controls width="600" height="400">
  <maplayer src="osm.mapml"></maplayer>
</mapviewer>

4-3. Content-Security Policy (CSP)

• CSPの基本機能

Webサイトからブラウザへの一連の指示で、XSS攻撃の検出と軽減を支援するものです。

Content-Security-Policy: script-src 'self';

4-4. Sanitizer API

• element.setHTML() および Document.parseHTML() の基本機能

element.setHTML() および Document.parseHTML() です。HTMLの信頼できない文字列をサニタイズすることでXSS攻撃を防止するAPIです。

greeting.setHTML('Hello ' + nameInput.value);

4-5. hidden="until-found"

• hidden="until-found" の基本機能

要素を、それが検出されるまで非表示にします（ページ内検索された場合やURLハッシュでターゲットにされた場合など）。

<section class="drawer" aria-expanded="false" hidden="until-found">
  <!-- content -->
</section>

4-6. Intl.Segmenter API

• Intl.Segmenter の基本機能

言語に依存したテキストのセグメンテーション（文字、単語、または文への分割）です。

const segmenterFr = new Intl.Segmenter("fr", { granularity: "word" });
const string1 = "Que ma joie demeure";

const iterator1 = segmenterFr.segment(string1)[Symbol.iterator]();

console.log(iterator1.next().value.segment);
// Expected output: 'Que'

console.log(iterator1.next().value.segment);
// Expected output: ' '

4-7. Intl.Locale API

• Intl.Locale の基本機能

Intl.Locale APIは、言語、地域、およびスクリプトコードを含むUnicodeロケール識別子を解析します。例えば、zh-Hans-CN や en-GB などです。

const us = new Intl.Locale("en-US");

4-8. HTML Modules

• <script type="module"> の基本機能

HTMLファイルをJSインポート経由でインポートし、その要素とJSエクスポートにアクセスします。

<script type="module">
    import { TabList } from "./tablist.html" with { type: 'html' };
    customElements.define("tab-list", TabList);
</script>

4-9. <template>

• <template> の基本機能

HTMLを即座にレンダリングせずに、後でJavaScript経由で利用される可能性があるものを保持するための仕組みです。

<template id="counter">
    <div class="counter">Clicked {{ times }} times</div>
</template>

4-10. HTMLのコンテンツ管理に関する課題は何ですか？

• 自由記述

コンテンツ要素（iframe、見出し、表、セクション）や機械可読データ、国際化と地域化などについて考えます。欠落している機能、ブラウザの互換性問題、および直面しているその他の問題は、すべて対象となります。

5. Performance

Making your site run even faster.

5-1. Lazy loading

• スクロール位置などに応じてリソースの読み込みを遅らせる機能

必要な場合にのみ特定のリソースをロードします。

<img src="picture.jpg" loading="lazy" />
<iframe src="supplementary.html" loading="lazy"></iframe>

5-2. srcset and sizes attributes

• img 要素の srcset と sizes 属性の基本機能

複数の画像を提供し、ブラウザが適切なものを選択するのに役立つヒントを提供する機能です。

<img
  srcset="fairy-med.jpg 480w, fairy-large.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="fairy-large.jpg"
  alt="Elva dressed as a fairy" />

5-3. <img sizes="auto" loading="lazy">

• <img sizes="auto"> の基本機能

sizes="auto" 属性は画像が読み込まれる前にレイアウト領域を確保し、レイアウトシフトを回避します。

5-4. fetchpriority attribute

• img 要素の fetchpriority 属性の基本機能

ブラウザがさまざまなリソースの取得を優先順位付けする際に役立つヒントを指定できます。

<img src="logo.svg" fetchpriority="high" />

5-5. blocking="render"

• blocking="render" 属性の基本機能

特定のリソースが読み込まれるまで、レンダリング（ただしパースは除く）を遅延させます。<link>, <script>, <style> 要素で利用可能です。

<script blocking="render" async src="async-script.js"></script>

5-6. <link rel="expect">

• <link rel="expect"> の基本機能

href 値で参照される要素が接続され、完全にパースされるまでレンダリングをブロックします。

<link rel="expect" href="#hero" blocking="render">

5-7. Speculation Rules

• Speculation Rules の基本機能

ブラウザがパフォーマンス向上のため、バックグラウンドでページを積極的にダウンロードするように促すヒントです。

<script type="speculationrules">
  {
    "prefetch": [{ "urls": ["/about", "/pricing"] }],
    "prerender": [
      {
        "where": {
          "href_matches": "^/product/\\d+$",
          "selector_matches": "a.nav-link"
        }
      }
    ]
  }
</script>

5-8. パフォーマンスに関する課題は何ですか？

• 自由記述

パフォーマンス指標の低さ、ページの読み込み速度の遅さ、レンダリングの遅延、カクカクしたアニメーションやスクロールなどに関する問題です。

6. Web Components

Making & using web components.

6-1. Using Custom Elements

• カスタム要素の基本機能

カスタム要素を使用します。これは、あなたまたは誰かが定義したものです。

<my-switch start="On" end="Off">Wi-Fi</my-switch>

6-2. Defining Custom Elements

• customElements.define の基本機能

他の人が利用できるようにカスタム要素を定義します。

class MyElement extends HTMLElement { … }
customElements.define("my-element", MyElement);

6-3. Declarative Custom Elements

• JavaScriptを用いないカスタム要素の定義

HTMLを使用して、JavaScriptの有無に関わらず、宣言的にウェブコンポーネントを作成できます。

<definition name="progress-ring">
  <template shadowmode="open">
    <div id="base" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{root.attributes.percentage.value}}">
      <slot>{{ root.attributes.percentage.value }}%</slot>
    </div>
    <style>#base { /* ... */ }</style>
  </template>
</definition>

<progress-ring value="50"></progress-ring>

6-4. Scoped Custom Element Registries

• CustomElementRegistry の基本機能

1つのタグ名に対して、ページ内に複数のカスタム要素定義が存在できるようにします。

const registry = new CustomElementRegistry();
registry.define('sub-element', SubElement);

6-5. Shadow DOM

• Shadow DOM の基本機能

外部から見えない要素をカプセル化し、CSSでスタイルを設定し、ページの他の部分に影響を与えないようにします。

this.shadowRoot = this.attachShadow({mode: "open"});

6-6. Declarative Shadow DOM

• JavaScriptを用いない Shadow DOM の定義

サーバーサイドレンダリングされるウェブコンポーネントの場合などに、HTMLを使用してシャドウツリーを定義します。

<host-element>
    <template shadowrootmode="open">
        <!-- Shadow content -->
    </template>
</host-element>

6-7. Named slot assignment

• slot 属性の基本機能

コンポーネントUIの既定の部分を独自の要素で置き換えます。

<my-switch>
  Wi-Fi
  <i slot="start" class="icon-on">On</i>
  <i slot="end" class="icon-off">Off</i>
</my-switch>

6-8. Imperative slot assignment

• JavaScriptによるスロットの割り当て

JSを使用してスロットに要素を手動で割り当てる方法です。これにより、コンポーネントの消費者によってスロットの割り当てを管理する必要がなくなります。

this.attachShadow({mode: "open", slotAssignment: "manual" });
let headerSlot = this.shadowRoot.querySelector("slot[name=header]");
let header = this.querySelector("header");
if (header) headerSlot.assign(header);

6-9. ElementInternals API

• ElementInternals の基本機能

カスタム要素に隠れたセマンティクスを割り当てることで、アクセシビリティを向上させ、フォームにおいてネイティブ要素と同様に機能させることが可能になります。

this._internals = this.attachInternals();
this._internals.role = "progressbar";

6-10. Reference Target API

• Shadow DOM の外部から、Shadow DOM の内部の要素の ID を参照する仕組み

コンポーネントへのID参照を、ARIA, Label, Popover などの設定のためにそのシャドウDOM内の要素にリダイレクトするための手段です。

this.attachShadow({ 
  mode: "open",
  referenceTarget: "real-input",
});
this.shadowRoot.innerHTML = `<input id="real-input">`;

6-11. :has-slotted

• :has-slotted の基本機能

CSSの疑似クラスで、<slot> 要素がスロット化されたノードを含む場合にのみターゲットにできるものです。

slot[name=icon]:not(:has-slotted) + .icon-label {
  display: none;
}

6-12. ウェブコンポーネントの作成と利用に関する、最も大きな課題は何ですか？

• 最大3つまで選択する

選択肢：

1. 過剰な複雑さ
   • Web Component APIは使いにくい/低レベルすぎる/複雑すぎる。
2. アクセシビリティの問題
   • フォーカス管理、ARIAなど、実装が難しい。
3. ローカライズ/国際化の問題
   • ページのロケールに適応できるWebコンポーネントや、テキストをカスタマイズできるWebコンポーネントを作成するのが難しい。
4. Shadow DOMのCSS詳細度の低さ
   • 例：* { margin: 0 } は、::slotted() や :host 経由で設定されたマージンを上書きする。
5. スタイルの封じ込めが過度に厳格
   • Shadow DOMを外部からスタイリングすること（またはその逆）が過度に制限されている。
6. JavaScript への過度の依存
   • JavaScriptを頻繁に使用する必要がある。
7. デザイントークンのアクセス
   • 色、フォント、余白など、各コンポーネントに個別に伝達する必要がある。
8. ネイティブ要素の拡張
   • 1つの機能を追加するために、ネイティブ要素を完全に再作成する必要がある。
9. スロット付き子要素のスタイリング
   • スロット付きの子要素はスタイリングできない（::slotted(ul) > li ができない）。

6-13. ウェブコンポーネントの作成と利用に関する課題は何ですか？

• 自由記述

7. Accessibility

Making sites and apps accessible by all.

7-1. Landmark elements

• ランドマークという概念

<main>, <nav>, <aside>, <header>, <footer>, <section>

7-2. tabindex attribute

• tabindex 属性の基本機能

HTML要素にフォーカスを当てられるようにし、それらを順次フォーカス可能にするか、またはその機能を無効にします。

<div role="button" tabindex="0">I’m Tabbable</div>

7-3. focusgroup attribute

• focusgroup 属性の基本機能

キーボードの矢印キーを使用して、フォーカス可能な要素のセット間でキーボードフォーカスナビゲーションを可能にします。

<div focusgroup="wrap horizontal">
    <!-- child elements -->
</div>

7-4. <search>

• ネイティブセマンティクスとして search ロールを持つ新しい要素

検索UIを包含するセマンティックな要素です。

<search>
  <form action="search.php">
    <label>Find: <input name="q" type="search"></label>
    <button>Go!</button>
  </form>
</search>

7-5. アクセシビリティ戦略の他の手法にはどのようなものがありますか？

• 該当するものを全て選択する

選択肢：

1. 直感的なキーボードナビゲーション
   • タブ順序以外のナビゲーション。
2. 説明的な代替テキスト
   • 画像の目的や内容を説明する代替テキストを提供すること。
3. コンテンツへスキップリンク
   • ユーザーがページのメインコンテンツに直接移動できるようにするリンク。
4. <fieldset> と <legend>
   • 関連するフォーム要素をグループ化するために <fieldset> と <legend> を使用すること。
5. 情報階層
   • ページの情報を適切に表す見出し（<h1> - <h6>）を使用する。
6. 意味のあるリンクテキスト
   • リンクテキストが文脈外でも意味を成すようにする。
7. フォームコントロールのラベル
   • すべてのフォームコントロールに <label>（または aria-label など）を付ける。
8. 可視的なフォーカスリング
   • 必要に応じてフォーカスリングのアウトラインが明確に表示されるようにする。
9. ポインターに依存しない
   • Hover 操作などのポインター操作には、キーボードによる代替操作の手段を提供する。
10. 十分なコントラスト
    • コントラストチェッカーを使用して、十分な色コントラストを確保します。
11. 色のみに依存しない
    • 色のみによって情報が伝達されないようにする。
12. prefers-reduced-motion メディアクエリ
    • 動きの少ない表示を好むユーザー向けに代替CSSを提供する。
13. prefers-contrast メディアクエリ
    • コントラストを高くする表示を好むユーザー向けに代替CSSを提供する。
14. prefers-color-scheme
    • OSまたはUAで設定されているカラースキーム（ライトモード/ダークモード）に応じたCSSを提供する。

7-6. Webサイトを作成する際、どのようなユーザーの障害を考慮していますか？

• 該当するものを全て選択する

選択肢：

1. ロービジョン
   • 失明、高度近視など
2. 色覚多様性
   • 色覚異常
3. 運動障害
   • 関節炎、手根管症候群など
4. 前庭障害
   • てんかん、めまいなど
5. 学習障害
   • 読字障害、算数障害など
6. その他の認知障害
   • 不安障害、自閉症、強迫性障害、注意欠如多動症など
7. 聴覚障害
   • 難聴、耳鳴りなど

7-7. アクセシビリティ試験のためにどのスクリーンリーダーを利用しますか？

• 該当するものを全て選択する

選択肢：

1. VoiceOver
2. JAWS
3. TalkBack
4. NVDA
5. Narrator
6. Orca
7. Chrome DevTools
8. Chromevox
9. WAVE
10. その他

7-8. アクセシビリティ試験のために何のツールを利用しますか？

• 該当するものを全て選択する

選択肢：

1. Accessibility Insights
2. Arc
3. Assistiv Labs
4. Axe
5. Browser Devtools
6. Firefox Accessibility Inspector
7. Guidepup
8. IBM Equal Access Accessibility Checker
9. Lighthouse
10. Pa11y
11. Polypane
12. Siteimprove
13. Storybook
14. VoiceOver.js
15. WAVE
16. その他

7-9. アクセシビリティに関する最大の課題は何ですか？

• 自由記述

8. System Capabilities

Accessing device and system APIs.

8-1. File System Access API

• File System Access API の基本機能

ユーザーのローカルデバイス上のファイルとディレクトリにアクセスし、更新可能な書き込み可能なファイルを作成します。

const handle = await window.showSaveFilePicker();
const writable = await handle.createWritable();
await writable.write("Hello, world!");
await writable.close();

8-2. Web Share API

• navigator.share の基本機能

ユーザーが選択したさまざまなターゲットにコンテンツを共有するためのメカニズムを提供します。

navigator.share(shareData)

8-3. share_target manifest field

• share_target manifest の基本機能

PWAが、システム共有ダイアログ経由で他のアプリから共有されたデータ（テキスト、ファイル、URL）を受け取れるようにします。

"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url",
    "files": [{ "name": "image", "accept": ["image/*"] }]
  }
}

8-4. File Handling API

• File Handling API の基本機能

PWAが、特定のファイルタイプのハンドラーとして自身を登録できるようにします。

"file_handlers": [{
    "action": "/open-file",
    "accept": {
      "image/svg+xml": ".svg",
      "image/png": ".png"
    }
  }]

8-5. navigator.registerProtocolHandler()

• navigator.registerProtocolHandler() の基本機能

Webアプリが、特定のプロトコル（例：mailto: や web+custom:）のハンドラーとして自身を登録できるようにします。

navigator.registerProtocolHandler("mailto", "https://fancywebmail.com/?compose=%s");

8-6. Web Bluetooth

• navigator.bluetooth の基本機能

近くのBluetooth Low Energy（BLE）デバイスに接続し、通信を行います。

const device = await navigator.bluetooth.requestDevice({ filters: [{ services: ["heart_rate"] }] });

8-7. WebUSB API

• navigator.usb の基本機能

USBデバイスと直接通信し、ドライバーやネイティブアプリなしでデータ交換を可能にします。

const device = await navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] });
await device.open();

8-8. SpeechRecognition

• SpeechRecognition の基本機能

マイク入力をテキストに変換するAPIです。

const rec = new SpeechRecognition();
rec.lang = "en-US";
rec.addEventListener("result", e => console.log(e.results[0][0].transcript));
rec.start();

8-9. PaymentRequest API

• PaymentRequest API の基本機能

WebサイトがブラウザのネイティブUIを使用して支払いリクエストを行うための一貫した安全な方法を提供します。

const request = new PaymentRequest(
  [{ supportedMethods: "basic-card" }], 
  { total: { label: "Total", amount: { currency: "USD", value: "9.99" } } }
);
let response = await request.show();
response.complete("success"));

8-10. Web NFC

• NDEFReader の基本機能

デバイスの内蔵NFCリーダーを使用して、NFCタグから読み取りや書き込みを行うことができます。

const reader = new NDEFReader();
await reader.scan();
reader.onreading = e => console.log(e.message.records);

8-11. ネイティブシステムやデバイスの機能にアクセスする際の課題は何ですか？

• 自由記述

デバイスやOSの機能へのアクセスに関する問題、ファイルシステムとの相互作用、ネイティブアプリの機能セットとの一致など。

9. Usage

How you use HTML.

9-1. ブラウザの差異やサポートの不足のため、使用できない既存のHTML機能やブラウザAPIは何ですか？

• 自由記述

9-2. 既存のHTML機能やブラウザAPIのうち、他の理由で使用できないものは何ですか？（それは何故ですか？）

• 自由記述

既存のHTML機能で、JSを使用して再作成したり拡張したりする必要があるものについてです。

9-3. HTMLに新しい要素を追加できるとしたら、どのような要素を追加しますか？

• 最大4つまで選択する

選択肢：

1. Rich code block
2. Callout
3. Infinite scroll
4. Off-canvas (drawer) menu
5. Tabs
6. Maps
7. Combobox/autocomplete
8. Sortable drag-and-drop list
9. Data table (Data table with sorting, filtering, etc.)
10. Charts/graphs
11. Switch/toggle
12. Footnotes/sidenotes
13. Rich text editor
14. Context menu/right-click menu
15. HTML include (An element that includes content from another page inline in the document.)
16. Dropdown menu
17. Skeleton UI/loading placeholder
18. Segmented button

9-4. どの要素のスタイリングやビジュアルのカスタマイズに最も苦労していますか？

• 最大3つまで選択する

選択肢：

1. <details> and <summary>
2. <dialog>
3. <input type="checkbox">
4. <input type="date">
5. <input type="time">
6. <input type="number">
7. <input type="radio">
8. <input type="range">
9. <input type="color">
10. <select>
11. <select multiple>
12. <svg> (Inline SVG)
13. <datalist>
14. fieldset_and_legend
15. <progress>
16. popover attribute (Popover API)
17. validation_errors

9-5. コンポーネントの実装やHTMLコードの再利用に、どのような戦略を採用していますか？

• 該当するものを全て選択する

選択肢：

1. Server-side templating
   • Server-side templates generated through PHP, Node.js, etc.
2. Build-time templating
   • Astro, Jekyll, other static site generators, etc.
3. Client-side templating
   • DOM manipulation, jQuery, Handlebars, etc.
4. Component-based JavaScript Frameworks
   • React, Vue.js, Angular, etc.
5. Web Components
   • Web components, with or without a helper library.
6. Web Components helper libraries
   • Stencil, Lit, Polymer, etc.
7. Copy-paste
   • Copy-pasting snippets from internal or external sources.

9-6. 以下のデザインシステム戦略のうち、UIの一貫性を維持するためにいずれかを使用していますか？

• 該当するものを全て選択する

選択肢：

1. 要素/コンポーネント
   • 再利用可能なビルディングブロックのライブラリ（例：ボタンやドロップダウンなど）、任意のテクノロジー（例：React、Web Componentsなど）で実装されたもの。
2. デザイントークン
   • 色、余白、タイポグラフィーなどに関する原子的な変数（例：--color-accent-dark. --font-heading など）。
3. ユーティリティ
   • 単一の特定スタイルや動作を適用する低レベルなCSSクラス（例：.visually-hidden, .grid-2x2, .text-center など）。
4. ガイドライン
   • 一貫性を維持し、アクセシビリティやユーザビリティなどの目標を達成するための基準とベストプラクティス。
5. パターン
   • ナビゲーションバーやレスポンシブなページレイアウト全体のような、共通のUI/UXにおける問題を解決する、上記のすべてのコピー・アンド・ペースト可能なハイレベルの取り決め。

9-7. HTML/CSSとJavaScript（またはTypeScript）のコードを書く時間をどのように分けていますか？

• "100% HTML/CSS" or "50% - 50%" or "100% JS" の9段階評価

9-8. HTMLを何に利用していますか？

• 該当するものを全て選択する

選択肢：

1. Blogs or other text-heavy sites
2. Design systems
3. Desktop apps
4. Emails
5. Marketing sites & landing pages
6. Mobile apps
7. Printed documents
8. Web apps

9-9. HTMLや関連技術の利用に関する他の課題はありますか？

• 自由記述

10. Opinions

以下の質問について、各項目にどの程度同意するかを教えてください。

「全く同意しない」「同意しない」「どちらでもない」「同意する」「とても同意する」の5段階評価です。

10-1. アクセシビリティの取り組みの価値

設問「私の職場や職業環境では、アクセシビリティは価値のある取り組みです」

10-2. HTMLの妥当性

設問「HTMLコードが妥当であることを（LinterやValidatorなどを使用して）確認することは重要です」

10-3. 新機能の情報収集

設問「新しいWebプラットフォームの機能について最新情報の収集を継続することはチャレンジです」

10-4. ブラウザの相互運用性の欠如

設問「ブラウザの相互運用性の欠如は、現在、Web開発における主要な障害となっています」

10-5. 各種ブラウザの新機能の実装状況

設問「過去数年間、新しいWeb機能は、ブラウザ間でより迅速なペースで安定化してきました」

10-6. Webプラットフォームの進行方向

設問「Webプラットフォームは、全体として正しい方向に進んでいます」

debiru の回答：自由記述項目

1. HTML forms に関する課題は何ですか？

• The lack of freedom in styling form controls has led to the widespread use of custom implementations such as checkboxes.
• I am concerned about the issue that the validation of <input type="email"> does not comply with RFC 5322 and the stance taken in making that determination.
• This is a problem for website developers, but we are concerned that button elements are often used where anchor elements should be used.

日本語訳：

• フォームコントロールのスタイル設定における自由度の低さが、チェックボックスなどを独自実装してしまう人が増える要因になっていました。
• <input type="email"> のバリデーションが RFC 5322 に準拠していない点、およびその仕様で問題ないと判断していることについて懸念しています。
• これはWebサイト開発者にとっての問題ですが、<a> 要素を使用すべき場所で <button> 要素が頻繁に使用されている点についても懸念しています。

2. 動的なHTMLの変更に関する課題は何ですか？

• The first issue is when anchor positioning will become practical.
• There is a related Invoker Relationship, but it is only effective when the target and trigger are one-to-one. However, in practice, there are cases where it is one-to-many. In cases where it is one-to-many, there are cases where the anchor attribute in HTML is useful rather than CSS, so we would like the specification to allow the use of the anchor attribute.

日本語訳：

• 一点目は、anchor positioning が実用化されるのがいつなのかという問題です。
• "Invoker Relationship" が関連しますが、これはターゲットとトリガーが一対一の関係である場合にのみ有効です。しかし、実際には一対多の関係となるケースもあります。一対多の関係の場合、HTMLの anchor 属性の方がCSSよりも有用なケースがあるため、CSSプロパティではなく anchor 属性が仕様に取り込まれることを期待します。

3. Canvas, SVG, WebGLなどのAPIを使用してグラフィック、サウンド、または動画をレンダリングする際の課題は何ですか？

• The most commonly used element for embedding media is <img>, but this element is a void element and has low extensibility. Alternative content can only be set as a string in the alt attribute.
• Given the existence of the former <image> element and the impractical <object> element, I am concerned about the pros and cons of introducing the new <model> element. I am also concerned about its relationship with the <picture> element.
• Regarding audio, I am particularly concerned about whether or not it can be played automatically on smartphones. From a production standpoint, I would like it to be able to play automatically, but there are security concerns that conflict with this.

日本語訳：

• メディアを埋め込む際に最もよく使用される要素は <img> ですが、この要素は空要素であり拡張性が低いという欠点があります。代替コンテンツは alt 属性に文字列として設定することしかできません。
• かつて存在した <image> 要素や実用性に欠ける <object> 要素が検討された経緯がある中、新しい <model> 要素を導入するメリットとデメリットについて懸念しています。また、<picture> 要素との関係についても懸念しています。
• 音声に関しては、スマートフォンで自動的に再生できるかどうかについて特に懸念しています。演出の観点からは自動的に再生できることが望ましいですが、これと矛盾するセキュリティ上の懸念があります。

4. HTMLのコンテンツ管理に関する課題は何ですか？

• I don't understand the need for a sanitizer API at all. Why is this API being introduced? What is really needed for security is proper escaping and enabling some HTML tags using an allow list. It should not be sanitizing using a deny list.
• Research is underway on the utilization of AI/LLM in 2025. The focus is on providing content in Markdown rather than HTML. It may be worth considering establishing an API for converting between HTML and Markdown as a web standard.

日本語訳：

• なぜSanitizer APIが必要なのか全く理解できません。このAPIが導入される理由は何でしょうか。セキュリティのために本当に必要なのは、適切なエスケープ処理と許可リストを使用して一部のHTMLタグを有効にすることです。拒否リストを使用してサニタイズするべきではありません。
• 2025年現在はAI/LLMの活用に関する研究が進められています。AI活用のためにはHTMLではなくMarkdown形式でのコンテンツ提供が効果的とされています。HTMLとMarkdownの相互変換を可能にするAPIをWeb標準として採択する価値があるかもしれません。

5. パフォーマンスに関する課題は何ですか？

• The srcset and sizes attributes of the <img> element are similar to CSS. In addition, the distinction between the <img> and <picture> elements is unclear, which may hinder widespread adoption.
• Although it is not related to HTML specifications, many developers compress HTML, CSS, and JS source code in HTTP responses for performance reasons. However, I would like to caution against this practice. Compressing source code makes it difficult to read and significantly impairs readability. Furthermore, if the goal is to reduce file size, there are other measures that can be taken besides compression, such as removing unnecessary attributes, but compressing source code can cause developers to overlook these other options.

日本語訳：

• <img> 要素の srcset 属性と sizes 属性はCSSに類似しています。さらに、<img> 要素と<picture> 要素の使い分けが明確でないことは、この機能の普及の障壁になる恐れがあります。
• HTML仕様とは関係ありませんが、多くの開発者はパフォーマンス向上のため、HTTPレスポンスでHTML, CSS, JSのソースコードを圧縮しています。しかし、それを実施する際には注意が必要です。ソースコードの圧縮は難読化を招き、可読性を大幅に低下させます。さらに、ファイルサイズを削減する目的であれば、圧縮以外の措置（不要な属性の削除など）も可能ですが、ソースコードの圧縮は開発者がこれらの他の選択肢を見逃す原因となる可能性があります。

6. ウェブコンポーネントの作成と利用に関する課題は何ですか？

• It is not possible to define custom elements that dynamically adjust heading levels as expressed by the relationship between <section> and <h> elements.
• I don't really understand the necessity of custom elements and Web Components. Rather, it seems unreasonable to try to dynamically define HTML, which is supposed to be interpreted statically. Shouldn't it be defined in the Document Type Definition layer rather than in a layer such as Declarative Custom Elements?

日本語訳：

• <section> と <h> 要素の関係によって表現されるような、見出しレベルを動的に調整するカスタム要素を定義することができません。
• カスタム要素やウェブコンポーネントの必要性がよく分かりません。静的に解釈されるべきHTMLを動的に定義しようとするのは不合理なように思えます。Declarative Custom Elements のレイヤーではなく Document Type Definition のレイヤーで定義されるべきではないでしょうか。

7. Accessibility

7-5. アクセシビリティ戦略の他の手法にはどのようなものがありますか？

1. ✅️ 直感的なキーボードナビゲーション
   • タブ順序以外のナビゲーション。
2. ✅️ 説明的な代替テキスト
   • 画像の目的や内容を説明する代替テキストを提供すること。
3. コンテンツへスキップリンク
   • ユーザーがページのメインコンテンツに直接移動できるようにするリンク。
4. ✅️ <fieldset> と <legend>
   • 関連するフォーム要素をグループ化するために <fieldset> と <legend> を使用すること。
5. ✅️ 情報階層
   • ページの情報を適切に表す見出し（<h1> - <h6>）を使用する。
6. ✅️ 意味のあるリンクテキスト
   • リンクテキストが文脈外でも意味を成すようにする。
7. ✅️ フォームコントロールのラベル
   • すべてのフォームコントロールに <label>（または aria-label など）を付ける。
8. ✅️ 可視的なフォーカスリング
   • 必要に応じてフォーカスリングのアウトラインが明確に表示されるようにする。
9. ✅️ ポインターに依存しない
   • Hover 操作などのポインター操作には、キーボードによる代替操作の手段を提供する。
10. ✅️ 十分なコントラスト
    • コントラストチェッカーを使用して、十分な色コントラストを確保します。
11. ✅️ 色のみに依存しない
    • 色のみによって情報が伝達されないようにする。
12. prefers-reduced-motion メディアクエリ
    • 動きの少ない表示を好むユーザー向けに代替CSSを提供する。
13. prefers-contrast メディアクエリ
    • コントラストを高くする表示を好むユーザー向けに代替CSSを提供する。
14. ✅️ prefers-color-scheme
    • OSまたはUAで設定されているカラースキーム（ライトモード/ダークモード）に応じたCSSを提供する。
15. ✅️ その他
    • Prepare a version of simple HTML website without CSS
      • CSSを用いないシンプルなHTMLページを別途用意する

7-6. Webサイトを作成する際、どのようなユーザーの障害を考慮していますか？

1. ✅️ ロービジョン
   • 失明、高度近視など
2. ✅️ 色覚多様性
   • 色覚異常
3. ✅️ 運動障害
   • 関節炎、手根管症候群など
4. ✅️ 前庭障害
   • てんかん、めまいなど
5. ✅️ 学習障害
   • 読字障害、算数障害など
6. ✅️ その他の認知障害
   • 不安障害、自閉症、強迫性障害、注意欠如多動症など
7. ✅️ 聴覚障害
   • 難聴、耳鳴りなど
8. ✅️ その他
   • Disabilities other than injury or illness (temporary restrictions due to environmental factors)
     • 傷病以外の障害（環境による一時的な障害）

7-9. アクセシビリティに関する最大の課題は何ですか？

• The alt attribute of the <img> element is too weak. A specification should be introduced that allows alternative text to be set in various contexts based on the <image> or <object> elements or the longdesc attribute.
• It is impossible to simultaneously implement features for sighted users and provide information for users with visual, hearing, or limb impairments on a single page. I believe that these should be implemented and provided on separate pages. The longdesc attribute provides a hint.

日本語訳：

• <img> 要素の alt 属性は表現力が弱すぎます。<image> や <object> 要素、あるいは longdesc 属性を応用して、さまざまなコンテキストで代替テキストを設定できる仕様を導入すべきです。
• 健常者向けの機能と、視覚・聴覚・肢体障害のあるユーザー向けの機能を、同一のページで同時に実装することは不可能です。これらの機能は別々のページで実装し提供すべきだと考えます。かつて定義された longdesc 属性の仕様はその方針のヒントになるでしょう。

8. ネイティブシステムやデバイスの機能にアクセスする際の課題は何ですか？

特になし

9. Usage

9-1. ブラウザの差異やサポートの不足のため、使用できない既存のHTML機能やブラウザAPIは何ですか？

• There are various possibilities, but what comes to mind is the practical application of popover attributes and anchor positioning.
  • いろいろ考えられますが、まず思い浮かぶのは、popover 属性と anchor positioning の実用化です。

9-2. 既存のHTML機能やブラウザAPIのうち、他の理由で使用できないものは何ですか？（それは何故ですか？）

• When using <details> and <summary>, there are times when you want to use summary as a heading element, but the markup summary > hn has practical problems. (poor the role on accessibility)
  • <details> と <summary> を使用する際、summary を見出し要素として使用したい場合もありますが、マークアップとして summary > hn とするのは実用上の問題があります（アクセシビリティ上の role がおかしくなります）。

9-3. HTMLに新しい要素を追加できるとしたら、どのような要素を追加しますか？

• 最大4つまで選択する

選択肢：

1. ✅️ Rich code block
2. Callout
3. Infinite scroll
4. Off-canvas (drawer) menu
5. Tabs
6. Maps
7. Combobox/autocomplete
8. Sortable drag-and-drop list
9. ✅️ Data table (Data table with sorting, filtering, etc.)
10. ✅️ Charts/graphs
11. Switch/toggle
12. Footnotes/sidenotes
13. Rich text editor
14. Context menu/right-click menu
15. ✅️ HTML include (An element that includes content from another page inline in the document.)
16. Dropdown menu
17. Skeleton UI/loading placeholder
18. Segmented button
19. Others
    • I look forward to the addition of the extended longdesc attribute specification. (This is my proposal)
      • 拡張された longdesc 属性の仕様の追加を期待しています（これは私の提案です）。

9-9. HTMLや関連技術の利用に関する他の課題はありますか？

• The pros and cons of the HTML Living Standard, the XHTML's dream, and the Polyglot Markup. Should we adhere to the use of self-closing tags and not omit tags?
• I would like to have regulations regarding the formatting of HTML and CSS source code. Many developers compress the source code of HTML and CSS HTTP responses, which makes them difficult to read and causes significant problems.
• I would like to ask experts for their opinions on the argument that multiple h1 elements should not be used on a single page. I have discussed this issue in the past during an MDN edit war, but my opinion was not accepted.

日本語訳：

• HTML Living StandardやXHTMLの理想、Polyglot Markupの是非について。self-closing tagの利用や（省略可能な）タグを省略せずに書くことの意義は何でしょうか。
• HTMLとCSSのソースコードのフォーマットに関する規則を定めていただきたいと考えています。多くの開発者がHTMLとCSSのHTTPレスポンスのソースコードを圧縮しているため、可読性が落ち、重大な問題を引き起こしています。
• 単一のページで複数のh1要素を使用すべきでないという主張について、専門家の方々の見解を伺いたいです。私は以前、MDNの編集合戦でこの問題について議論しましたが、私の意見は受け入れられませんでした。

About me

Self Introduction

I began researching HTML around 2000, and have been researching HTML/CSS specifications, various browser implementations, and the nature of HTTP, URLs, and HTML resources. I also maintain online documentation such as Wikipedia and MDN, and in recent years I have been exchanging opinions on GitHub issues of W3C-owned repository.

私は2000年頃からHTMLの研究を始め、HTML/CSSの仕様やブラウザの実装状況、HTTP, URLs, HTMLリソースの本質について考察しています。またWikipediaやMDNといった技術文書のメンテナンスも行っており、近年ではW3Cが管理するGitHubリポジトリのIssue上で意見交換をしたりもしています。

おわりに

Stete of HTML 2025 は全11カテゴリで合計100問ほどあるため、全ての項目に答えるには多少時間がかかります。私は回答を開始してから回答を終えるまで3日ほどかかりました。

回答完了まで時間がかかったのは、設問数が多く真面目に答えているため集中が続かないこと、設問がほとんど英文なので理解（翻訳）するのに時間がかかったことが要因です。

自由記述のところをスキップするなどすれば、30分くらいで全ての回答を完了することも可能だと思います。

How long will answering the survey take?

Depending on how many questions you answer (all questions can be skipped), filling out the survey should take around 10-15 minutes.

10分〜15分で回答できると書かれていますが、それは違うと思います。15分くらいで回答させたければ設問数を30個くらいにする必要がありそうです。

回答期限が8月15日までとなっていますが、それまでに日本人の回答者が増えることを願っています。

本記事について何かあれば、コメント欄または @debiru_R までどうぞ。