【イベントレポ】オマケ会 D2D アクセシビリティ勉強会～アクセシブルなCSSもやっとこう～に参加しました #d2draft

Posted on2015年11月23日 Edit on2016年4月30日 by misumi_takuma

D2Dのアクセシビリティ勉強会「オマケ会 D2D アクセシビリティ勉強会～アクセシブルなCSSもやっとこう～」に参加しました。

年間通しアクセシビリティについて勉強し、最後はみんなで勉強しつつアクセシブルなサイトを制作していました。

前回記事はこちら

【イベントレポ】最終回 D2D アクセシビリティ勉強会～HTMLをコーディング～に参加しました。

前回が最終回でしたが、CSSまでやろうということで今回のおまけ会が開催されました。

アクセシブルなCSS

アクセシブルなCSSの基本として@SawadaStdDesignさんが話されていたのが以下。

マークアップとスタイルは分離する
CSSの有効/無効で得られる情報を変えない
CSSの有効/無効でコンテンツの意味を変えない
CSSの有効/無効で操作可能な範囲を変えない

つまり、「スタイルをオフにしても正しく情報を得ることができ、正しく操作ができること」がアクセシブルなCSSの原則。

こう言われるとなかなか思い浮かべにくいので、アクセシブルでない例を幾つか紹介されました。

アクセシブルでない例

例えば、テキストをoverflow:hiddenで範囲外のものを非表示にした場合。
収まっていないテキストは隠れますが、スクリーンリーダーでは読み上げられてしまいます。

と考えるとCSSで範囲外のものを三点リーダー(…）にするテクニックも該当するかな。
こういうやつ。けっこう便利だなと思ってたけど。

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

他によくありそうなのは、フォーカス時のスタイルが当たってないとか。
:focusを指定していないと、キーボード操作時にどこにいるか分からなくなっていまいます。

他にもいろいろありましたが、けっこう何気なくやってしまいそうなので、
気をつけないといけないなと思いました。

当日のスライドはこちら

オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」 from Nozomi Sawada

実際にやったこと

3グループに分かれて、前回マークアップしたものをセクションごとに担当してCSSを書きました。
（原則class指定不可がちょっとめんどかったですが…。）

自分がいたグループが担当した箇所はここです。

メインビジュアルまでのヘッダー部分。
レスポンシブで768px以下ではナビゲーションが縦に並びます。

:focusを指定する。

先ほども書いた通り、フォーカス時のスタイルがないとキーボード操作時にどこにフォーカスが当たっているか分かりません。

ナビゲーションはマウスオーバーで背景色が少し薄くなりますが、それをフォーカスでも指定しました。

header ul a:hover,
header ul a:focus {
	background-color: #4d4d4d;
}

詰まったinline-block問題

今回まっさらな状態からCSSを書いたわけでなく、最低限は指定されていました。

その記述でliタグにinline-blockを指定しメニューを横並びにされてたので、
それを活かしてCSSを書こうと思いましたが、inline-blockって謎の隙間ができます。

<nav role="navigation">
	<ul>
		<li><a href="#activity">活動紹介</a></li>
		<li><a href="#about">D2Dとは</a></li>
		<li class="nav_external"><a href="https://d2draft.doorkeeper.jp/">イベント一覧<img src="img/icon_external.png" alt="別サイトに移動します。"></a></li>
		<li><a href="#inquiry">お問合せ</a></li>
	</ul>
</nav>

回避方法で、inline-blockが指定されているliタグの構造で横並びにする方法やliタグの閉じタグをなくす方法などありますが、
見た目の問題はCSSで解決したいので、この方法はあんまり好きではないです。

横並び

<nav role="navigation">
	<ul>
		<li><a href="#activity">活動紹介</a></li><li><a href="#about">D2Dとは</a></li><li class="nav_external"><a href="https://d2draft.doorkeeper.jp/">イベント一覧<img src="img/icon_external.png" alt="別サイトに移動します。"></a></li><li><a href="#inquiry">お問合せ</a></li>
	</ul>
</nav>

li閉じタグなし

<nav role="navigation">
	<ul>
		<li><a href="#activity">活動紹介</a>
		<li><a href="#about">D2Dとは</a>
		<li class="nav_external"><a href="https://d2draft.doorkeeper.jp/">イベント一覧<img src="img/icon_external.png" alt="別サイトに移動します。"></a>
		<li><a href="#inquiry">お問合せ</a>
	</ul>
</nav>

一番いいかなと思うのがfont-sizeを使う方法。
inline-blockの親要素にfont-size:0を指定し、inline-blockを指定している要素で再びfont-sizeを復活させる方法です。

ul {
    font-size: 0;
}
li {
    font-size: 16px;
}

強引な感じですが、CSSで解決できるしこれが一番かなと。

ただこれちょっと問題が。

pxでフォントサイズを復活させると、文字を拡大できなくなりました。
pxで指定してるからかな。

その指摘をグループ内で受けて、liタグのフォントサイズを%やemに変えましたが、
親がいったん0になってしまってるので、フォントサイズが復活しませんでした…。

remだったらいいのかも。

んでもう仕方なく、せっかくinline-blockを指定されてましたがfloatに変更しました。

さいごに

これでホントに最後のアクセシビリティ会でした。

.netでドメイン取得されてたので、後日公開されると思います。

まだまだ実践できてないことが多いので、これからも継続して勉強します。
D2Dでもまたやってほしいなー。

あと、アクセシビリティ界隈に若い人がいないそうなので、頑張ろうかな。

余談ですが…

勉強会のあとは近くの串カツ屋に行って懇親会でした。

D2Dアクセシビリティ会の先生@SawadaStdDesignさんの今回のスライドですが、
「だるま」とか串カツのイラストとか、要所要所に串カツに関するワードが出てくるんで、
串カツ屋で「串カツ食べたかったんですよね？」と聞いたら、
「いや、そんなことないよ」と返されました。

シリーズがひと段落したばかりなのに、もう次の構想が。この勉強会のモチベーションの高さとフットワークの軽さスゴイなー。参加してホント良かった。串かつも食えたし。 #d2draft

— 澤田スタンダードデザイン (@SawadaStdDesign) November 22, 2015

いや、食べたかったんじゃん！

来年も開催してください。串カツ行きましょう！

Pocket

Snaplog