Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

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

發表於 分類於 Disqus：

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 基本用法

語法

1
2
3
選擇器:focus{
  屬性: 屬性值;
}

範例: 登入表單

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
1
2
3
4
5
6
7
input:focus {
  outline: 2px solid red;
}

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

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

See the Pen focus by Lala (@bobee) on CodePen.

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

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

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



💠:focus-visible 基本用法

語法

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

範例：導航選單

1
2
3
4
5
6
<nav class="menu">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}

See the Pen focus-visible by Lala (@bobee) on CodePen.

當使用者透過鍵盤導航（按 Tab 鍵）時，會看到綠色框線與淺綠背景，幫助鍵盤使用者辨識當前的焦點位置。

💠 總結

:focus 和 :focus-visible 是提升互動性與無障礙體驗的重要 CSS 選擇器。:focus 適用於所有的焦點交互，而 :focus-visible 更適合在鍵盤導航時使用。兩者搭配可以在保留網站風格的同時，提升可用性並滿足無障礙設計的要求。



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️