公開日: 2026 年 5 月 27 日
Baseline の月刊ダイジェストへようこそ。2026 年 4 月には、一部の CSS 機能と高精度な数学ユーティリティが新たに利用可能になり、構造的なセマンティック要素やその他の Web API の追加機能が広く利用可能になりました。また、デベロッパー コミュニティでの出来事もご紹介します。
2026 年の Baseline とユーザー補助機能
ウェブ向けに構築するということは、誰もが利用できるエクスペリエンスを構築することを意味します。A11y Up の最近の記事では、デベロッパーがウェブ標準に依存する場合、ユーザー補助機能のニーズに対応することがより効果的であることが述べられています。これまで、エンジニアはカスタムの JavaScript ソリューション（多くの場合、重い）をリリースして、ウェブ プラットフォームの一部となったユーザー補助機能パターンを再作成してきました。このようなカスタム ソリューションは、不安定で、支援技術で破損しやすく、保守が難しい場合があります。
この記事では、ウェブ プラットフォームの機能がブラウザ間の相互運用性を実現するにつれて、ユーザー補助機能を考慮した開発がより効果的なタスクになることが強調されています。ウェブ機能を使用して一般的な目標とユーザー インターフェース パターンを実現することで、多くの作業が軽減され、適切なセマンティクスがスクリーン リーダーやキーボード ナビゲーション ユーティリティに直接スムーズに公開されます。Baseline は、ウェブ機能がプロジェクトで評価して使用するのに十分な成熟度になった時点を示すガイドとして機能します。
Baseline で新たに利用可能になった機能
このセクションの機能は、2026 年 4 月の時点でコアブラウザ セットでサポートされており、Baseline で新たに利用可能になりました。
CSS contrast-color() 関数
動的なテーマエンジンとカスタマイズ可能なコンポーネントにより、デベロッパーは、高コントラストを好むユーザーに対応するために、複数のカラーシステムを維持する必要がありました。CSS contrast-color() 関数を使用すると、その保守の負担がブラウザに完全に移行します。ベースの入力色を関数に渡すと、エンジンは評価して、コントラストの高いコンパニオン カラーを返します。通常、読みやすさのスコアが最も高い色に応じて、黒または白にマッピングされます。
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
これにより、カスタム ソリューションや保守が難しい CSS を使用せずに、読みやすさに関するユーザー補助機能の標準を満たすことができます。ミッドトーンの色を選択する際は注意が必要ですが、この関数を使用すると、このユーザー対応に必要なボイラープレート CSS が削減されます。詳細については、MDN リファレンス ページをご覧くださいcontrast-color()。
Math.sumPrecise()
標準ループや Array.prototype.reduce() などのメソッドを使用して数値のシーケンスを合計すると、浮動小数点数の精度が低下する可能性があります。これは、重要な財務計算やテレメトリーの合計に影響する可能性があります。
Math.sumPrecise() メソッドは、この問題に対処します。数値のイテラブルを受け取り、精度を損なわないルーチンを実行して正確な合計を提供します。仕組みについては、MDN ドキュメントのMath.sumPrecise()をご覧ください。
Baseline で広く利用可能になった機能
次の機能が Baseline で広く利用可能になりました。つまり、プロジェクトで幅広く互換性があり、使用できるようになりました。
<search> 要素
HTML <search> 要素は、フォーム コントロール、フィルタリング メカニズム、送信ユーティリティの明示的なラッパーとして機能します。これらは、ウェブ アプリケーションでの検索エクスペリエンスをまとめて表します。
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
包含要素を <search> タグに切り替えることで、ユーザーにユーザー補助機能のメリットを提供できます。ブラウザは、要素に暗黙的な ARIA ランドマーク ロール search を自動的に割り当てるため、role="search" を <form> 要素に指定する必要はありません。これにより、スクリーン リーダーは検索インターフェースを識別し、ユーザーが検索インターフェースに移動できるようにします。実装の詳細については、要素<search>の MDN ページをご覧ください。
Web Authentication 公開鍵アクセス
Web Authentication（WebAuthn）API を使用したパスワードレス化が、AuthenticatorAttestationResponse インターフェースでの直接プロパティ抽出の幅広いサポートにより、複雑ではなくなりました。getPublicKey() や getPublicKeyAlgorithm() などのメソッドを使用すると、ブラウザは生のバイナリデータを操作しなくても公開鍵の詳細を抽出できます。これらのプロパティとその使用方法について詳しくは、MDN ページでAuthenticatorAttestationResponseをご覧ください。
String.prototype.isWellFormed() と String.prototype.toWellFormed()
JavaScript 文字列は UTF-16 でエンコードされ、Unicode ペアの複雑な文字と絵文字がマッピングされます。これを考慮せずに文字列をスライスすると、サロゲート ペアの分離された半分（単独サロゲート）が残り、テキストが不正な形式になります。
isWellFormed() を使用すると、文字列に単独サロゲートが含まれているかどうかを確認し、ブール値を返します。文字列の検証に失敗した場合は、toWellFormed() を呼び出して、不正なサロゲートを標準の Unicode 置換文字（U+FFFD）に置き換えることができます。これは、不正な形式の入力が発生すると URIError をスローする encodeURI() などの関数を呼び出す前に役立ちます。これらのメソッドの仕組みについては、の MDN ドキュメントをご覧くださいString.prototype.isWellFormed()。
ARIA 属性の反映
インタラクティブ要素のユーザー補助機能の状態を更新するには、標準の DOM 属性メソッド（element.setAttribute('aria-expanded', 'true') など）を使用してラウンドトリップを行う必要がありました。ARIA 属性の反映により、ユーザー補助機能のプロパティがオブジェクト プロパティとしてミラーリングされるため、この処理が簡素化されます。
Element インターフェースは、ARIA 属性を element.ariaExpanded、element.ariaChecked、element.ariaHidden などのインスタンス プロパティに直接反映します。これにより、ドット表記構文を使用してユーザー補助機能の状態を変更できます。
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
ARIA ターゲットを JavaScript プロパティとして扱うことで、UI フレームワークと状態管理ツールが支援コンテキストをより確実に調整できるようになり、スクリーン リーダーのコンテキストを実際のアプリケーションの状態と一致させることができます。反映されるプロパティの完全なリストについては、インスタンス プロパティに関する ElementMDN ガイドをご覧ください。
以上で終了です
Baseline に関連して記載漏れがありましたら、お知らせください。今後のエディションで取り上げさせていただきます。Baseline に関するご質問やフィードバックがある場合は、Issue Tracker で問題を報告してください。