CSSNight 朝までマークアップで驚いたこと | アクセシビリティ

11/2 に、CSSNight「朝までマークアップ」というオンラインイベントがありました。 夜 9:00~翌朝 5:00 まで、総勢 25 名のゲストが自分の持ちテーマを語るというイベントです。 過去には、「朝までイラレ」「朝までフォトショ」などもやってました。 今回はマークアップということで、満を持して参戦してきました。 12 時になる前に寝てしまいましたが、アーカイブを購入したので全セクションチェックすることができました。

とても勉強になった反面、HTML がまだまだ書けていなかったという事実に大変落ち込んでいますが、 とてもためになったので共有いたします。 公式からも、スクショ・ネタバレのポスト(旧ツイート)OK とのことなので、ここでも紹介しようと思います。

アクセシビリティができていない問題

まず初めに衝撃を受けたのは、世界の主要な web サイトトップページ 100 万サイトを調査対象とした研究で、

• 1 ページあたり平均 50 のエラーを検知
• 96.3%のページで、WCAG2に対する不適合を検知
• 22.1%のページで、画像代替テキスト(alt=""を除くもの)が欠落
• 7.9%のページで、見出しタグが 1 つも登場しない
• WAI-ARIA を使用するページほど、エラーが多い という調査結果が出ています。

また、ある登壇者の方は、東証プライム上場企業 1,800 社を対象としたトップページ調査を行われています。

Q. ページ内に h1 はいくつ？

A. 0 個 : 約 30%

1 個 : 約 54%

2 個 : 約 9%

それ以上 : 約 7%

Q: ブレイクポイントはいくつ？

A: 0 個 : 約 10% (アクセス時のサイズで出しわけ)

1 個 : 約 4%

2 個 : 約 5%

3 個 : 約 7%

4 個 : 約 6%

5 個 : 約 6%

6 個 : 約 5%

7 個 : 約 5%

8 個 : 約 6%

9 個 : 約 5%

10 個以上 : 約 40% (※四捨五入のため、トータル 100％になりません)

Q: 画像の形式は？

A: png : 約 90%

jpg : 約 87%

svg : 約 50%

gif : 約 23%

webp : 約 3%

いかがでしたでしょうか？ 個人的な感想として、周りは全然 HTML が書けていないんだなと感じました。 アクセシビリティはともかく、画像の alt がないことや、タイトルがないサイトがたくさんあります。 基本をしっかりすれば、あっという間に他者と差をつけられると感じました。

Markuplint

上記の HTML 構文ミスは、単純な力不足の面もありますが、うっかり忘れてしまった。とい場合もあるかと思います。 そのようなミスを防ぐ VSCode 拡張プラグインも紹介されていましたので、ぜひインストールをオススメします。 株式会社ディーゼロ:ゆうてんさん という方が趣味で作成された「Markuplint」です。

下記のような基本的な構文エラーに対して、VSCode 上で赤波線のエラーを出してくれます。

<p>
  ・リストみたいなもの<br />
  ・リストみたいなもの<br />
  ・リストみたいなもの
</p>

<ul>
  <div>
    <li>ul直下にdivがいる</li>
  </div>
  <div>
    <li>ul直下にdivがいる</li>
  </div>
</ul>

<div id="html">idが被ってる</div>
<div id="html">上とidが被ってる</div>

拡張機能で「Markuplint」と検索するとすぐに出てくるので、ぜひ・必ず入れてください！

アクセシビリティ

個人的にかなり凹んだ部分が、いろいろな登壇者の方が解説している、アクセシビリティに配慮されたマークアップです。 意識してきたつもりですが、まだまだ配慮が足りませんでした...。

ページネーションの次の tab 操作

もし、キーボード操作を使い、ページネーションボタンで次のページに移動したとします。 アクセシビリティ的に、移動して最初の tab クリックで focus されてほしい要素は、記事一覧の中の先頭の記事だと思います。 しかし、多くのサイトでは、tab を押すと一番上の logo から始まってしまうのではないでしょうか？ ページによっては、記事一覧に辿り着くまでに何度も何度も tab を押す必要が出てきます。

同じことが、モーダルにも言えます。 ポップアップを閉じた後に、最初の tab クリックで focus されてほしい要素はポップアップの次の要素のはずです。 ポップアップのたびに、ページ最上部に飛ばされてはたまったもんじゃありませんよね...。

フォームのマークアップ

突然ですが、下記のフォームの問題点はどこでしょうか？

<p>HTMLは好きですか？</p>
<label><input type="radio" name="html" value="yes" />はい</label>
<label><input type="radio" name="html" value="yes" />はい</label>

p タグは tab 操作でフォーカスされることはありません。 なので、スクリーンリーダーでサイトを見ている方には、input へ focus が移った時、突然「はい・いいえ」の選択を迫られます。 何が何だかわかりません。

<fieldset role="radiogroup">
  <legend>HTMLは好きですか？</legend>
  <label><input type="radio" name="html" value="yes" />はい</label>
  <label><input type="radio" name="html" value="yes" />はい</label>
</fieldset>

最適解として、fieldsetとlegendタグを使用することが推奨されているそうです。 わたしは初めてこのタグを見ました...。

また、fieldsetとlegendは隣接している必要があり、間にdivを入れることができません。 そしてfieldsetには、display:flexとdisplay:gridが効かないので、下記のようにdisplay: contentsを使用します。

<div class="grid">
  <fieldset role="radiogroup">
    <legend>HTMLは好きですか？</legend>
    <label><input type="radio" name="html" value="yes" />はい</label>
    <label><input type="radio" name="html" value="yes" />はい</label>
  </fieldset>
</div

.grid {
  display: grid;
}

fieldset {
  display: contents;
}

入力ヒントもスクリーンリーダーには引っかかりません。

<label for="name">お名前</label>
<p>苗字と名前の間に半角スペースを入れてください。</p>
<input type="text" id="name" name="name" />

この場合には、aria-describedby属性を付与します。

<label for="name">お名前</label>
<p id="name-hint">苗字と名前の間に半角スペースを入れてください。</p>
<input type="text" id="name" name="name" aria-describedby="name-hint" />

これで、input の focus 時に入力ヒントを渡すことができます。 同じ理由で、エラーメッセージもスクリーンリーダーでは受け取れない場合がありますので、aria-describedby 属性で紐付けを行うのが良いでしょう。 aria-describedby 属性は、半角スペース区切りで複数の設置も可能です。

まとめ

なかなか陽の目が当たらないアクセシビリティですが、アクセシビリティの恩恵を受ける人は日本だけで 480 万人にも上ると言われています。 単純に EC サイトで考えれば、アクセシビリティに考慮するだけで、市場が他社と比較し約 5%も拡大します。 冒頭にも書きましたが、WAI-ARIA を使用するページほど、エラーが多いことになっています。 なかなか勉強しづらい分野ではありますが、デジタル庁が「誰一人取り残さないデジタル市場」を目指しているため、必ずアクセシビリティの技術は役に立つと思います。

ジャムデザイン品質として、

• 適切な見出し構成 (h1, h2, h3 を適切に使う)
• 適切な画像代替テキスト (画像の役割を理解し、必要な箇所には代替テキストを入れ、不要な箇所は alt=""をつける)
• 適切なリンクラベル付与 (a タグ focus で、中身を全て読み上げてしまうため、必要があればaria-labelを使用する)
• 正常な tab 操作 (tab が当たっているのに outline が出ない。非表示要素に focus するときは非表示を解除する)

上記のような基本をいつでも守ったサイトを構築したいと思います。

使い手のことを考え、思いやりのある Web サイトを作っていきたいです。