嘿，你們這些優秀的開發人員！在這篇文章中，我將帶您使用語義 HTML 和一個很棒的 CSS 偽類來建立一個簡單的聯絡表單，稱為 :focus-within。 “ :focus-within 類別可以很好地控制焦點，並讓您的用戶知道這正是他們在體驗中的位置。在我們開始之前，讓我們先了解一下網路可訪問性的核心。

表單可訪問性？

您很可能到處都聽說過“可訪問性”一詞或數字名稱 a11y。這是什麼意思？這是一個很好的問題，有很多答案。當我們審視現實世界時，可訪問性意味著在您的企業浴室中配備銳器容器，確保為需要輪椅的人員提供坡道，以及為任何需要的人提供大型印刷鍵盤等外圍設備。

可訪問性的範圍不止於此，我們還需要認識到數位可訪問性，不僅對於外部用戶，而且還對於內部同事。 色彩對比是一個容易實現的目標 我們應該能夠防患於未然。在我們的工作場所，確保如果任何員工需要螢幕閱讀器等輔助技術，我們都會安裝並可用。有很多事情需要考慮。本文將重點放在網路可訪問性 WCAG（網頁內容無障礙指南） 心裡。

當您想強調用戶實際上正在與元素互動時，這個偽類真的很棒。例如，您可以變更整個表單的背景顏色。或者，如果焦點移至某個輸入，您可以在焦點移至該輸入時將輸入元素的標籤加粗並變大。下面的程式碼片段和範例中發生的事情是使表單易於存取的原因。 :focus-within 這只是我們利用 CSS 來發揮優勢的一種方式。

如何集中註意力

就可訪問性和 Web 體驗而言，焦點是頁面、UI 或元件內正在與某些內容互動的視覺指示器。 CSS 可以判斷互動元素何時獲得焦點。

始終確保焦點指示器或可聚焦元素周圍的環在整個體驗過程中保持適當的顏色對比。

Focus 的寫法如下，如果您選擇設計樣式，則可以將其設計為與您的品牌相符。

:focus {
  * / INSERT STYLES HERE /*
}

無論你做什麼，永遠不要將你的大綱設定為 0 or none。這樣做將為整個體驗中的每個人消除可見的焦點指示器。如果您需要刪除焦點，可以，但請確保稍後將其添加回來。當您從 CSS 中移除焦點或將輪廓設為 0 or none，它會為所有使用者移除對焦環。使用 CSS 重設時經常會看到這種情況。 CSS 重設會將樣式重設為空白畫布。這樣，您就可以根據自己的意願對空白畫布進行設計。如果您想使用 CSS 重置，請查看 喬許·科莫的重置.

*請勿執行以下操作！

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

向內看！

本文將介紹使用 CSS 設定焦點樣式的最酷方法之一。如果您還沒有查看過 :focus-within 偽類，一定要看！在使用語義標記和 CSS 時，有許多隱藏的秘密，這就是其中之一。許多被忽略的東西預設都是可存取的，例如，語義標記預設是可存取的，並且應該始終在 div 上使用。

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/zh-TW/">Home</a></li>
      <li><a href="/zh-TW/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

header, nav, main, section, aside和 footer 都是語義元素。這 h1 和 ul 也是語義化且可訪問的。

除非需要建立自訂元件，否則 div 很好用，搭配 ARIA（可存取的富互聯網應用程式）。我們可以在後面的文章中深入探討 ARIA。現在讓我們專注於…看看我在這個 CSS 偽類上做了什麼。

:focus-within 偽類可讓您在某個元素包含的任何後代元素具有焦點時選擇該元素。

:focus-within 在行動！

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

的CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

上面的範例程式碼將添加橙色背景色，添加一些填充，並將標籤顏色變更為黑色。

最終產品如下圖所示。當然，改變樣式的可能性是無限的，但這應該會讓您走上正軌，讓每個人都更容易訪問網絡！

使用的另一個用例 :focus-within 會將標籤變成粗體、不同的顏色，或為弱視使用者放大標籤。範例程式碼如下所示。

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

的CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within 據報道，還具有全面的瀏覽器支持 我可以用嗎.

結論

在交付軟體時，創造令人驚嘆的、易於存取的使用者體驗始終應該是首要任務，不僅是在外部，在內部也是如此。身為開發人員，一直到高階領導層，我們都需要認識到其他人面臨的挑戰，以及我們如何成為網路平台的大使，使其變得更美好。

使用語義標記和 CSS 等技術來創建包容性空間是讓網路變得更美好的關鍵部分，讓我們繼續前進並改變生活。

查看 CSS-Tricks 上的另一個很棒的資源 使用：焦點內.

• SEO 支持的內容和 PR 分發。 今天得到放大。
• PlatoData.Network 垂直生成人工智能。 賦予自己力量。 訪問這裡。
• 柏拉圖愛流。 Web3 智能。 知識放大。 訪問這裡。
• 柏拉圖ESG。 碳， 清潔科技, 能源， 環境， 太陽能， 廢物管理。 訪問這裡。
• 柏拉圖健康。 生物技術和臨床試驗情報。 訪問這裡。
• 資源： https://css-tricks.com/accessible-forms-with-pseudo-classes/