---
title: "部落格 - Neil 的作品集"
description: "Neil 的部落格：前端、設計與無障礙的開發筆記"
canonical_url: "https://neillin.com/blog/"
meta:
  author: Neil
  keywords: "無障礙網頁, 設計管理, 資料視覺化, UI, UX, 切版"
  "og:description": "Neil 的部落格：前端、設計與無障礙的開發筆記"
  "og:image": "https://neillin.com/_og/s/o_009d54d042f97d15.png"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "部落格 - Neil 的作品集"
  "twitter:image": "https://neillin.com/_og/s/o_009d54d042f97d15.png"
---

> Index of every page on this site: [llms.txt](https://neillin.com/llms.txt)

:::

# 部落格

前端、設計與無障礙的開發筆記。

共 47 篇文章 · 第 1 / 5 頁

- ## [用 \<usermedia> 做視訊會議的等候室：瀏覽器幫你處理權限，但這六件事要自己做](https://neillin.com/blog/html-usermedia "前往  用 <usermedia> 做視訊會議的等候室：瀏覽器幫你處理權限，但這六件事要自己做")

  \<usermedia> 把開相機的按鈕和權限流程交給瀏覽器，使用者封鎖過也能在頁面上直接恢復，報讀軟體也能操作權限視窗。但我在 Chrome 搭配 VoiceOver 實測後發現，lang="zh-Hant-TW" 會讓按鈕變成簡體、開啟後沒有任何狀態、鍵盤使用者按太快會失敗。這篇用視訊會議的等候室當範例，整理要自己補的六件事。2026年10月31日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")HTMLJavaScript前端開發無障礙瀏覽器支援
- ## [讓大標題剛好撐滿一整行：text-fit 實測，以及放大後字反而變小的陷阱](https://neillin.com/blog/css-text-fit "前往  讓大標題剛好撐滿一整行：text-fit 實測，以及放大後字反而變小的陷阱")

  text-fit 一行 CSS 就能讓文字放大到撐滿容器，或縮小到放得下，取代以前的 JavaScript 寫法。但我實測發現，只寫 grow 時，使用者放大頁面，字反而會變小，調大的預設字級也會被抵銷；換行時第一行還可能撐破容器。這篇用互動範例整理寫法、適合與不適合的情境，以及兼顧無障礙的建議寫法。2026年10月25日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")CSS前端開發無障礙瀏覽器支援
- ## [設計師畫得出來，工程師終於做得出來：用 corner-shape 做方圓角、優惠券、箭頭步驟和切角按鈕](https://neillin.com/blog/css-corner-shape "前往  設計師畫得出來，工程師終於做得出來：用 corner-shape 做方圓角、優惠券、箭頭步驟和切角按鈕")

  App 圖示的方圓角、優惠券的半圓缺口、結帳流程的箭頭步驟、遊戲風格的切角按鈕，以前都要靠 clip-path 或 mask，結果焦點外框和邊框一起被切掉。這篇用互動範例比較以前的寫法和 corner-shape，附上完整程式碼與註解，並實測強制色彩模式、點擊範圍等無障礙細節。2026年10月16日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")CSS前端開發無障礙瀏覽器支援
- ## [用 if() 和 @function 把無障礙寫進 CSS：減少動態、提高對比、最小點擊區](https://neillin.com/blog/css-if-function "前往  用 if() 和 @function 把無障礙寫進 CSS：減少動態、提高對比、最小點擊區")

  CSS 的 if() 讓一個屬性裡就能寫條件，@function 讓重複的計算變成自訂函式。這篇用互動範例把減少動態、提高對比的焦點外框、24px 最小點擊區寫成條件和函式，也整理我實測踩到的坑：if() 沒寫 else，焦點外框會整個消失。2026年10月16日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")CSS前端開發無障礙瀏覽器支援
- ## [setHTML() 很安全，但它把我的 ARIA 全部清掉了](https://neillin.com/blog/html-sethtml "前往  setHTML() 很安全，但它把我的 ARIA 全部清掉了")

  Element.setHTML() 是安全版的 innerHTML，插入 HTML 時會清掉 script 和事件屬性。但我實測發現，它的預設設定也會把所有 aria-\*、role、id，連同 button、img、input、label 整個拿掉，而且不會報錯。這篇用互動範例比較預設、空設定和自訂允許清單，整理怎麼在安全和無障礙之間取得平衡。2026年10月16日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")HTMLJavaScript前端開發無障礙瀏覽器支援
- ## [alpha() 一行調透明度，revert-rule 一行退回原樣：兩個 CSS 小工具實測](https://neillin.com/blog/css-alpha-revert-rule "前往  alpha() 一行調透明度，revert-rule 一行退回原樣：兩個 CSS 小工具實測")

  alpha() 讓存在變數裡的顏色直接調透明度，不管它原本是 hex、rgb、hsl 還是 oklch；revert-rule 讓屬性退回「這條規則不存在」時的值。這篇用互動範例比較各種色彩寫法經過 alpha() 之後的結果，實測半透明色在亮底、暗底的對比，也整理 revert-rule 和 revert、revert-layer 的差別。2026年10月15日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")CSS前端開發無障礙瀏覽器支援
- ## [width: 100% 為什麼會撐破容器？用 stretch 撐滿剛剛好](https://neillin.com/blog/css-stretch "前往  width: 100% 為什麼會撐破容器？用 stretch 撐滿剛剛好")

  元素有 margin 的時候，width: 100% 會撐出容器，box-sizing 也救不了。width: stretch 是「撐滿剩下的空間」，會自動扣掉 margin，也是 -webkit-fill-available 的標準名稱。這篇用互動範例比較 100%、calc() 和 stretch，整理它在按鈕、輸入框、flex、grid 裡的行為，也用放大 400% 的寬度檢查了這個網站。2026年10月14日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")CSS前端開發無障礙瀏覽器支援
- ## [手機也在下載 1920px 的圖？用 sizes="auto" 修好我的作品集](https://neillin.com/blog/html-sizes-auto "前往  手機也在下載 1920px 的圖？用 sizes=\"auto\" 修好我的作品集")

  響應式圖片的 sizes 很難寫，寫錯瀏覽器就會挑太大的圖。sizes="auto" 讓瀏覽器照圖片實際的寬度挑檔案。這篇先釐清「只有一張圖時有沒有用」，再用互動範例實測它的規則和陷阱，最後把它套用到我自己的作品集：手機上作品列表的圖片流量少了六成。2026年10月14日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")HTML前端開發效能瀏覽器支援
- ## [外面的 label 終於找得到 Shadow DOM 裡的 input：shadowrootreferencetarget](https://neillin.com/blog/shadow-dom-reference-target "前往  外面的 label 終於找得到 Shadow DOM 裡的 input：shadowrootreferencetarget")

  Web Component 長年的無障礙難題：外面的 \<label for>、aria-labelledby、aria-describedby 都指不到 Shadow DOM 裡的元素。shadowrootreferencetarget 讓元件指定「別人指向我的時候，其實是指向裡面的誰」。這篇用互動範例實測它能做什麼、做不到什麼、測試工具會誤報的地方，也拿我自己的 UI Kit 來看看可以怎麼用。2026年10月14日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")HTMLWeb Components前端開發無障礙瀏覽器支援
- ## [讓 ARIA 當唯一的真相：用 CSS attr() 直接讀 aria-valuenow](https://neillin.com/blog/css-attr "前往  讓 ARIA 當唯一的真相：用 CSS attr() 直接讀 aria-valuenow")

  CSS 的 attr() 以前只能用在 content，現在可以帶型別、用在任何屬性。這篇用無障礙的角度實測它：進度條、評分、樹狀選單的長度和縮排直接讀 ARIA 屬性，讓「看到的」和「報讀軟體讀到的」只有一個來源，不會不同步。也整理了子元素讀不到父層屬性、輸入框的 value 等實測時踩到的坑。2026年10月13日 [前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")CSS前端開發無障礙瀏覽器支援

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://neillin.com/#website","@type":"WebSite","inLanguage":"zh-Hant-TW","name":"Neil 的作品集","url":"https://neillin.com/","workTranslation":{"@id":"https://neillin.com/en/#website"}},{"@id":"https://neillin.com/blog#webpage","@type":"CollectionPage","description":"Neil 的部落格：前端、設計與無障礙的開發筆記","inLanguage":"zh-Hant-TW","name":"部落格","url":"https://neillin.com/blog/","isPartOf":{"@id":"https://neillin.com/#website"},"mainEntity":{"@id":"https://neillin.com/blog#blog"},"potentialAction":[{"@type":"ReadAction","target":["https://neillin.com/blog/"]}]},{"@id":"https://neillin.com/#person","@type":"Person","jobTitle":"UI/UX 設計師","name":"Neil Lin","url":"https://neillin.com/","sameAs":["https://github.com/Neil-Lin"]},{"@id":"https://neillin.com/blog#blog","@type":"Blog","inLanguage":"zh-Hant-TW","name":"部落格","url":"https://neillin.com/blog/","blogPost":[{"@type":"BlogPosting","headline":"用 \u003Cusermedia> 做視訊會議的等候室：瀏覽器幫你處理權限，但這六件事要自己做","description":"\u003Cusermedia> 把開相機的按鈕和權限流程交給瀏覽器，使用者封鎖過也能在頁面上直接恢復，報讀軟體也能操作權限視窗。但我在 Chrome 搭配 VoiceOver 實測後發現，lang=\"zh-Hant-TW\" 會讓按鈕變成簡體、開啟後沒有任何狀態、鍵盤使用者按太快會失敗。這篇用視訊會議的等候室當範例，整理要自己補的六件事。","url":"https://neillin.com/blog/html-usermedia/","datePublished":"2026-10-31","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"讓大標題剛好撐滿一整行：text-fit 實測，以及放大後字反而變小的陷阱","description":"text-fit 一行 CSS 就能讓文字放大到撐滿容器，或縮小到放得下，取代以前的 JavaScript 寫法。但我實測發現，只寫 grow 時，使用者放大頁面，字反而會變小，調大的預設字級也會被抵銷；換行時第一行還可能撐破容器。這篇用互動範例整理寫法、適合與不適合的情境，以及兼顧無障礙的建議寫法。","url":"https://neillin.com/blog/css-text-fit/","datePublished":"2026-10-25","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"設計師畫得出來，工程師終於做得出來：用 corner-shape 做方圓角、優惠券、箭頭步驟和切角按鈕","description":"App 圖示的方圓角、優惠券的半圓缺口、結帳流程的箭頭步驟、遊戲風格的切角按鈕，以前都要靠 clip-path 或 mask，結果焦點外框和邊框一起被切掉。這篇用互動範例比較以前的寫法和 corner-shape，附上完整程式碼與註解，並實測強制色彩模式、點擊範圍等無障礙細節。","url":"https://neillin.com/blog/css-corner-shape/","datePublished":"2026-10-16","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"用 if() 和 @function 把無障礙寫進 CSS：減少動態、提高對比、最小點擊區","description":"CSS 的 if() 讓一個屬性裡就能寫條件，@function 讓重複的計算變成自訂函式。這篇用互動範例把減少動態、提高對比的焦點外框、24px 最小點擊區寫成條件和函式，也整理我實測踩到的坑：if() 沒寫 else，焦點外框會整個消失。","url":"https://neillin.com/blog/css-if-function/","datePublished":"2026-10-16","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"setHTML() 很安全，但它把我的 ARIA 全部清掉了","description":"Element.setHTML() 是安全版的 innerHTML，插入 HTML 時會清掉 script 和事件屬性。但我實測發現，它的預設設定也會把所有 aria-*、role、id，連同 button、img、input、label 整個拿掉，而且不會報錯。這篇用互動範例比較預設、空設定和自訂允許清單，整理怎麼在安全和無障礙之間取得平衡。","url":"https://neillin.com/blog/html-sethtml/","datePublished":"2026-10-16","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"alpha() 一行調透明度，revert-rule 一行退回原樣：兩個 CSS 小工具實測","description":"alpha() 讓存在變數裡的顏色直接調透明度，不管它原本是 hex、rgb、hsl 還是 oklch；revert-rule 讓屬性退回「這條規則不存在」時的值。這篇用互動範例比較各種色彩寫法經過 alpha() 之後的結果，實測半透明色在亮底、暗底的對比，也整理 revert-rule 和 revert、revert-layer 的差別。","url":"https://neillin.com/blog/css-alpha-revert-rule/","datePublished":"2026-10-15","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"width: 100% 為什麼會撐破容器？用 stretch 撐滿剛剛好","description":"元素有 margin 的時候，width: 100% 會撐出容器，box-sizing 也救不了。width: stretch 是「撐滿剩下的空間」，會自動扣掉 margin，也是 -webkit-fill-available 的標準名稱。這篇用互動範例比較 100%、calc() 和 stretch，整理它在按鈕、輸入框、flex、grid 裡的行為，也用放大 400% 的寬度檢查了這個網站。","url":"https://neillin.com/blog/css-stretch/","datePublished":"2026-10-14","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"手機也在下載 1920px 的圖？用 sizes=\"auto\" 修好我的作品集","description":"響應式圖片的 sizes 很難寫，寫錯瀏覽器就會挑太大的圖。sizes=\"auto\" 讓瀏覽器照圖片實際的寬度挑檔案。這篇先釐清「只有一張圖時有沒有用」，再用互動範例實測它的規則和陷阱，最後把它套用到我自己的作品集：手機上作品列表的圖片流量少了六成。","url":"https://neillin.com/blog/html-sizes-auto/","datePublished":"2026-10-14","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"外面的 label 終於找得到 Shadow DOM 裡的 input：shadowrootreferencetarget","description":"Web Component 長年的無障礙難題：外面的 \u003Clabel for>、aria-labelledby、aria-describedby 都指不到 Shadow DOM 裡的元素。shadowrootreferencetarget 讓元件指定「別人指向我的時候，其實是指向裡面的誰」。這篇用互動範例實測它能做什麼、做不到什麼、測試工具會誤報的地方，也拿我自己的 UI Kit 來看看可以怎麼用。","url":"https://neillin.com/blog/shadow-dom-reference-target/","datePublished":"2026-10-14","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"讓 ARIA 當唯一的真相：用 CSS attr() 直接讀 aria-valuenow","description":"CSS 的 attr() 以前只能用在 content，現在可以帶型別、用在任何屬性。這篇用無障礙的角度實測它：進度條、評分、樹狀選單的長度和縮排直接讀 ARIA 屬性，讓「看到的」和「報讀軟體讀到的」只有一個來源，不會不同步。也整理了子元素讀不到父層屬性、輸入框的 value 等實測時踩到的坑。","url":"https://neillin.com/blog/css-attr/","datePublished":"2026-10-13","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"放大之後，置中的內容上半部不見了？用 safe center 讓它捲得到","description":"align-items: center 是最常寫的 CSS 之一，但內容比容器大的時候，會往兩邊溢出，跑到上方和左邊的部分捲不到。使用者把畫面放大到 400% 時特別容易發生，鍵盤 Tab 過去也看不到焦點。這篇用互動範例實測 safe center，整理哪些置中寫法會出事、哪些預設就安全，最後也檢查了這個網站。","url":"https://neillin.com/blog/css-safe-alignment/","datePublished":"2026-10-13","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"section 裡的 h1 不再自動縮小了：順便把我網站的 h1 改對","description":"瀏覽器改了內建樣式：h1 放在 section、article、aside、nav 裡，不會再一層層縮小。這篇用互動範例比較新舊樣式，說明以前為什麼要縮小、為什麼報讀軟體從來沒照做，以及這個變更會不會影響你的網站。最後也檢查了自己的網站，把每一頁的 h1 從網站名稱改成頁面標題。","url":"https://neillin.com/blog/html-nested-h1/","datePublished":"2026-10-13","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"不用再手刻 roving tabindex：用 focusgroup 做鍵盤方向鍵導覽","description":"工具列、頁籤、選單這類元件，WAI-ARIA 要求整組只佔一個 Tab 停留點、組內用方向鍵移動，以前都要自己寫 roving tabindex。focusgroup 讓 HTML 加一個屬性就做到。這篇在 Chromium 153 實測六種類型、修飾詞、自動加上的角色，以及頁籤入口和只寫 focusgroup 沒效果這兩個坑，也附上不支援時的後備寫法。","url":"https://neillin.com/blog/focusgroup/","datePublished":"2026-10-10","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"讓報讀軟體開口說話：用 ariaNotify() 取代 aria-live","description":"以前要讓報讀軟體唸出「已加入購物車」，只能藏一個 aria-live 區塊再塞文字，而且常常不唸。ariaNotify() 讓你直接請報讀軟體說話。這篇從我自己網站的 aria-live 問題開始，整理寫法、元素版與語言、priority 的限制，以及不支援時退回 live region 的降級寫法。","url":"https://neillin.com/blog/aria-notify/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"只用 CSS 做輪播，無障礙夠嗎？拿我的 UI Kit 來對照","description":"::scroll-marker 和 ::scroll-button() 讓 CSS 不寫 JavaScript 就能做出輪播的導覽點和上一張／下一張按鈕。但輪播一直是無障礙的重災區，原生版本到底夠不夠？這篇用同樣的內容，把原生 CSS 輪播和我在 Accesserty UI Kit 裡實作的 \u003Cau-carousel> 並排，實測無障礙樹和鍵盤操作。","url":"https://neillin.com/blog/css-carousel-a11y/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"Web Component 為什麼會閃一下？用宣告式 Shadow DOM 解決","description":"Web Component 的 Shadow DOM 一定要等 JavaScript 跑完才會出現，所以 SSR 時會閃一下，JavaScript 沒載入就整個不見。宣告式 Shadow DOM 讓你直接在 HTML 寫出 shadow root。這篇用關掉 JavaScript 的對照範例說明寫法、元件怎麼接手、動態插入的限制，以及在 Vue／Nuxt 裡實測踩到的坑和解法。","url":"https://neillin.com/blog/declarative-shadow-dom/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"現在的 dialog 要怎麼寫？從 showModal() 到 command、closedby 一次整理","description":"對話框不用再自己用 div 刻了。這篇整理 2026 年寫 \u003Cdialog> 的方式：show() 和 showModal() 的差別、用 Invoker Commands 零 JavaScript 開關、closedby 決定誰能關閉、request-close 攔下未儲存的修改、form method=\"dialog\" 的回傳值，以及無障礙與動畫要注意的地方，每一段都有可以操作的範例。","url":"https://neillin.com/blog/dialog-modern-guide/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"收合的內容，為什麼按 Ctrl+F 找不到？聊聊 hidden=\"until-found\"","description":"FAQ、手風琴這類收合起來的內容，用 hidden 藏起來就搜尋不到。hidden=\"until-found\" 讓內容藏著也能被頁內搜尋與深層連結找到，找到時自動展開。這篇用可以直接操作的範例比較四種收合方式，也整理了實測時踩到的三個坑。","url":"https://neillin.com/blog/hidden-until-found/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"Popover 的 auto、manual、hint 到底差在哪？做個可以玩的範例來看看","description":"同一個 popover 屬性，auto、manual、hint 三種值決定能不能點外面關閉、打開時會不會把別人關掉。這篇用可以直接操作的範例逐一比較，也整理了用 hint 做 tooltip 時要自己補的無障礙細節，以及不支援時的降級問題。","url":"https://neillin.com/blog/popover-auto-manual-hint/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"提示框被切掉了？用 @position-try 讓瀏覽器自己找位置","description":"tooltip、選單靠近畫面邊緣就被切掉，以前要靠 JavaScript 計算翻面。position-try-fallbacks 和 @position-try 讓 CSS 自己處理：空間不夠就換位置。這篇用可以拖動錨點的互動範例，整理三種寫法、margin 會跟著翻、瀏覽器會記住位置、position-try-order，以及都放不下時會怎樣。","url":"https://neillin.com/blog/position-try/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"讀到一半畫面突然跳走？聊聊捲動錨定 overflow-anchor","description":"讀到一半，上方的圖片或廣告晚了幾秒才載入，畫面就整個往下跳。瀏覽器其實內建了「捲動錨定」來處理這件事。這篇用可以操作的範例實測它什麼時候有效、什麼時候幫不上忙，也分享我在自己網站找到的兩個實際例子，以及順手修掉的平滑捲動問題。","url":"https://neillin.com/blog/scroll-anchoring/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"中英文之間要不要打空白？text-autospace 讓瀏覽器自動補間距","description":"中文和英文、數字之間要不要加空白，爭論了很多年。text-autospace 讓瀏覽器自動補上一點間距，不用再手動打。這篇用並排的互動範例實測：間距有多寬、會不會跟手打的空白疊加、複製出來的文字有沒有變、程式碼區塊要注意什麼，最後也直接套用到這個網站上。","url":"https://neillin.com/blog/text-autospace/","datePublished":"2026-10-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"AI 很會研究，但它是可靠的研究者嗎？我乾脆直接問了它本人","description":"AI 2027 的核心假設，是 AI 能自己做研究、自我改進。但我每天用 AI 做產品研究的感覺是：真正的瓶頸不是「找不到資料」，而是它不知道自己什麼時候不該相信找到的資料——甚至不知道問題本身就問錯了。聊到最後，我乾脆直接問它本人。","url":"https://neillin.com/blog/ai-reliable-researcher/","datePublished":"2026-08-30","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"全球網頁無障礙制度設計（二）：再擴八個法域，看見「主辦」與「認證」之間的灰色地帶","description":"上一篇盤點了十六個法域，原本想直接接著寫標章深度比較，但收集香港、卡達資料時發現——很多我以為的「政府標章」，其實是民間機構主辦、政府只是掛名協辦。於是決定先把版圖擴大到二十四個法域，把制度地基補完，再談標章。","url":"https://neillin.com/blog/a11y-world-rules-part2/","datePublished":"2026-07-17","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序","description":"一份可快速掃描的現代 CSS 與 HTML 特性清單，依版面、選擇器、色彩、文字、動畫等分類，另收錄 `\u003Cgeolocation>`、`focusgroup`、Invoker Commands 等宣告式 HTML 新特性，逐條整理用途、範例與瀏覽器支援度。","url":"https://neillin.com/blog/css-techniques-checklist/","datePublished":"2026-07-06","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"誰在做無障礙、又做到哪一級？臺灣民間團體無障礙標章 608 筆分析","description":"從數位發展部無障礙網路空間服務網的公開資料中，取出 608 筆民間團體紀錄，人工加 AI 輔助分成 8 大類、20 子類，交叉無障礙標章等級後推測：AAA 等級的達成與否與產業別關聯不大，較可能取決於『網站範圍、技術能力與商業動機』的組合。","url":"https://neillin.com/blog/civil-group-a11y-badge/","datePublished":"2026-07-03","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"全球網頁無障礙制度設計：各國法規、公私部門執行工具與驅動力比較","description":"最近我正在幫我的 Accesserty Signal 擴充標章功能。原本只是單純想收集各國的標章、法規與檢測項目，但收集到一半時發現——應該要先理解各國的「政策」才行","url":"https://neillin.com/blog/a11y-world-rules/","datePublished":"2026-06-09","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"無障礙測試不該被職業分工綁住","description":"這幾年，無障礙不再是少數專家的話題，以前談到網站無障礙，是法規、稽核、檢測報告，或是某個專案最後才會被打開的 checklist，但現在不一樣了","url":"https://neillin.com/blog/accessibility-testing/","datePublished":"2026-05-30","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"Forbes Accessibility 200","description":"前幾天才知道 Forbes Accessibility 200 這個名單。","url":"https://neillin.com/blog/2026-forbes-accessibility/","datePublished":"2026-05-28","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"無障礙網頁的服務對象在改變了嗎？","description":"前不久，Anthropic 工程師 Thariq 在「人類已不再手改程式」的前提下，提到 HTML 比 Markdown 更適合跟 AI 互動這件事。","url":"https://neillin.com/blog/a11y-tree-for-who/","datePublished":"2026-05-13","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"裹著 AI 糖衣的無障礙網頁服務？","description":"就在幾天前，我使用的 Gemini 自動排程幫我抓的每日無障礙消息推送一則文章給我，該則文章裡說明他們的核心技術透過 AI 可以在網頁前端渲染時加上無障礙網頁技術以及提供個人化調整網頁的快捷設定。","url":"https://neillin.com/blog/ai-sugar/","datePublished":"2026-05-08","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"2026 年 4 月 關於無障礙網頁發展的心得","description":"看著目前程式工具在 AI 方面的發展、數位無障礙的各種方向、各種職缺也有所增長、各種無障礙網頁規範 Agent Skills 和 AI 檢測也開始蓬勃發展，我雖然有從中受益，但我感受到更大的迷惘","url":"https://neillin.com/blog/2026-04-a11y-opinion/","datePublished":"2026-04-30","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"用普通 Prompt 來 Vibe 一個解決自己工作痛點的產品","description":"用最普通的 Prompt「Vibe coding」做出一個解決團隊規格書協作痛點的小產品，記錄從釐清真正需求到實際做出來的過程。","url":"https://neillin.com/blog/vibe-coding-product/","datePublished":"2026-04-23","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"Accesserty DevCheck — 在開發階段模擬與偵測無障礙問題","description":"不是等到出問題才補救，而是提早在開發階段「感受」與「理解」可能的障礙","url":"https://neillin.com/blog/a11y-dev-tool/","datePublished":"2025-05-31","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"看不見的體驗差距：為什麼搜尋不到真正好用的網站？","description":"現在的搜尋引擎以 SEO、速度、內容量排序，卻排不出「真正好用」的網站。談這個看不見的體驗差距，以及我為什麼決定在搜尋結果中顯示無障礙指標。","url":"https://neillin.com/blog/search-good-website/","datePublished":"2025-05-29","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"打造 Accesserty — 從搜尋到開發的無障礙網頁之體驗","description":"分享我花約一個月打造的品牌 Accesserty：一套從搜尋體驗到開發測試的無障礙工具生態，用溫和而理性的方式，讓無障礙網頁被看見、被理解、被改善。","url":"https://neillin.com/blog/accesserty-eco/","datePublished":"2025-05-23","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"LLM Chat Accessibility","description":"因為很好奇，所以想檢測一下主流 LLM Chat 工具在無障礙上的支援程度","url":"https://neillin.com/blog/llm-chat-a11y/","datePublished":"2025-04-16","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"建立所見即所得編輯器的無障礙檢測工具，以 TinyMCE 為例","description":"以 TinyMCE 為例，為所見即所得（WYSIWYG）編輯器打造無障礙檢測工具，幫助撰稿者在自由編輯的同時，讓文章內容也符合無障礙網頁規範。","url":"https://neillin.com/blog/tinymce-custom-a11y-tool/","datePublished":"2025-01-01","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"讓使用者透過 CUI 客製化網站風格","description":"本篇簡單探討如果使用者可以透過 CUI 改變網站排版與風格，進而打破目前由開發者規劃好的體驗，將有什麼好處和壞處","url":"https://neillin.com/blog/cui-change-style/","datePublished":"2024-12-23","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"我真的需要一個生成式 AI 工具來產生整份網頁設計稿嗎？","description":"試用 Framer AI 產生整份網頁設計稿後的心得：生成式 AI 在靈感、知識與素材上很方便，但要它直接產出一整份設計稿，真的是我需要的嗎？","url":"https://neillin.com/blog/do-i-really-need-a-generative-ai-tool-to-generate-a-full-web-design-layout/","datePublished":"2023-06-16","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"為什麼我愛上了在設計與切版時使用 Emoji","description":"從無障礙設計的角度探討 icon 對網站視覺與體驗的影響，以及為什麼我在設計與切版時改用 Emoji——越少依賴，越不容易出問題，也更貼心。","url":"https://neillin.com/blog/why-i-love-emoji/","datePublished":"2022-07-02","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"Ballpark — 適合線上驗證想法的問卷服務","description":"前幾天收到 Prototypr.io 電子報，發表了一款線上問卷新服務。來寫寫快速使用後的心得。","url":"https://neillin.com/blog/ballpark-intro/","datePublished":"2022-06-29","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"我的第一個 Chrome 瀏覽器擴充程式：Report Website issues","description":"大概七年前看到同事有做了一個瀏覽器擴充程式，當時的我也是躍躍欲試，沒想到就這樣過了七年，直接變成大叔了。","url":"https://neillin.com/blog/report-website-issue/","datePublished":"2022-06-29","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"通過臺灣 AA 級無障礙網頁標章且美觀的網站","description":"定期整理通過臺灣 AA 級無障礙網頁標章、同時兼顧美觀與 UI 的網站清單，證明無障礙與設計美感可以並存。","url":"https://neillin.com/blog/taiwan-beauty-aa-website/","datePublished":"2022-06-10","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"無障礙網頁設計學習與簡易要點","description":"整理無障礙網頁設計的學習筆記與簡易要點，含公司內部教育訓練文件與完整系列文章，適合想入門數位無障礙的人參考。","url":"https://neillin.com/blog/a11y-learning/","datePublished":"2022-06-07","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"SEO 整理","description":"SEO（搜尋引擎最佳化）學習筆記總整理：從 HTML meta、載入速度、網站安全、提交索引、robots.txt 到 UX 與實用工具的完整重點。","url":"https://neillin.com/blog/seo/","datePublished":"2020-01-16","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}},{"@type":"BlogPosting","headline":"如果使用即時通訊 UI 來設計購物車結帳流程，會是什麼樣的感覺？","description":"昨晚在填寫一些網路表單覺得好枯燥乏味時，突然標題靈光一閃，於是決定在放國慶連假前，好好的集中精神來實做、初探一下，否則放完了假可能會是一條活屍行走於人間…","url":"https://neillin.com/blog/shopping-in-chat-ui/","datePublished":"2017-10-06","author":{"@id":"https://neillin.com/#person"},"publisher":{"@id":"https://neillin.com/#person"}}],"publisher":{"@id":"https://neillin.com/#person"}},{"@id":"https://neillin.com/blog/#/schema/breadcrumb-list/1","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"回首頁","item":"https://neillin.com/"},{"@type":"ListItem","position":2,"name":"部落格","item":"https://neillin.com/blog/"}]}]}
```

## Sitemap

See the full [sitemap](https://neillin.com/sitemap.md) for all pages.