Interop 2027の個人的ランキング
目次
- ランキング
- HTML focusgroup attribute
- Interest invokers
- Single-axis scroll containers
- Shadow DOM referenceTarget
- JavaScript Temporal
- Customizable/stylable <select>
- CSS reading-flow and reading-order properties
- ariaNotify()
- HTML headingoffset and headingreset attributes
- Carryover evaluation for the Accessibility testing investigation area
- まとめ
例年通り、9/3から9/23までInterop 2027のproposalの募集が行われ、12/17までが選考期間になっています。
Firefoxチームが去年から開始したランキングづけページがあります。 肯定的に評価できるInteropのproposalに対して順位をつけることができ、これはFirefoxチームでの検討に役立つとのことです。
海外の開発者たちの何人かはこのランキングを個人のブログにて公開しています。 SaraのMy top picks for Interop 2027 や、その記事の中で他に5人分の記事が紹介されています。
そこで今回、僕もランキング上位に選択したものたちを軽く紹介していきます。
ランキング #
ランキング上位にしたものを紹介しますが、ここでは順不同です。
HTML focusgroup attribute #
メニューやタブ、ツールバーなどなどのUIで、矢印キーによるフォーカス移動の実装を楽にしてくれるHTML属性です。 簡単に一貫性のあるフォーカス操作を提供できるようになり、アクセシビリティの向上に役立ちます。
こんな感じ↓でfocusgroup属性を使えるようになります。
<div focusgroup="toolbar" aria-label="Text formatting">
<button type="button">Bold</button>
<button type="button">Italic</button>
<button type="button">Underline</button>
<button type="button">Strikethrough</button>
</div>詳しくはChromeチームから出ている記事をご覧ください。
Interest invokers #
ホバーやフォーカス、長押しなどユーザーが「興味を示している」ということを判定できたタイミングで、アクションをトリガーできるHTML属性です。 操作方法や環境によらずユーザーが「興味を示している」ことを判定できるので、アクセシビリティ向上に繋がります。
こんな感じ↓でinterestfor属性を使えるようになります。
<p><a href="#" interestfor="mypopover">リンク</a>のついたテキスト</p>
<p id="mypopover" popover>簡単な情報の付いた短いプレビュー</p>詳しくは以下の記事やMDNをご覧ください。
Single-axis scroll containers #
「横にスクロールできるテーブルの見出しを固定したい」ときに役立ちます。
以下のように記述することで、x軸とy軸のスクロールコンテナの挙動を別々に定義できるようになりました。
.table-wrapper {
overflow: auto clip;
}今まではテーブルを複製するなどして無理やり実装する必要があったので、これもアクセシビリティや開発体験の向上に繋がります。
Shadow DOM referenceTarget #
Reference Target for Cross-Root ARIA
Shadow DOM外からShadow DOM内の要素を参照して<label for>したり、aria-labelledbyしたりすることができなかったのを解決するHTML属性です。
<div>
<label for="checkbox">I agree with the terms and conditions</label>
<fancy-checkbox id="checkbox">
<template shadowrootmode="open" shadowRootReferenceTarget="inner-checkbox">
<input type="checkbox" id="inner-checkbox" />
</template>
</fancy-checkbox>
</div>他の方法で解決することが困難な問題を解決する機能であるため、特にアクセシビリティの向上に繋がります。
JavaScript Temporal #
Dateオブジェクトに代わる、JSで日時操作をするためのAPIです。
const zonedDateTime = Temporal.ZonedDateTime.from({
year: 2025,
month: 1,
day: 1,
hour: 9,
minute: 0,
timeZone: "Asia/Tokyo",
});
const duration = Temporal.Duration.from({ hours: 5 }); // 5時間
const addedZonedDateTime = zonedDateTime.add(duration); // 2025/01/01 14:00 JST
Customizable/stylable <select> #
<select>要素の見た目をカスタマイズ可能にします。
自分のプロダクトに合う見た目のセレクトボックスを一から作ることなく、ブラウザ標準でアクセシビリティが確保された要素を使うことができるようになります。
.custom-select {
&,
&::picker(select) {
appearance: base-select;
}
}
CSS reading-flow and reading-order properties #
CSSのorderプロパティなどを使って見た目の順序を変えたときに、Tabキーによるフォーカス順序がそれに伴わない問題を解決するCSSプロパティです。
達成基準 2.4.3: フォーカス順序に直接関係する、アクセシビリティ改善系CSSプロパティです。
.box {
reading-flow: flex-visual;
}
ariaNotify() #
命令的に支援技術にテキストを通知するメソッドです。 ライブリージョンを用いてHACK的に使われていた通知方法を代替できます。
document.ariaNotify("Hello there.");最近MDNのページを日本語に翻訳しました。
HTML headingoffset and headingreset attributes #
見出し要素のレベルを調整できるHTML属性及び、それによって発生しうる問題を解決するCSS疑似クラスです。
<section headingoffset="2">
<h1>Level 3</h1>
<dialog headingreset>
<h1>Level 1</h1>
</dialog>
</section>:heading(1, 3) {
color: tomato;
}
Carryover evaluation for the Accessibility testing investigation area #
Carryover evaluation for the Accessibility testing investigation area
ランキングづけページには含まれていませんが、issueが存在しているものです。 先日以下の記事で紹介したInvestigationを、2027年も継続するかどうか評価するissueです。
まとめ #
是非みなさんもランキングづけしてみてください。