オマケ会 D2D アクセシビリティ勉強会でアクセシブルなCSSを学ぶ

この記事は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点目であるキービジュアル部分について

このディスカッションでは以下のような意見が出ました。

結果的にこちらのほうが良い或いは良くないというはっきりした意見は出なかったので、どちらの記述が良いと思うか多数決を取った結果、キャッチコピーを含む画像をimg要素でマークアップしているグループCの記述に決定しました。

完成したHTMLについて

ディスカッションで決定した記述を反映し、D2DサイトのHTMLとして完成したHTMLはこちらになります。

アクセシブルなCSSについての説明

@SawadaStdDesignさんからアクセシブルなCSSについて説明をしていただきました。 説明時に使用された資料オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」です。

写真
説明をする@SawadaStdDesignさんと真剣に話を聞く参加者の皆さん。

D2DサイトのCSSをグループに分かれて作成

3つのグループ(1グループ4人)に分かれD2Dサイトのデザイン先ほど作成したHTMLを元に下記の条件でCSSを作成してもらいました。

写真
ディスカッションしながら作業をする参加者の皆さん。

勉強会通算8回目にして初めて?作業中盤で1回休憩を入れる事が出来、どのグループもほぼ時間内に作業を終える事が出来ました。皆さんの集中力と作業スピード、グループ内の連携の素晴らしさにシビレました。

完成したものを発表

まずプレビュー表示を見せていただきデザインと相違ないか全員で確認した後、CSSの記述について簡単に説明をしていただき、「アクセシブルにするのに工夫した点」「気づいた事」「苦労した点」「議論に上がった事」「作業を通しての感想」等を発表してもらいました。

グループAのCSS(担当箇所:一番上からキービジュアルまで)
グループBのCSS(担当箇所:活動紹介)
グループCのCSS(担当箇所:D2Dとはから一番下まで)

参加者のかた及び主催者の記事

まとめ

最終回が終わった後なのでおまけ会と題して行いましたが、盛り沢山で濃い内容の勉強会だったと思います。

今回の勉強会でツイートされたものをまとめたオマケ会 D2D アクセシビリティ勉強会 ~アクセシブルなCSSもやっとこう~ もご覧ください。

「アクセシブルなCSSってこれだけ?勉強ってほどじゃないし超簡単」と思われたかもしれませんが、いくらHTMLをアクセシブルにしてもCSSでa要素やinput要素にoutline: noneと記述しフォーカス時のスタイルを何も設定しないだけで非アクセシブルになってしまうほどCSSには影響力があります。
「アクセシブルなCSSってこれだけ?」と思われたなら今すぐアクセシブルなCSSを覚えられると思うので、この機会に是非覚えてください。

今回のおまけ会を終えた事で残してた作業も無事勉強しながら終える事が出来きました。これもひとえに参加者の皆さんをはじめD2Dグループに関わっている皆さんのお蔭だと感謝しています。ありがとうございました。

このアクセシビリティ勉強会の集大成として作成するD2Dのサイトが公開されたら、またここで報告したいと思ってますので皆さん楽しみにしていてください。

コメント (0件)


White Stage
https://white-stage.com/article.php/d2daccessibility7-2nd