最終回のあとのオマケということで、htmlとCSSの完成を目指しました。
CSSはページを三分割してグループごとに実装。その後、グループ発表をして、一つにまとめました。
@SawadaStdDesignさんのオマケ会 D2D アクセシビリティ勉強会資料
「アクセシブルなCSSをつくろう」
結局どうする？新着リストとキービジュアル
前回、グループごとに作ったhtmlを一つにまとめていく中で、どっちを採用するか？という意見交換と多数決を行いました。
新着リスト
リストタグ（ul,li）でくくるのか、定義・説明リスト（dl,dt,dd）でくくるのか？
私は、ほぼ定義リストで組んでいて、理由としてはどんなデザインが来ても扱いやすいのと、dtタグ一つに対して、ddを複数配下におけることなど汎用性が高いかなーと思って使っています。
でも、確かにリストタグの方が分りやすいのかもなぁと思ったりもしました。
多数決としては、定義・説明リストの方が多かったので、D2Dのサイトではこちらを採用。
ちなみに、どちらのタグが正解というものはありません。このあたりは適宜自分で判断していきましょう。
キービジュアル
画像の上に文字（リード文）が載っている。どうする？
「気になること、本当に知りたいこと。ここにあり〼。」
普段なら、画像に勉強会の風景というaltを入れて、文字はテキストで画像の上に載せる。という方がほとんどだったと思います。
が、この枡記号を読めないスクリーンリーダーがあります。。。ならどーする？
ココで、そういう意見もあるのかーとハッとしたのは、「ます」を読まなくても意味は通るから別にいいんじゃない？という考え。
たしかに「気になること、本当に知りたいこと。ここにあり。」でとまってもまぁイケる！
ただ、今回はアクセシビリティ勉強会ですからね！チャント全てを伝えることに注力してやってきましたので、キービジュアルは一枚の画像で対応することになりました。
音声ブラウザのNVDAが進化していた！
第6回 の勉強会でやったフォームのhtmlですが、
＞※html5で用意されている”required”は、現状 音声ブラウザのNVDAで「無効なエントリー」と読み上げられてしまう。。。のでWAI-ARIAのaria-required=”true”を入れましょう。
とう話があったのですが、これが解消されております！
旧）
<input type="text" id="name" aria-required="true" />
新）
<input type="text" id="name" required />
グループに分かれてのCSS実装
私のグループに振り分けされたデザインは、実は大きな山場となるデザインがなくwww。
全くこれといったネタがありません。。。スイマセン！！！
ウッカリ忘れがちになってしまうのは、
・:hoverだけでなく:focusも指定する！
・aタグのスタイルにoutline:none;をしてしまう
↑この設定があるととキーボード操作時にどこにフォーカスが当たっているのかサッパリわからなくなってしまうので、これを消してはダメです！
これねー、結構上層のCSSで消されてることが多々ありますので。チェックです。
こんなところでしょうか。。。（汗
所感
8回に渡ってアクセシビリティ勉強会やってきましたが、最初フワフワしていた私の考えも無事着地することができました。
おそらく他のアクセシビリティ勉強会に行っても吸収力が今までと違う感じになってると思います！
串カツも行ったし、来年はお好み焼きだー！！