HTMLラジオボタンを大きくする方法について

C17: テキストを含むフォームの要素を拡大する | WCAG 2.0 達成方法集（原文）には、

この事例は、テキストサイズ機能のある IE で動作する。しかしながら、Firefox 2.0 では拡大されない。

XHTML コンポーネント:

<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />

CSS コンポーネント:

input.geomsize {
width: 1.2em;
height: 1.2em;}

という具合の実装方法が記載されている。まあ、最初はFirefox 2.0とかいつの時代の話なんだ、とか突っ込んでましたが、Firefox 53.0.2 (Windows 10)でもやっぱり動作しない（というかWebKit (Bash on Ubuntu on Windowsのepiphany-browser)でも動作しないようだ）。こんなアレなコード例があるのが達成方法集なのだけども、このままなのは癪だというのがこの記事の主旨（？）だったりする。


でまあ適当に検索すると、ラジオボタン・チェックボックスの大きさをCSSで変更する方法 - Qiitaとか出てきて、

input[type="radio"] , input[type="checkbox"]{
   -webkit-transform: scale(1.5);
   transform: scale(1.5);
   margin-right: 0.5em;
}

という具合にtransform CSSを使えばどのブラウザーでもボタンを大きくすることができるようだ（綺麗に拡大できるとは言っていない）。


さらにHTML フォームへの高度なスタイル設定 - ウェブ開発を学ぶ | MDNでは、

<span><input type="checkbox"></span>

span {
    display: inline-block;
}
input[type=checkbox] {
    width : 100px;
    height: 100px;
}

とすればFirefoxでも大きくできるようなことが示唆されているが、再現されなかった。

もっと賢いやり方があるかもしれないので、こういうのはどうか、というのがある人は是非教えて欲しい。


最後にcodepenを貼っておくので、各種環境で確かめてみるとよいだろう。

See the Pen mmLNMq by Momdo Nakamura (@momdo) on CodePen.


追記：

Mozillaの中野さんからFirefox内部の処理に関する言及をいただいている。併せて参照されたい。

2016年版のWCAG 2.0達成方法集がWAICサイトで公開されました

新しいWCAG 2.0解説書がWAICサイトで公開されましたの続き。このエントリーでは、

新しいWCAG 2.0実装方法集がWAICでいつ公開できるのかについては現時点で明言できませんが、個人的な予想としては、来年春までには公開できるだろうと踏んでいます、たぶん。

と書いていましたが、だいたいその通りに2016年10月7日付けのWCAG 2.0 達成方法集*1をWAIC内部の手続きを経て公開できる運びとなりました。これでWAICにある古いままだったWCAG 2.0の補助文書が一掃できたことになります。WAIC WG4のみなさま、ひとまずおつかれさまでした。

旧実装方法集は2012年1月3日付けと解説書と同様にかなり古く、かつdiff-markedなW3Cノートであったために、まずはTechniquesの作業に取り掛かり始めた2016年秋時点で最新の（そして2017年4月現在で最新でもある）2016年10月7日付けのW3Cノートに追いつくことを最優先課題として、更新に取り組んできました。そのため、日本語としておかしな箇所があることと思われます（WG4としてもそのことは認識されています）。

ここで達成方法集の説明をしておくと、WCAG 2.0の達成基準を達成するためには様々な技術的な方法が考えられるけれども、そのうちの代表的ないくつかのものをまとめて掲載している、というのが今回翻訳を更新したものになります。

ウェブアクセシビリティ改善のためのヒントとして達成方法集をご活用ください。


さて、先に示したように、達成方法集の翻訳にいくぶんかの問題が残ってことを認識していますが、WG4の次の課題として、まずは達成方法集に先行して更新を行った解説書の翻訳品質を改善する必要があろう、ということで翻訳の品質の底上げをする計画でいます。これに関連して、WG4では（現時点では公式なアナウンスはありませんが）レビューコメントを受け付けています。（主に解説書についてのコメントを希望しますが、もちろん達成方法集に関してのコメントも歓迎します）。

公式にはWAICのお問い合わせページからコメントを送付する、ということになっていますが、そもそも翻訳に関してコメントを送付してよいものかどうかがわかりにくい、と個人的には思っています。これについて、筆者からWG4に改善の提案をしているところです。WAIC内部の話し合いを経たうえで何らかのアクションがとられるものと思います。

公式にコメントするのが気が引けるという方は、もんど個人にTwitterでメンションを飛ばしていただいても構いません。フィードバックを歓迎します。

*1:本体規格が達成方法集と訳出を変更したために、実装方法集から名称が変更されています