2011年11月19日

CSS3で表現力が高くなったからと言って、span等でボタンを作るのはやめて下さい。いえ、やめなさい。もう少し真っ当なHTMLを作ることを心がけましょう。むしろ今すぐwebの仕事辞めて腹を切って死ぬべきである!

CSS3で表現力が高くなったからと言って、span等でボタンを作るのはやめて下さい。いえ、やめなさい。もう少し真っ当なHTMLを作ることを心がけましょう。 - Vimple Star Sprites - vimperatorグループ

で、

で、

もう禿げ上がるぐらいに同意。teramakoさんはアクセサビリティの観点で言及した訳ではないみたいだけど、アクセサビリティの観点からも、spandivでボタン作るwebデベロッパは死ぬべきだと思う。恐ろしい事に、Googleなんかもこの過ちを犯している。

これが、Vimperatorのような『利用者が敢えてポインティングデバイス以外での操作を好んでいる』という場合だけ問題になるのならば兎も角、例えば音声ブラウザを利用せざるを得ない、視力に問題を抱える閲覧者にも影響が有るというのはどうなのか。そんな奴らは知ったこっちゃないって?ふーん?

せめて、WAI-ARIArole属性を付けるとかして欲しい。role="button"とか。それならば、ある程度問題は小さく出来る筈だ。

取り敢えずteramakoさん始めVimperator使いな人達は、.vimperatorrcで'hinttags'WAI-ARIAの属性を拾うよう設定したらどうかと思う。数は少ないが、これらの属性を導入しているwebサイトも在るので。

私は以下のように設定している。上でえらそうに言っておきながら、WAI-ARIAについてきちんと理解している訳ではないので、何処か変な所があるかも知れないが。

set hinttags+="|//*[@role='button' or @role='checkbox' or @role='combobox' or @role='listbox' or @role='listitem' or @role='menuitem' or @role='menuitemcheckbox' or @role='menuitemradio' or @role='option' or @role='radio' or @role='scrollbar' or @role='slider' or @role='spinbutton' or @role='tab' or @role='textbox' or @role='treeitem']"
set hinttags+="|//*[@tabindex]"

追記

はい、変な所在りましたね……
という訳で、上記コードの'extendedhinttags'の行消して、'hinttags'の中から"@role='link' or "消しました。
THX @teramako!

更に追記

2011年12月2日、teramakoさんに唆されてから提案されてVimperatorにパッチ投げて採用された。なので、現在のVimperatorには上記設定はしなくて良い。

タグ:web WAI-ARIA UI
posted by 天井冴太 at 04:25 | Comment(0) | TrackBack(0) | Other | このブログの読者になる | 更新情報をチェックする
投票お願いします 人気blogランキング - 投票する
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

コメント欄右下をドラッグ&ドロップすると、コメント欄の拡大縮小が出来ます。
認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック