アクセシビリティ
みなさん日頃アクセシビリティを考慮したマークアップができていますか？
みなさんがお使いの（？）Svelte（コンパイラ）にはデフォルトでマークアップ上のミスに対して警告を出してくれる機能がついています。
この記事ではa11y_から始まる警告についてみていきます。
a11y_accesskey
accesskey属性を使うのをやめましょうという警告です。
accesskey属性については支援技術やブラウザなどのショートカットキーと競合する可能性があり、こっちでは動くがあっちでは動かない であったり、指定されたキーがキーボードになかったりなどの問題があるため、一般的には使わないようにしましょう ということになっているようです。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/accesskey
一応MDNのサンプルで確認したところ、MacのChrome+VoiceOverだと
アクセスキー利用可能: "s", ショートカット利用可能："Ctrl+Alt+s"
のように表示され、アクセシビリティツリーにもkeyshortcuts: "Ctrl+Alt+s"の情報は表示されていた
ので使えないこともなさそうですが、
支援技術やブラウザなどのショートカットキーと競合する
この点は解消できないので使わない方が良さそうです。
ショートカットキーを実装する必要がある場合は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を入れましょう。