この記事はWeb Accessibility Advent Calendar 2015 1日目の記事です。
2015年11月22日日曜日の13時30分から開催されたオマケ会 D2D アクセシビリティ勉強会 ~アクセシブルなCSSもやっとこう~で、いつものように私は説明と進行を務めました。
最終回で選ばれた同点1位のHTMLは、グループAとグループCのHTMLです。この2つのHTMLを見比べるとそんなに大きな違いはないので、まず私が事前にいいとこどりをしておいた3箇所について説明をし、その後論点を2点に絞って全員でディスカッションしました。(D2Dサイトのデザインはこちらです。)
dlでマークアップするという意見がほとんどで反対意見も出なかったので、グループCの記述を採用する事に決定しました。
このディスカッションでは以下のような意見が出ました。
結果的にこちらのほうが良い或いは良くないというはっきりした意見は出なかったので、どちらの記述が良いと思うか多数決を取った結果、キャッチコピーを含む画像をimg要素でマークアップしているグループCの記述に決定しました。
ディスカッションで決定した記述を反映し、D2DサイトのHTMLとして完成したHTMLはこちらになります。
@SawadaStdDesignさんからアクセシブルなCSSについて説明をしていただきました。 説明時に使用された資料オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」です。
説明をする@SawadaStdDesignさんと真剣に話を聞く参加者の皆さん。
3つのグループ(1グループ4人)に分かれD2Dサイトのデザインと先ほど作成したHTMLを元に下記の条件でCSSを作成してもらいました。
ディスカッションしながら作業をする参加者の皆さん。
勉強会通算8回目にして初めて?作業中盤で1回休憩を入れる事が出来、どのグループもほぼ時間内に作業を終える事が出来ました。皆さんの集中力と作業スピード、グループ内の連携の素晴らしさにシビレました。
まずプレビュー表示を見せていただきデザインと相違ないか全員で確認した後、CSSの記述について簡単に説明をしていただき、「アクセシブルにするのに工夫した点」「気づいた事」「苦労した点」「議論に上がった事」「作業を通しての感想」等を発表してもらいました。
display: inline-block
で横並びにされていたのでそれを利用して作成しようとしたが隙間が空いてしまっていたので、その回避法として親(ul要素)にfont-size: 0
を指定してli要素に本来のフォントサイズ値をemや%で指定したがフォントサイズが0のままだったのでpxで指定してみたが文字サイズのみ拡大が出来なくなってしまったのでどうしようか悩んだ結果、display: inline-block
をdisplay: block
に変更しfloat: left
で横並びさせた。position: absolute; top: 0
で上に上げて配置し、ブレイクポイントの768pxからは縦ならびの中央揃えになるようにした。float: left
を指定して横並びにするとsectionに設定している下の余白(padding-bottom: 133px
)がなくなってしまう事がわかったので、dtにclear: left
、ddにpadding-left: 156px
を指定してsectionに設定されている下余白を確保した。margin-top: 70px
があたるようにした。border-radius: 7px
で角丸を表現した。opacity: 0.7
で設定した。width: 650px
と指定している「ご住所」と「お問合せ内容」の入力欄が右側にはみ出してしまうので、フォームの横幅を#address(ご住所)のinput要素と同じサイズのwidth: 650px
で指定してセンタリングするように変えた。最終回が終わった後なのでおまけ会と題して行いましたが、盛り沢山で濃い内容の勉強会だったと思います。
今回の勉強会でツイートされたものをまとめたオマケ会 D2D アクセシビリティ勉強会 ~アクセシブルなCSSもやっとこう~ もご覧ください。
「アクセシブルなCSSってこれだけ?勉強ってほどじゃないし超簡単」と思われたかもしれませんが、いくらHTMLをアクセシブルにしてもCSSでa要素やinput要素にoutline: none
と記述しフォーカス時のスタイルを何も設定しないだけで非アクセシブルになってしまうほどCSSには影響力があります。
「アクセシブルなCSSってこれだけ?」と思われたなら今すぐアクセシブルなCSSを覚えられると思うので、この機会に是非覚えてください。
今回のおまけ会を終えた事で残してた作業も無事勉強しながら終える事が出来きました。これもひとえに参加者の皆さんをはじめD2Dグループに関わっている皆さんのお蔭だと感謝しています。ありがとうございました。
このアクセシビリティ勉強会の集大成として作成するD2Dのサイトが公開されたら、またここで報告したいと思ってますので皆さん楽しみにしていてください。
コメント (0件)