クリッカブルなボタンとWAI-ARIAのrole=”button”について
前提知識として以下が必要です。
clickイベントに使うためだけにtextとか(下の例の1,2番目)やるのが嫌いで、どうやるのがスマートorシンプルなんだろと思って書き出したもの。input、button 要素がでてこないのはスタイルシート考えるのが面倒で何となくです。button要素をCSSでリンクのようなデザインにできるならそれでもいいじゃないでしょうか。
1番目は今時ない気がするし、1,2番目は状態が遷移しないのにhref指定してると、ミドルクリックなどで別のページとして開けたりしちゃうのでそれを抑制するコードも必要になるのが何か嫌で、3番目当たりが個人的には好きだった。(4番目は何か気持ちわるい)
<div><a href="javascript:void 0;">javscript:ボタン</a></div> <div><a href="#">#なボタン</a></div> <div><a role="button">hrefがないroleボタン</a></div> <div><span role="button">リンクじゃないspanボタン</span></div>
Note: If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.
The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0
そして、A要素のroleはnativeでlinkですが3.2.5 Content models — HTML Standardを見ると、 link
, button
, checkbox
, menuitem
, menuitemcheckbox
, menuitemradio
, tab
, treeitem
のいずれかのroleであれば上書きすることができると書いてあります。(そう読み取れたんだけどあってるのかね)
<a role="button">hrefがないroleボタン</a>
日本語版は一個古い感じなので、内容も結構違う感じする。
- 4.2. Conflicts between native markup semantics and WAI-ARIA
- 3.2. ネイティブなマークアップセマンティクスとARIAとの衝突 翻訳版をみるとnativeなroleがlinkであっても、roleでbuttonと指定すれば上書きできるべきであるみたいな内容。
何で、上書きできるかが気になったかというとjavascript scheme でボタンを作るのは ? | ヨモツネットのコメント欄で、できないかのように読み取れる内容があったため。多分多分、strong native semanticsというのはa要素が本来持っているのはlinkというroleの事で、のようにそれぞれのa要素におけるroleは上書きできるけど、a要素本来のlink(strong native semantics)というroleは上書きできないよって話なのかなーとか思った。(仕様読んでないので自信ない)
ちなみに、jQuery UIの$.button()は
- jQuery UI – Button Demos & Documentation
- jQuery UI に見る WAI-ARIA の実装:dialog 編 – アークウェブアクセシビリティWiki(結構前)
UIライブラリはスタイルとかとセットなので、roleも意味がはっきりしたものとって後はスタイルやった方が良さそうだしね
WAI-ARIA対応のライブラリはこの辺を見た
というわけで、ここに書かれている内容はあまり自信がありません。以上
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。