オマケ会 D2D アクセシビリティ勉強会でアクセシブルなCSSを学ぶ
- 2015/12/01 00:00 JST
この記事はWeb Accessibility Advent Calendar 2015 1日目の記事です。
2015年11月22日日曜日の13時30分から開催されたオマケ会 D2D アクセシビリティ勉強会 ～アクセシブルなCSSもやっとこう～で、いつものように私は説明と進行を務めました。
最終回で選ばれた2つのHTMLの良いとこ取りをして1つのHTMLを完成させる
最終回で選ばれた同点1位のHTMLは、グループAとグループCのHTMLです。この2つのHTMLを見比べるとそんなに大きな違いはないので、まず私が事前にいいとこどりをしておいた3箇所について説明をし、その後論点を2点に絞って全員でディスカッションしました。(D2Dサイトのデザインはこちらです。)
論点の1点目である関連記事部分について
dlでマークアップするという意見がほとんどで反対意見も出なかったので、グループCの記述を採用する事に決定しました。
論点の2点目であるキービジュアル部分について
このディスカッションでは以下のような意見が出ました。
- キャッチコピーの文末の「ます」が記号で表現されているがスクリーンリーダーでよみあげるのか？(スクリーンリーダーのPC-Talkerでは読み上げるがNVDAとViceOverでは読み上げないので記号のますを記述する場合スクリーンリーダーの環境下でも正しく情報が伝わるように実装する必要がある。by みるく)
- 例えば文末が記号のハートであればスクリーンリーダーで読み上げられなくても大丈夫なのではないか。
- スマホで見た時キャッチコピーを含む画像を縮小すると文字が読めなくなってしまうのではないか？その場合は、スマホ用の画像を用意して srcset を使用した記述にすれば良い。
- グループAのaltの値が空になっているが、altの値には「写真：勉強会の様子」と入れるのが妥当ではないか。
- キャッチコピーをテキストにするならWebフォントを使ってデザインのフォントと同じにし視覚的な事も重視したい。
結果的にこちらのほうが良い或いは良くないというはっきりした意見は出なかったので、どちらの記述が良いと思うか多数決を取った結果、キャッチコピーを含む画像をimg要素でマークアップしているグループCの記述に決定しました。
完成したHTMLについて
ディスカッションで決定した記述を反映し、D2DサイトのHTMLとして完成したHTMLはこちらになります。
アクセシブルなCSSについての説明
@SawadaStdDesignさんからアクセシブルなCSSについて説明をしていただきました。 説明時に使用された資料オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」です。
説明をする@SawadaStdDesignさんと真剣に話を聞く参加者の皆さん。
D2DサイトのCSSをグループに分かれて作成
3つのグループ(1グループ4人)に分かれD2Dサイトのデザインと先ほど作成したHTMLを元に下記の条件でCSSを作成してもらいました。
- デザインを上から3分割し、グループAは一番上からキービジュアルまで、グループBは活動紹介、グループCはD2Dとはから一番下までを担当箇所として作業する。
- 大枠と共通スタイルのみ記述したstyle.cssファイルに追記していく形で作業する。
- 記述ルールはこちらに従って記述する。
- 対応ブラウザは、Windows - Internet Explorer,Firefox,chromeの最新版及びMac - Safari,Firefox,chromeの最新版。
- 使われるであろう画像素材は用意してあるのでそちらを使う。(ひっかけ画像もあるので注意)
- レスポンシブWebデザインにし、文字サイズのみ拡大時も考慮する。
- グループBの「詳細はこちら」ボタンとグループCの「確認する」ボタンの共通スタイルはグループBで作成する。
ディスカッションしながら作業をする参加者の皆さん。
勉強会通算8回目にして初めて？作業中盤で1回休憩を入れる事が出来、どのグループもほぼ時間内に作業を終える事が出来ました。皆さんの集中力と作業スピード、グループ内の連携の素晴らしさにシビレました。
完成したものを発表
まずプレビュー表示を見せていただきデザインと相違ないか全員で確認した後、CSSの記述について簡単に説明をしていただき、「アクセシブルにするのに工夫した点」「気づいた事」「苦労した点」「議論に上がった事」「作業を通しての感想」等を発表してもらいました。
- グループAのCSS(担当箇所：一番上からキービジュアルまで)
- グローバルナビゲーション部分は共通スタイルとして
display: inline-blockで横並びにされていたのでそれを利用して作成しようとしたが隙間が空いてしまっていたので、その回避法として親(ul要素)にfont-size: 0を指定してli要素に本来のフォントサイズ値をemや%で指定したがフォントサイズが0のままだったのでpxで指定してみたが文字サイズのみ拡大が出来なくなってしまったのでどうしようか悩んだ結果、display: inline-blockをdisplay: blockに変更しfloat: leftで横並びさせた。 - 提供されていた素材画像の中にひっかけ画像があったけど、@SawadaStdDesignさんの説明をしっかり聞いていたので引っかかる事はなかった。
- グローバルナビゲーション部分は共通スタイルとして
- グループBのCSS(担当箇所：活動紹介)
- グループ内で2チームに分かれ、分担(「関連情報部分」と「それ以外の部分」)して作業をした。
- 時間が足りず「過去の活動はこちら」のボタン部分のスマホ用のスタイルが作成出来なかった。
- 画面幅が768pxになるまでを考慮し写真画像がある部分の幅を%で指定し、配置はフロートしてみたりしたが結果的に
position: absolute; top: 0で上に上げて配置し、ブレイクポイントの768pxからは縦ならびの中央揃えになるようにした。 - 文字サイズのみ拡大した時、「詳細はこちら」ボタンの右向き三角の背景画像は文字と少し重なってしまうので :after擬似要素に指定した方が良かったと思った。
- 文字サイズのみ拡大時を考慮し、「過去の活動はこちら」のボタン部分は、a要素とspan要素に上下に分けたそれぞれの背景画像を設定した。
- 関連情報部分のdd要素に文字数を増やした場合を確かめたところ、dtに
float: leftを指定して横並びにするとsectionに設定している下の余白(padding-bottom: 133px)がなくなってしまう事がわかったので、dtにclear: left、ddにpadding-left: 156pxを指定してsectionに設定されている下余白を確保した。 - 活動紹介の中のh3要素だけ上に余白が必要だったので、他のh3要素に影響を与えないよう#activity直下のh3にだけに
margin-top: 70pxがあたるようにした。
- グループCのCSS(担当箇所：D2Dとはから一番下まで)
- 必須の箇所は、背景画像を使わずに
border-radius: 7pxで角丸を表現した。 - SNSアイコン部分のhover時とfocus時のスタイルは、
opacity: 0.7で設定した。 - 共通スタイルとしてフォームの幅が50%に指定してあったが、画面を縮めた時に横幅を
width: 650pxと指定している「ご住所」と「お問合せ内容」の入力欄が右側にはみ出してしまうので、フォームの横幅を#address(ご住所)のinput要素と同じサイズのwidth: 650pxで指定してセンタリングするように変えた。 - スマホ用のinput要素の幅はデザインでは住所のところ以外は幅が狭くなっていたが、デザイン通りの幅を%指定すると画面を小さくした時かなり横幅が小さくなってしまうので、横幅を100%にして横に伸びる様にした。
- input要素のfocus時のスタイルを作るのに苦労した。
- 必須の箇所は、背景画像を使わずに
参加者のかた及び主催者の記事
まとめ
最終回が終わった後なのでおまけ会と題して行いましたが、盛り沢山で濃い内容の勉強会だったと思います。
今回の勉強会でツイートされたものをまとめたオマケ会 D2D アクセシビリティ勉強会 ～アクセシブルなCSSもやっとこう～ もご覧ください。
「アクセシブルなCSSってこれだけ？勉強ってほどじゃないし超簡単」と思われたかもしれませんが、いくらHTMLをアクセシブルにしてもCSSでa要素やinput要素にoutline: noneと記述しフォーカス時のスタイルを何も設定しないだけで非アクセシブルになってしまうほどCSSには影響力があります。
「アクセシブルなCSSってこれだけ？」と思われたなら今すぐアクセシブルなCSSを覚えられると思うので、この機会に是非覚えてください。
今回のおまけ会を終えた事で残してた作業も無事勉強しながら終える事が出来きました。これもひとえに参加者の皆さんをはじめD2Dグループに関わっている皆さんのお蔭だと感謝しています。ありがとうございました。
このアクセシビリティ勉強会の集大成として作成するD2Dのサイトが公開されたら、またここで報告したいと思ってますので皆さん楽しみにしていてください。