リンク・ボタン・フォーム最適化

<!-- NG -->
<div>Click</div>

<!-- Good -->
<button>Click</button>

/* NG 32px四方しかないアイコン */
.icon {
  position: relative;
  width: 32px;
  height: 32px;
}

/* Good 疑似要素を使って50px四方にクリッカブルエリアを拡大 */
.icon::before {
  position: absolute;
  top: -9px;
  left: -9px;
  display: block;
  width: 50px;
  height: 50px;
  content: "";
}

/* NG */
.externalLink {
  position: relative;
  color: #000;
}

.externalLink::after {
  position: absolute;
  top: 6px;
  right: -20px; /* アイコンが領域外に飛び出ている */
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  background-image: url("/assets/images/icon_tab.svg");
  background-repeat: no-repeat;
  background-size: 12px;
}

/* Good */
.externalLink {
  position: relative;
  color: #000;
}

.externalLink::after {
  position: absolute;
  top: 6px;
  right: 0; /* 余白内右端に配置 */
  display: block;
  width: 12px;
  height: 12px;
  padding-right: 20px; /* アイコンの分余白を確保 */
  content: "";
  background-image: url("/assets/images/icon_tab.svg");
  background-repeat: no-repeat;
  background-size: 12px;
}

<ul class="menu">
  <li>
    <a href="#">About</a>
  </li>
</ul>

/* NG */
li {
  padding: 16px; /* リストタグが余白を確保している */
}

/* Good */
a {
  display: block;
  padding: 16px; /* aタグが余白を確保している */
}

<!-- NG -->
<input type="checkbox">個人情報保護方針に同意する

<!-- Good label要素で囲う -->
<label><input type="checkbox">個人情報保護方針に同意する</label>

<!-- Good id属性とfor属性で紐付ける -->
<input type="checkbox" id="agreePrivacy">
<label for="agreePrivacy">個人情報保護方針に同意する</label>

<!-- NG -->
<input type="text" placeholder="お名前">

<!-- Good -->
<label>お名前 <input type="text" placeholder="山田太郎"></label>

<!-- NG -->
<label>
  <input type="checkbox">
  <a href="#" target="_blank">個人情報保護方針</a>に同意する
</label>

<!-- Good -->
<a href="#" target="_blank">個人情報保護方針について</a><br>
<label> <input type="checkbox">個人情報保護方針に同意する </label>

<!-- NG -->
<button></button>

<!-- Good aria-labelで実装 -->
<button aria-label="検索する"></button>

<!-- Good 不可視テキストで実装 -->
<button>
  <span class="sr-only">検索する</span>
</button>

/* 要素を不可視にするスタイル */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  border: 0;
}

button {
  cursor: pointer;
}

/* ホバー可能なデバイスでのみ適用される */
@media (any-hover: hover) {
  .hoverLinkGood:hover {
    color: orangered;
  }
}

/* NG */
button {
  outline: none;
}

<!-- NG -->
<div>
  <div>概要</div>
  <div>折りたたまれている部分です。</div>
</div>

<!-- Good -->
<details>
  <summary>概要</summary>
  <div>折りたたまれている部分です。</div>
</details>

/* NG */
button {
  width: 148px;
  height: 42px;
  transition: width 0.4s, height 0.4s;
}

button:hover {
  width: 178px;
  height: 50px;
}

/* Good */
button {
  width: 148px;
  height: 42px;
  transition: transform 0.4s;
}

button:hover {
  transform: scale(1.2);
}

<!-- NG -->
<button>Hover</button>

<!-- Good -->
<button>
  <span class="inner">Hover</span>
</button>

/* NG */
button {
  transition: transform 0.2s;
}

button:hover {
  transform: scale(0.5);
}

/* Good */
button .inner {
  transition: transform 0.2s;
}

button:hover .inner {
  transform: scale(0.5);
}

<!-- NG -->
<label class="customCheckbox">
  <input type="checkbox">個人情報保護方針に同意する
</label>

<!-- Good -->
<label class="customCheckbox">
  <input type="checkbox" class="sr-only">個人情報保護方針に同意する
</label>

.customCheckbox {
  /* カスタマイズしたスタイル */
}

/* NG */
.customCheckbox input {
  display: none
}

/* Good */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  border: 0;
}

<!-- NG -->
<div>
  <label>お名前<input type="text" name="name"> </label>
  <label>郵便番号<input type="text" name="postal-code"></label>
  <label>メールアドレス<input type="email" name="email"></label>
</div>

<!-- Good -->
<form>
  <label>お名前<input type="text" name="name" autocomplete="name"></label>
  <label>郵便番号<input type="text" name="postal-code" autocomplete="postal-code"></label>
  <label>メールアドレス<input type="email" name="email" autocomplete="email"></label>
</form>

/* NG */
input {
  font-size: 14px;
}

/* Good */
input {
  font-size: 16px;
}

<!-- NG -->
<video
  muted
  playsinline
  autoplay
  loop
  src="ikura.mp4"
  width="256"
  height="256"
></video>

<!-- Good -->
<video
  muted
  playsinline
  autoplay
  loop
  controlslist="nodownload nofullscreen noremoteplayback"
  x-webkit-airplay="deny"
  disablepictureinpicture
  src="ikura.mp4"
  width="256"
  height="256"
></video>