Svelteコンパイラとアクセシビリティの警告

## アクセシビリティ
みなさん日頃アクセシビリティを考慮したマークアップができていますか？

みなさんがお使いの（？）Svelte（コンパイラ）にはデフォルトでマークアップ上のミスに対して警告を出してくれる機能がついています。

この記事では`a11y_`から始まる警告についてみていきます。

## a11y_accesskey
accesskey属性を使うのをやめましょうという警告です。

accesskey属性については支援技術やブラウザなどのショートカットキーと競合する可能性があり、こっちでは動くがあっちでは動かない　であったり、指定されたキーがキーボードになかったりなどの問題があるため、一般的には使わないようにしましょう　ということになっているようです。

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/accesskey
一応MDNのサンプルで確認したところ、MacのChrome+VoiceOverだと

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/11a04a30-b50f-a544-4530-6dc127bec623.png)

> アクセスキー利用可能: "s", ショートカット利用可能："Ctrl+Alt+s"

のように表示され、アクセシビリティツリーにも`keyshortcuts: "Ctrl+Alt+s"`の情報は表示されていた
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/3a271617-b51d-a516-207c-d7ee5ef9bcba.png)

ので使えないこともなさそうですが、

> 支援技術やブラウザなどのショートカットキーと競合する

この点は解消できないので使わない方が良さそうです。
ショートカットキーを実装する必要がある場合は`aria-xxx`を使うよりもこれを使うと良さそうですね。

## a11y_aria_activedescendant_has_tabindex
`aria-activedescendant`は特定の`role`を持つ要素の属性としてのみ使用可能な属性で、その要素にフォーカスがあったっている時にアクティブな要素を特定するために使用するようです。

例えばコンボボックスにフォーカスがあったっている時にどのoptionを選択しているのかを示したりするものですね。
`focus`を受け取れるものである必要があるため、`div`などにつけると怒ってくれるようです。

`tabindex`に負の値を指定するだけで通ってしまうのでだいぶ緩いですが、警告が出た時に調査すれば何をすればいいのかわかるのでまぁいいでしょう。

## a11y_aria_attributes
この要素にその`aria-xxx`はつけられないよ〜ってやつですね。
アクセシビリティ気にしたての頃はなんとなく`aria-xxx`を使ってしまいがちなのでこういう警告は助かりますね。

## a11y_autocomplete_valid
`autocomplete`の値に入れられないものが入ってるで　って警告です。

`import type { FullAutoFill } from 'svelte/elements';`
で値の一覧を見ることができます。

## a11y_autofocus
autofocusを使うな　です。
ユーザーの意図せぬタイミングでフォーカスを移動させるとアクセシビリティ上の問題があるので避けましょうというやつですね。

`dialog`では`autofocus`を逆につけるべきなのでここは警告してほしくないですが、現状`Avoid using autofocus`と怒られてしまうようでした。
今後改善されるかもしれません。

## a11y_click_events_have_key_events
例えばroleのないdivなど、非インタラクティブな要素にclickやkeyupなどのイベントリスナーを張るな　というやつです。

やむを得ずbuttonではなくdivでボタンを作りたい場合などは`tabindex="-1"`やroleの付与が必要ですが、これをつけると警告は消えるので助かりますね。

## a11y_consider_explicit_label
buttonやaなどの要素の中にテキストがない時、アクセシブルネームがないよと怒ってくれます。
若干判定が甘くて、
`<button><img src="" alt=""></button>`
こういうのに対して警告は出してくれません。

この辺はテストなどでうっかりミスを防いでおくといいかもしれませんね。

## a11y_distracting_elements
`marquee`や`blink`などのアクセシビリティ上問題のある要素を使った時に怒ってくれます。
今どき使わん…

## a11y_figcaption_index
`figure`の中で`figcaption`が最初か最後になってなかったら怒ってくれます。
地味に嬉しいですね。

## a11y_figcaption_parent
`figure`の中で`figcaption`が直下の要素になっていないとき怒ってくれます。
これも地味に嬉しいですね。

## a11y_hidden
見出しやインタラクティブな要素などに`aria-hidden`がついていたら怒ってくれます。
意外とやっちゃいがちなんですよねこれ…

## a11y_img_redundant_alt
`alt`にimage、picture、photo という単語が含まれないように強制してくれます。
altに「画像」と入れた場合通ってしまいます。う〜ん

## a11y_incorrect_aria_attribute_type
その`aria-xxx`にその値は入れられまへん。考え直しておくれやす。です。

## a11y_incorrect_aria_attribute_type_boolean
`true`か`false`をいれておくれやす。です。

## a11y_incorrect_aria_attribute_type_id
これはよくわからないですね…エラーを出す方法がわからなかったので誰か教えてください。

## a11y_incorrect_aria_attribute_type_idlist
`<button aria-labelledby="" type="button">クリックすると何かが起こる</button>`
こういうHTMLを書いたら怒ってくれます。
スペースで繋げた`string`を入れてねってやつですね。

## 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_interactive_supports_focus
前で説明した`onclick`などの`focus`版です。

## a11y_invalid_attribute
`<a href="#">invalid</a>`こういうのを怒ってくれます。
コーディング中一時的にダミーとして入れておけば警告が出るので抜け漏れがなくなって良さそうですね。

## a11y_label_has_associated_control
`<label>A</label>`こういうのを怒ってくれます。
`<label>C <input type="text" /></label>`これはOK。賢い！

## a11y_media_has_caption
`video`や`audio`などにキャプションをつけてくださいという警告です。
あまり使うことがないので初めてみました。

## a11y_misplaced_role
この要素にこの`role`は使わないでね　というやつです。

## a11y_misplaced_scope
`th`には`scope`属性をつけた方がいいですが、`div`につけたりすると怒ってくれるようです。
そんなことせんわ。

## a11y_missing_attribute
`a`に`href`がないんですけど　みたいな警告を出してくれます。

## a11y_missing_content
要素の中にコンテンツがないといけないものについて怒ってくれます。
親切ですね。

## a11y_mouse_events_have_key_events
前で説明した`onclick`などの`onmouseover`など版です。

## a11y_no_abstract_role
何だこれは…どういう時に出るのかわかる人がいたら教えてください。

## a11y_no_interactive_element_to_noninteractive_role
インタラクティブな要素に非インタラクティブな`role`をつけて上書きしないでねという警告です。

## a11y_no_noninteractive_element_interactions
その要素インタラクティブじゃないんすけど〜ってやつです。
これは怒られたことがある人はいるんじゃないでしょうか。

## a11y_no_noninteractive_element_to_interactive_role
a11y_no_interactive_element_to_noninteractive_roleに似たやつ。

## a11y_no_noninteractive_tabindex
`tabindex`にはマイナスの値を入れてね　です。

## a11y_no_redundant_roles
`<button role="button" type="button">クリックしたら何かが起こる</button>`みたいなデフォルトの`role`は指定しなくていいよ　というやつ。
`<ul role="list"></ul>`これは例外で怒られないようです。わかってるなぁ…

## a11y_no_static_element_interactions
前で説明した`onclick`のやつと似てますね。`onclick`とかをつけたかったら`role`をつけろということです。
この辺は`div`に`onclick`をつけようとしたら何個かセットで怒られますね。

## a11y_positive_tabindex
`tabindex`にはマイナスの値を入れてね　です。

## a11y_role_has_required_aria_props
その`role`を指定するならこっちの`aria-xxx`とかもつけてね　です。
HTML標準の要素を自前実装する時嬉しいですね。

## a11y_role_supports_aria_props
その`role`ならこの`aria-xxx`はつかえないよ　です。
いちいち覚えてられないので嬉しいですね。

## a11y_role_supports_aria_props_implicit
例が一緒なので違いがわからない…

## a11y_unknown_aria_attribute
そんな`aria-xxx`はないよ　です。

## a11y_unknown_role
そんな`role`の値はないよ　です。

## まとめ
Svelteだとアクセシビリティのアの字を知らなくてもデフォルトである程度怒ってくれるのでこれきっかけでアクセシビリティに関心を持った人も多いのではないでしょうか。

これだけでもそこそこ助かるのですが、これでもまだ不十分です。
[Markuplint](https://markuplint.dev/ja/)を入れましょう。

[記事も書いてるのでみてね](https://qiita.com/shamokit/items/e0313236726334de13c9)