インクルーシブHTML+CSS & JavaScript 本を読んだ

多くのサイトでページヘッダーの左上にサイトロゴを置き、トップページへのリンクを設定することが行われていますが、その際のロゴ画像の代替テキストについてこんな記述が。

で、提示されたコード例はこのようになっています。

<a href="/home"><img src="images/logo.svg" alt="ホーム"></a>

確かに、原則論としては画像リンクの代替テキストはリンク先の意味を記す のが適切でしょう。

しかし、代替テキストの役割は画像にアクセスできない環境において同等の情報を提供するものです。HTMLの仕様書にももっとも一般的な規則としてこのようなガイドラインが示されています。

ロゴ画像に話を戻して、画像が表示される環境下では単にサイトロゴが表示されているだけであり、強いて言えばマウスカーソルを乗せるとポインター形状が変わるので何かしらのリンクであるということしか分かりません。「リンク先がトップページである」という情報は提示されていませんし、タッチデバイスではリンクになっているかどうかすら不明です。しかし多くの人は「ページの左上にロゴがある」という画像の掲載位置でもって、それがトップページへのリンクであると推定できると思います。そう考えると、ここに alt="ホーム" を設定することは、画像が見られない人に対してより多くの情報を提供することになり、不適切と言えます。

視覚障害でスクリーンリーダーを使っているユーザーも、あるいは回線の都合等で画像がロードできないケースも、本質的には画像が見られるときと同じで「ページの先頭にあるサイト名が書かれたリンクはトップページへ遷移する」ことは慣例的に周知の事実ですから、多くのサイトがそう設定しているように、ここの代替テキストはサイト名で良いのではないでしょうか。

「クロスブラウザブラウザ」は誤記と思われます。

これは知りませんでした。手元の NVDA 2018.1jp を使って複数のブラウザで確認してみましたが、確かに role="form" を付けると「フォーム ランドマーク」と読み上げられ、 D キーのショートカットでの移動も行われました。

これまで自分は検索フォームのみ role="search" を付け、それ以外のフォームは role 属性を書かないようにしていたのですが、ランドマーク扱いされた方が便利だったりするのでしょうか。日常的にスクリーンリーダーを使っている方の意見も聞いてみたいところです。

プレースホルダーのスタイル設定について、以下のコードが示されています。

::placeholder {
  color: #000;
  font-style: italic;
}

::-webkit-input-placeholder {
  color: #000;
  font-style: italic;
}

::-moz-placeholder {
  color: #000;
  font-style: italic;
}

また、訳注では IE と Edge の対応について補足されています。

これらはちょっと正しくなくて、実際は以下のような状況となっています。

• Firefox 19 以降のデフォルトスタイルは、 color による灰色文字ではなく opacity: 0.54 による透過度が設定されている（参考: Bug 556145(bugzilla.mozilla.org) 、Bug 618260(bugzilla.mozilla.org) ）
• Firefox は2017年1月にリリースされた バージョン 51 で接頭辞無しの ::placeholder に対応したので、 -moz- 接頭辞付きはもう不要（参考: Bug 1069012(bugzilla.mozilla.org) ）
• IE 11 は疑似クラスのみサポートしているので、シングルコロンの :-ms-input-placeholder が必要
• Edge は ::-ms-input-placeholder の疑似要素をサポートしているが、 -webkit- 接頭辞にも対応しているので -ms- 接頭辞の疑似要素はわざわざ書く必要なし

まとめると、 IE 11 や Android 4 系などの古いブラウザも考慮した、2018年3月時点での記述はこんな感じが良いでしょう。

::-webkit-input-placeholder {
  color: #000;
  font-style: italic;
}

:-ms-input-placeholder {
  color: #000;
  font-style: italic;
} /* IE 11 用 */

::placeholder {
  color: #000;
  font-style: italic;
  opacity: 1; /* Firefox 用 */
}