這15個HTML/CSS錯誤我不信你沒犯過(網站規範01)

1.使用占位符屬性而不是标簽元素

我經常看到的流行錯誤是使用占位符屬性而不是标簽元素。但螢幕閱讀器的使用者在這種情況下無法填充字段，因為螢幕讀取器無法從占位符屬性讀取文本。

是以，我建議使用字段名稱的标簽元素和占位符屬性作為使用者需要填寫的資料示例。

别這樣

<input type="email" placeholder="Enter your email">      

您可以使用此代替

<label>
  <span>Enter your email</span>
  <input type="email" placeholder="e.g. [email protected]">
</label>      

2.使用 img 元素建立裝飾圖形

如今，開發人員經常将裝飾圖形與内容圖像混淆。例如，他們使用 img 元素标記社交圖示。

但是社交圖示是一個裝飾圖示，它可以幫助使用者更快地了解元素的含義，而無需閱讀文本。如果我們删除圖示，我們不會失去元素的含義，是以我們可以使用背景圖像屬性。

<a href="https://www.csdn.net/" class="social">
  <img class="social__icon" src="csdn.svg" alt>
  <span class="social__name">CSDN</span>
</a>      

<a href="https://www.csdn.net/" class="social">
  <span class="social__name">CSDN</span>
</a>
.social::before {
  background-image: url("csdn.svg");
}      

3.使用大小：無

我每次開發人員制作小文本區域時都會遭受損失，我無法更改它，因為他們禁用了調整大小。他們在添加調整大小時不會考慮：沒有表單可通路性變差，使用者無法輕松輸入資料。

如果您想要限制文本區域的大小，您可以使用最小寬度、最大寬度、最小高度和最大高度屬性。但是，你應該拿起高度值，以便使用者可以填補領域一個舒适的方式為自己。

textarea {
  width: 100%;
  height: 200px;
  resize: none;
}      

textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 200px;
  max-height: 400px;
}      

4.使用空元素

在 Web 中，使用空 HTML 元素造型元素的做法很差。例如，漢堡包标記使用空 div 或跨度元素。

但這個問題應該用僞元素之前和之後來解決。在這種情況下，HTML看起來更幹淨。此外，最主要的是為螢幕閱讀器添加文本，以便使用者可以與此按鈕進行互動。

<button class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>      

.hamburger {
  width: 60px;
  height: 45px;
  position: relative;
}

.hamburger span {
  width: 100%;
  height: 9px;

  background-color: #d3531a;
  border-radius: 9px;

  position: absolute;
  left: 0;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 18px;
}

.hamburger span:nth-child(3) {
  top: 36px;
}

      

<button class="hamburger" type="button">
  <span class="hamburger__text">
    <span class="visually-hidden">Open menu</span>
  </span>
</button>      

.hamburger {
  width: 60px;
  height: 45px;
  position: relative;
}

.hamburger::before,
.hamburger::after,
.hamburger__text::before {
  content: "";
  width: 100%;
  height: 9px;

  background-color: #d3531a;
  border-radius: 9px;

  position: absolute;
  left: 0;
}

.hamburger::before {
  top: 0;
}

.hamburger::after {
  top: 18px;
}

.hamburger__text::before {
  top: 36px;
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px !important; 
  height: 1px !important; 
  overflow: hidden;
}