Svelte Accessibility on 2025-10-24
https://gyazo.com/614817a6bfe60c1525fe86a85a4910f4
https://gyazo.com/a6d28b60f6d8d7af63407708ad65cebf
メニューのドキュメントアイコンより「プレゼンテーションを開始」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
https://gyazo.com/fc104e5740b8583c80a6931600053618 https://vuefes.jp/2025/speaker/yamanoku
https://gyazo.com/a4bc4bfef5495844d5fe54b27a67afba
どうやら今日同じ時間帯で発表する人がこの会場にいるっぽいです
そんなことあるんだ
https://gyazo.com/89fb567058cfece9847d4fe2f9c23579
NOW！
Compiler Warningの項目変化
a11yルールは現時点で42個
前回発表時点で32個なので10個増加
新しく増えた項目
a11y_consider_explicit_label
ボタンとリンクにはテキストを含めるか、aria-label、aria-labelledby、またはtitle属性を設定する必要ルール
a11y_role_supports_aria_props_implicit
暗黙のroleがあるものに対してサポートされていないARIAを使用してはならない a11y_incorrect_aria_attribute_type_boolean
a11y_incorrect_aria_attribute_type_id
a11y_incorrect_aria_attribute_type_idlist
a11y_incorrect_aria_attribute_type_integer
a11y_incorrect_aria_attribute_type_token
a11y_incorrect_aria_attribute_type_tokenlist
a11y_incorrect_aria_attribute_type_tristate
a11y-structureが廃止
a11y_figcaption_indexとa11y_figcaption_parentに分離
https://gyazo.com/63f90eb0db47eae50ac1da939df1fc3b
前回の発表で突っ込んでたところ
旧：a11y-check
新：a11y_check
v5.20.0から同梱された
code:svelte.html
<script>
const uid = $props.id();
</script>
<form>
<label for="{uid}-firstname">First Name: </label>
<input id="{uid}-firstname" type="text" />
<label for="{uid}-lastname">Last Name: </label>
<input id="{uid}-lastname" type="text" />
</form>
用途
code:html
<button type="button" id="anchor">Anchor</button>
<div anchor="anchor">Tooltip</div>
prefersReducedMotion
v5.7.0から同梱
アニメーションを削除したり縮小するOS側の設定があった場合に適用される prefers-reduced-motion: reduceがあればtrueを返す
Richは<div />こんにちはを<div></div>こんにちはになると思っていたが
実際は<div>こんにちは</div>と解釈されてしまうことに気づいた
npx svelte-migrate self-closing-tagsでマイグレーションできるようにした 個人的によかったところ
Richが真に問題として上げていることは、人々が不完全なHTMLをSvelteに貼り付けて異なる動作を経験することよりも、逆のことを上げている。 つまり、有効なSvelteのスニペットをHTMLのコンテキストに持っていき、そこで壊れる経験をする人々のことを懸念している 今のままのSvelteを提供することは人々に壊れたコードを書いていくことにつながるので、非常に悪いことだと考えている
Thank you for listening !
https://gyazo.com/4c1d0df4903765cc351797c10f903ba1