フロントエンド初心者の私です。
最近は実際に運用されている Web ページの HTML を読んで勉強することがありますが、本当にこの実装を鵜呑みにして良いのか...？と迷う場面が多々あります。
そんなときに見つけたサイト HTMHell が自分のニーズにハマったので紹介します。
HTMHell
title の "Markup from Hell" が良い味出してます。
A collection of bad practices in HTML, copied from real websites.
とあるように、実在する Web ページから bad practice を抜き出してきて、どこが悪いのか、どう改善すれば良いのかを紹介しているサイトです。
取り上げられているコードを幾つか紹介したいと思います。
※日々更新されているため、最新の情報と異なる場合があります。
#8 anchor tag used as button
<a href="#" onclick="modal.open()">Login</a>
モーダルのオープンに <a> タグを使用している例です。
実際によく見かけるような気もしますが、 <a> タグは本来はナビゲーション用途として使われるべきで、この例のように同一ページ内でのアクションを目的とする場合は <button> タグが適しているそうです。
<button type="button" onclick="modal.open()">Login</button>
#9 Cookie Consent from Hell
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
<div class="cookie_consent modal">
<p>We use cookies…</p>
<div class="cookie_consent__close">
<i class="fa fa-times"></i>
</div>
<div class="cookie_consent__ok">OK</div>
</div>
</body>
クッキー利用に対して同意を求めるモーダルの実装です。
海外のサイトでは特に画面下部に固定表示されているのをよく見かけますね。
この例では <body> の最下部にモーダル部分の実装が書かれているため、キーボードユーザーは Tab キーを連打してこのモーダルにフォーカスを移動させる必要があります。
しかも <div> 要素はデフォルトでフォーカスが当たらないのでそもそもモーダルに辿り着けない可能性もあります。
また他にも <div> 要素をボタンに使うと Assistive technology によるセマンティクスの理解の妨げになったり、 Enter や Space キーでボタンを押せなかったりなど色々問題があるようです。
これらを改善したコードは以下のようになります。
<body>
<div class="cookie_consent modal">
<p>We use cookies…</p>
<button class="cookie_consent__ok">OK</button>
<button class="cookie_consent__close">
<span class="sr-only">Close notification</span>
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body>
終わりに
英語なので全て読むのは骨が折れますが、実在する HTML の断片を集めただけあって実践的でよく遭遇するような内容が多く含まれています。
フロントエンド初心者の方は是非一度目を通してみてください！