読み上げ順に配慮する
CSSでは比較的自由に表示順を入れ替えられるが、スクリーンリーダーはマークアップされたものを上から順番（DOMの出現順通り）に読み上げていく。したがって、マークアップする時はあくまで「どういう順番で読み上げてもらいたいか」を重視して記述順を決定する。
左側にサイドバーがあるレイアウト
左側にサイドバー、右側にメインコンテンツが並ぶようなレイアウトの場合、マークアップではメインコンテンツを先に記述する。上から順に読み上げた際、できるだけ早くメインコンテンツの情報にアクセスできることが望ましいからである。2カラムで表示した際にどちらを左に置くか、ということはCSSで調整できるので、あくまで読み上げ順を基準にマークアップするようにする。
<header class="header">ヘッダー領域</header>
<div class="contents">
<main class="main">メインコンテンツ領域</main> <!-- 先に記述 -->
<aside class="sidebar">サイドバー領域</aside>
</div>
<footer class="footer">フッター領域</footer>@media screen and (min-width: 768px),print {
.contents {
display: flex;
flex-direction: row-reverse; /* 左右入れ替え */
justify-content: space-between;
}
}商品画像サムネイルのあるカード
商品のサムネイル画像を付けたカード型のコンポーネントを、article要素でマークアップする場合を考える。この場合、商品タイトル部分が見出し要素になる。この時、おそらく商品画像のサムネイルは商品タイトルより上に表示される場合が多いと思われるが、マークアップ上は見出し要素である商品タイトルを先に記述することが望ましいと言える。多くのスクリーンリーダーには見出しジャンプ機能があるが、ジャンプ先の見出しがセクションの冒頭でない場合、見出しより前に記述されているコンテンツにユーザが気づかない可能性があるからである。また、各種ブラウザは見出しから次の見出しまでを1つのセクションとみなす暗黙のアウトラインしか実装していないため、商品画像が1つ前の見出しに所属するコンテンツであると誤認されてしまう恐れもある。
こうした理由から、見出しを伴うコンテンツブロックについては、極力見出し要素を先頭に持ってくる形でマークアップし、それをCSSでデザインに合わせて並べ替えるようにすると良い。
<article class="pd-card">
<h2 class="pd-card__title">肉球ブローチ（7個セット）</h2> <!-- 先頭に記述 -->
<figure class="pd-card__thumb"><img src="img/nikukyu-7.jpg" alt="###" width="480" height="360"></figure>
<div class="pd-card__body">～</div>
<ul class="pd-card__btns">～</ul>
</article>.pd-card {
display: flex;
flex-direction: column;
～省略～
}
.pd-card__thumb {
order: -1; /* 表示位置を先頭に移動 */
}単語の文字間に空白文字を使わない
Word形式のビジネス文書などでよく見られる「均等割付」のような見た目にしたいがために、単語中の文字と文字の間に空白文字を入れて文字数を揃えるようなことはしないようにする。単語中に空白スペースが入ってしまうと、1つ1つが単独の文字として読み上げられてしまい、意味が通じなくなってしまう。Webでは現状「均等割付」を問題のない形でスマートに実装する方法はないので、スペースを開けずに詰めて表示するのが基本である。
どうしても「均等割付」にしたい場合は、文章中の最後の行のみ行揃えを指定できるtext-align-lastプロパティで、justifyを選択すると、テキストの均等割付をすることができる。ただしこのプロパティはSafari・iOS Safariで未実装なので、クロスブラウザ対応が求められる場合には使用できない。
<!-- NG例 -->
<th>会 社 名</th> <!-- 全角スペースで文字調整 -->
<!-- OK例 -->
<th>会社名</th> <!-- スペースは入れずに詰めて表示する -->th{
text-align-last: justify; /* 均等割付:text-align-lastを使う */
}英単語は小文字で記述する
英単語（例：SAMPLE）を全て大文字で記述してしまうと、スクリーンリーダーの中には「サンプル」ではなく「エス・エー・エム・ピー・エル・イー」といった具合にアルファベットを単体で読み上げてしまうものがある。確実に英単語として読ませる必要がある場合には、「sample」または「Sample」のように、2文字目以降は小文字で記述する必要がある。
英単語を大文字で見せたい場合にはCSSでtext-transform: uppercase;を指定するようにしておく。
<!-- NG例 -->
<h2 class="heading">SAMPLE</h2> <!-- 大文字で記述している -->
<!-- OK例 -->
<h2 class="heading">Sample</h2>.heading {
text-transform: uppercase;
}装飾的な画像のaltは空にする
装飾パーツやイメージ画像、同内容のテキストを伴うアイコンなど、視覚的な効果のみを意図したもので情報として伝達する必要のない画像については、alt=””のようにalt属性の値を空にしておく。alt情報が不要だからといってalt属性そのものを削除してしまうのはNGである。スクリーンリーダーの中にはファイル名をそのまま読み上げてしまうものがあり、情報の読み取りに支障が出る恐れがある。
<!-- NG例（alt属性なし） -->
<a href="###" class="btn"><img src="###" class="btn__icon">お問い合わせ</a> <!-- altがない -->
<!-- OK例（alt属性の値が空） -->
<a href="###" class="btn"><img src="###" class="btn__icon" alt="">お問い合わせ</a>ロゴ・バナー・見出しなどのテキスト画像
ロゴ・バナー・見出しなどのテキスト画像など、画像に文字が記載されているものについては原則として画像に記載されている文字をそのままaltに記述しておけば問題ない。このパターンは誰でも機械的に判断できるものなので、コーディング担当者の裁量で適宜設定しておく。
<a href="#">
<img src="img/banner.jpg" alt="ハンドメイド猫グッズのお店 -nekonokomono- l'atelier Queue Clickにゃう！" width="360" height="225">
</a>前後に重複する内容のテキストがある画像
画像の前後にその画像と全く同じテキスト情報が記載されている場合は、altの中身を空にするようにする。
画像のaltと、その前後に記載されたテキストが同じ文言だった場合、スクリーンリーダーでは同じ内容が重複して読み上げられてしまい、冗長である。したがって前後に重複するテキスト情報がある場合は、装飾目的の画像と同様にalt=””としておくことが望ましいだろう。
<img src="img/category01.jpg" alt="" width="100" height="100">図解・グラフ
図解やグラフはそれ自体が重要なコンテンツなので、画像が表示されなくてもその図解やグラフで伝えたい情報が伝わるようにする必要がある。
特に、前後に図解やグラフの内容を解説したテキストがなく、画像だけで情報を伝達している場合はaltにその画像で伝えたい情報をきちんとテキストに書き起こして記述する必要がある。この場合、その図解・グラフが何を伝えたいのか正確に把握し、適切な表現で文章を書く必要があることから、可能であればライターやディレクターに「テキスト原稿」として依頼をした方が良いだろう。なお、前後にその図解やグラフの内容を解説する本文テキストがある場合は、内容の重複を避けるため、altの中身はalt=”###のグラフ”などの簡単な説明だけで十分である。
<img src="img/graph.png" alt="円グラフ とても満足35%、満足57%、どちらともいえない6%、不満2%。とても満足・満足合わせて92%のお客様が満足と答えました。" width="718" height="542">人物・動物・風景・その他のコンテンツ画像
一般的な写真コンテンツはイメージ画像ではなくコンテンツの一部なので、altを空にするわけにはいかない。かといって機械的にaltの中身を決めることもできず、正確に記述するには国語力・文章作成力が求められる。一般的にこうした写真類の望ましいalt属性の判断基準は、電話でその内容を伝えて相手が中身をある程度理解できるように書くというものなので、写真に写っている情景をできるだけ丁寧に文章で伝える必要がある。alt属性について適切な原稿が支給されず、何を入れるかはコーディング担当者の良識に任されている場合、
- 画像上の文字をそのまま記述する
- 空altを設定する
- 簡単なものであれば図解やグラフを要約する
くらいまでがコーディングの裁量で担保できる領域であり、それ以上を求めるのであればコンテンツを作成できる工程でライター・ディレクターが原稿を用意するべきものであると考える。
<img src="img/ph_cat01.jpg" alt="パソコンのモニタ前にでーんと寝そべってこちらを見つめる白猫の写真。キーボードは猫の体の下にあります。仕事できません。" width="640" height="480">自動でキーボードフォーカスされる要素
キーボード操作が可能なようにマークアップするには、まずは基本的にHTML標準で用意されている操作可能な要素を使用してコーディングするのが第一である。具体的には、a要素、button要素、input要素などのフォーム部品、controls属性の付いたvideo／audio要素などである。
こうした部品を使えば、キーボードだけで操作できるようにするという要件は自動的に達成されるので、特別に何かを行う必要はない。
<!-- 自動でフォーカスがあたる要素の例 -->
<a href="#">a要素</a>
<button>button要素</button>
<input type="text" value="input要素">
<video src="assets/movie.mp4" controls>雲が流れる空の動画</video>
<audio src="assets/chaim.mp3" controls>玄関のチャイム音</audio>tabindex属性
JavaScriptで動的なUIを作る際、開発者都合でどうしてもdivやspanなど、標準ではフォーカスされない動的要素に対してキーボード操作を可能にする必要に迫られることもある。この場合はtabindex属性でキーボードフォーカス可能な状態にしなければならない。フォーカスが当たらなければキーボードでは全く操作ができなくなるからである。具体的にはフォーカスが当たるようにしたい静的要素にtabindex=”0″と指定する。こうすることで、HTMLソースコードの出現順にTabキーでフォーカスが当たるようになる。
逆にもともと自動でフォーカスが当たる要素をフォーカス対象から除外する目的で使用するのがtabindex=”-1″などの”負の整数”の値である。こちらはフォーカス制御を別途JavaScriptで実装することを前提とした機能となる。
<!-- tabindexなし -->
<a href="#" class="btn">a要素</a>
<button class="btn">button要素</button>
<div class="btn">div要素</div> <!-- フォーカスが当たらない -->
<!-- div要素にtabindex="0" -->
<a href="#" class="btn">a要素</a>
<button class="btn">button要素</button>
<div class="btn" tabindex="0">div要素</div> <!-- フォーカスが当たる -->フォーカスリング
キーボード操作を意識したマークアップを行う際に忘れてはならないのが、現在フォーカスが当たっている要素を表示するための枠線＝フォーカスリングである。
アクセシビリティの観点からは、キーボードフォーカスした際のフォーカスリングの表示は必須である。しかし、マウス操作しているユーザからすると不格好である上に操作に混乱をきたす恐れもあるため、input要素以外のリンクやボタンについてはマウス操作時にフォーカスリングは表示されない方が良いという、操作方法によって望ましい実装が異なる状況で生じてしまう。
この問題を解決するため、現在多くのブラウザでは「:focus-visible」という疑似クラスが実装されている。一旦:focusでフォーカスリングを表示させるoutlineを削除しておき、:focus-visibleプロパティでキーボード操作時のフォーカスリングスタイルを任意で上書きしておくようにすれば、キーボード操作でフォーカスを当てた時だけフォーカスリングを表示させることが可能となる。
/* 基本のフォーカスを削除 */
:focus { outline: none; }
/* キーボードフォーカス時のみフォーカスリングを指定 */
:focus-visible { border: 2px solid #973e03; }