Help us understand the problem. What is going on with this article?

実在する Web ページの bad practice を集めたサイト HTMHell の紹介

フロントエンド初心者の私です。
最近は実際に運用されている Web ページの HTML を読んで勉強することがありますが、本当にこの実装を鵜呑みにして良いのか...?と迷う場面が多々あります。
そんなときに見つけたサイト HTMHell が自分のニーズにハマったので紹介します。

HTMHell

HTMHell

title の "Markup from Hell" が良い味出してます。

Screen Shot 2020-05-24 at 23.53.26.png

A collection of bad practices in HTML, copied from real websites.

とあるように、実在する Web ページから bad practice を抜き出してきて、どこが悪いのか、どう改善すれば良いのかを紹介しているサイトです。

取り上げられているコードを幾つか紹介したいと思います。
※日々更新されているため、最新の情報と異なる場合があります。

#8 anchor tag used as button

#8 anchor tag used as button

Bad
<a href="#" onclick="modal.open()">Login</a>

モーダルのオープンに <a> タグを使用している例です。
実際によく見かけるような気もしますが、 <a> タグは本来はナビゲーション用途として使われるべきで、この例のように同一ページ内でのアクションを目的とする場合は <button> タグが適しているそうです。

Good
<button type="button" onclick="modal.open()">Login</button>

#9 Cookie Consent from Hell

#9 Cookie Consent from Hell

Bad
<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 によるセマンティクスの理解の妨げになったり、 EnterSpace キーでボタンを押せなかったりなど色々問題があるようです。

これらを改善したコードは以下のようになります。

Good
<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 の断片を集めただけあって実践的でよく遭遇するような内容が多く含まれています。
フロントエンド初心者の方は是非一度目を通してみてください!

macloud
M&Aクラウドは「テクノロジーの力で、M&Aに流通革命を」をミッションにM&Aプラットフォーム「M&Aクラウド」を開発運営するスタートアップです。
https://macloud.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away