:focus & :focus-visible 掌控焦點，提升互動體驗！

16th鐵人賽 focus focus-visible css 焦點

Lala Code

2024-09-28 00:30:05

2123 瀏覽

分享至

focus

上一篇介紹了游標互動的 :hover 狀態，其實鍵盤同樣可以與網頁互動！這篇將帶大家了解焦點效果 :focus 與 :focus-visible，幫助你更好地控制使用者與網站的互動體驗。

在網頁設計中，使用者與介面的互動體驗至關重要，而焦點（focus）正是用來輔助使用者導航及操作的重要工具之一。無論是在意見調查表、聯絡我們頁面、線上訂票系統，焦點效果都能有效幫助使用者快速辨識與操作。

💠焦點與無障礙網站

焦點效果除了增強互動體驗，還是無障礙網站設計中的重要元素。無障礙網站不僅對身障人士友好，還能提升網站的整體可用性，對 SEO 也有正面影響。

你可能會在一些網站上看到無障礙標章，這表示該網站符合無障礙設計標準。
focus

下方圖片為高鐵網站的訂票系統，當你使用滑鼠點擊、或按鍵盤 Tab 鍵，會觸發 :focus 的效果，這讓使用者知道目前焦點在哪個元素上，使網站更具互動性和可操作性。

focus

💠可以獲得焦點的元素

在介紹焦點效果的具體用法前，先來了解哪些 HTML 元素可以獲取焦點。基本上，以下元素皆可以透過點擊或鍵盤導航來獲取焦點：

<a>：有設置 href 的超連結
<input>：文字、密碼、電子郵件等文字輸入框
<textarea>：多行文本輸入框
<select>：下拉選單
<input type="checkbox">：勾選框
<input type="radio">：單選框
<button>：按鈕

💠`:focus` 基本用法

語法

選擇器:focus{
	屬性: 屬性值;
}

範例: 登入表單

一起試試：[CODEPEN]

<main>
  <h1>Login</h1>
  <form>
    <div>
      <label class="label">帳號</label>
      <input type="text" class="form-control">
    </div>
    <div>
      <label class="label">密碼</label>
      <input type="password" class="form-control">
    </div>
    <div class="checkbox-label">
      <input type="checkbox" id="remeber">
      <label for="remeber">記住我</label>
    </div>
    <button type="submit">登入</button>
  </form>
</main>

input:focus {
  outline: 2px solid red;
}

button:focus {
  outline: 2px solid red;
}

在這個範例中，當使用者將焦點移至輸入框或按鈕時，會顯示紅色的框線，幫助使用者辨識當前焦點位置。

focus

你可能會發現，focus 不管是滑鼠點擊或按 Tab 鍵都會產生紅框，但有時我們在點擊時，並不想出現紅框的效果，但又需要有無障礙的體驗，比方下面的例子：

在機車危險感知教育平台中，點擊側邊選單時，選單只會有淺藍色背景效果，只有在按 Tab 鍵時，才會出現紅色框，這樣一來既保住了原本的網站風格(不會有醜醜的紅框 😆)，又能滿足無障礙需求
focus

這是怎麼達成的呢？你可以用 :focus-visible 來做到這個效果！

💠`:focus-visible` 基本用法

語法

選擇器:focus-visible {
	屬性: 屬性值;
}

範例：導航選單

一起試試：[CODEPEN]

<nav class="menu">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

.menu a {
  text-decoration: none;
  padding: 10px 15px;
  background-color: #f2f2f2;
  border-radius: 5px;
  color: #333;
  transition: background-color 0.3s;
}

.menu a:hover {
  background-color: #ddd;
}

.menu a:focus-visible {
  outline: 3px solid #4caf50;
  background-color: #e6ffe6;
}

focus