グループに分かれてD2Dサイトのデザインを元にアクセシブルなHTMLをコーディング。
その後、グループ発表をしてまとめとなりました。
@SawadaStdDesignさんの第7回 D2D アクセシビリティ勉強会資料
「D2Dサイトをアクセシブルにマークアップ」
今回の勉強会の目指すところ
第5回で選ばれたデザインを元にhtmlのマークアップ。
アクセシブルなHTMLの見本になる、
そして 誰が見てもアクセシブルなHTMLだ！と絶賛されるコーディングを目指します。
グループ発表で気づいた個人的メモ抜粋
別サイト（同ドメインから抜ける）に移動するというアナウンスは必要ですか？
- 見ている人にとってその情報必要なのか？
- 同じナビゲーション（体裁）の中に一つだけ性質の異なるリンクが入るので、あえての親切心。
キービジュアルは<header>、<main>それとも独立させる？
- グループごとに解釈が違い、バラバラの結果に。
role＝属性は、W3Cのバリデーターで警告表示されるようになった。。。
-
<main role="main">訳）main、それはmain 同じコトを言っているので、roleの表示は重複するので不要。 - 現在は、過渡期なので警告ですが、将来エラーが返ってくる可能性も！
【ご指摘いただきましたので追記します。2015/09/02】
すべてのrole属性に警告が出るのではなくランドマークrole属性の例として記載しています。
詳しくは A vocabulary and associated APIs for HTML and XHTML
タイトルの扱い。
- 見出しは後に続くコンテンツを要約（短くしたもの）と考えると、タイトルの下はコンテンツが続くべき。
- 独立したタイトルというのはおかしくないか？
ロゴマークの代替テキストはどう入れる？
- 見たままでOK!ですが、英数大文字が続くとDESIGN（デーイーエスアイジーエヌ）となってしまうので注意。
- 参考模範解答では、alt=”D2D(Dev&Design Draft)”
- ちなみにワタシのチームは、alt=”Develop&Design Draft”
と親切心で入れてしまいました、冗長すぎるのであまりよくありません。。。
入れるならalt=”Dev&Design Draft”
といったところでしょう。
アイコン画像のaltに冗長な説明は不要。
- altに悩んだ場合は、何を示すために入れたのかに立ち返る。
- アイコンが見える人も見えない人も等しく同じ情報を得られることが大切。差が出てはいけない。
「枡記号」をどう入れる？
- 文字参照で「〼」表示できますが、これを読めないスクリーンリーダーがあります。
- どのグループも音声ブラウザを配慮し、一枚画像にalt=””で対応。
- 参考模範解答では、「ます」の文字をCSSで見えないようにして、音声ブラウザに対応されていました。
<p>ここにあり<span aria-hidden="true">〼</span><span class="not_appeared">ます</span>。</p>
<style>
.not_appeared {
position: absolute;
overflow: hidden;
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
}
</style>
所感
最近おぼえた「role＝属性」がW3Cのバリデーターで警告表示になるというのには、ショックを隠しきれませんでしたが、html5が順調に育っているんだなと前向きにとららえることにします。
やっと出会えたのに、もうお別れな感じがなんとも悲しいですけど。。。（知るのが遅すぎたというのは置いといて）
また今回はマークアップが目的だったので、グループごとに分かれて手を動かすのは楽しかったです。
グループの中でもどうする？これは？など議論をするといい刺激になります。
Gitもフォローいただきましてナントカ思い出せたし（また忘れそうだけど）。
最後に、@SawadaStdDesignさんのスライドの中にあった「100点満点のサイトが１つ増えることよりも、50点のサイトが10個増えることの方が大事。」に胸が熱くなりました。ちょっとづつでも積み上げるヨ！