:::

部落格

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

共 47 篇文章 第 1 / 5 頁

  • 用 <usermedia> 做視訊會議的等候室：瀏覽器幫你處理權限，但這六件事要自己做

    <usermedia> 把開相機的按鈕和權限流程交給瀏覽器，使用者封鎖過也能在頁面上直接恢復，報讀軟體也能操作權限視窗。但我在 Chrome 搭配 VoiceOver 實測後發現，lang="zh-Hant-TW" 會讓按鈕變成簡體、開啟後沒有任何狀態、鍵盤使用者按太快會失敗。這篇用視訊會議的等候室當範例，整理要自己補的六件事。

    前端技術HTMLJavaScript前端開發無障礙瀏覽器支援

  • 讓大標題剛好撐滿一整行：text-fit 實測，以及放大後字反而變小的陷阱

    text-fit 一行 CSS 就能讓文字放大到撐滿容器，或縮小到放得下，取代以前的 JavaScript 寫法。但我實測發現，只寫 grow 時，使用者放大頁面，字反而會變小，調大的預設字級也會被抵銷；換行時第一行還可能撐破容器。這篇用互動範例整理寫法、適合與不適合的情境，以及兼顧無障礙的建議寫法。

    前端技術CSS前端開發無障礙瀏覽器支援

  • 設計師畫得出來，工程師終於做得出來：用 corner-shape 做方圓角、優惠券、箭頭步驟和切角按鈕

    App 圖示的方圓角、優惠券的半圓缺口、結帳流程的箭頭步驟、遊戲風格的切角按鈕，以前都要靠 clip-path 或 mask，結果焦點外框和邊框一起被切掉。這篇用互動範例比較以前的寫法和 corner-shape，附上完整程式碼與註解，並實測強制色彩模式、點擊範圍等無障礙細節。

    前端技術CSS前端開發無障礙瀏覽器支援

  • 用 if() 和 @function 把無障礙寫進 CSS：減少動態、提高對比、最小點擊區

    CSS 的 if() 讓一個屬性裡就能寫條件，@function 讓重複的計算變成自訂函式。這篇用互動範例把減少動態、提高對比的焦點外框、24px 最小點擊區寫成條件和函式，也整理我實測踩到的坑：if() 沒寫 else，焦點外框會整個消失。

    前端技術CSS前端開發無障礙瀏覽器支援

  • setHTML() 很安全，但它把我的 ARIA 全部清掉了

    Element.setHTML() 是安全版的 innerHTML，插入 HTML 時會清掉 script 和事件屬性。但我實測發現，它的預設設定也會把所有 aria-*、role、id，連同 button、img、input、label 整個拿掉，而且不會報錯。這篇用互動範例比較預設、空設定和自訂允許清單，整理怎麼在安全和無障礙之間取得平衡。

    前端技術HTMLJavaScript前端開發無障礙瀏覽器支援

  • alpha() 一行調透明度，revert-rule 一行退回原樣：兩個 CSS 小工具實測

    alpha() 讓存在變數裡的顏色直接調透明度，不管它原本是 hex、rgb、hsl 還是 oklch；revert-rule 讓屬性退回「這條規則不存在」時的值。這篇用互動範例比較各種色彩寫法經過 alpha() 之後的結果，實測半透明色在亮底、暗底的對比，也整理 revert-rule 和 revert、revert-layer 的差別。

    前端技術CSS前端開發無障礙瀏覽器支援

  • width: 100% 為什麼會撐破容器？用 stretch 撐滿剛剛好

    元素有 margin 的時候，width: 100% 會撐出容器，box-sizing 也救不了。width: stretch 是「撐滿剩下的空間」，會自動扣掉 margin，也是 -webkit-fill-available 的標準名稱。這篇用互動範例比較 100%、calc() 和 stretch，整理它在按鈕、輸入框、flex、grid 裡的行為，也用放大 400% 的寬度檢查了這個網站。

    前端技術CSS前端開發無障礙瀏覽器支援

  • 手機也在下載 1920px 的圖？用 sizes="auto" 修好我的作品集

    響應式圖片的 sizes 很難寫，寫錯瀏覽器就會挑太大的圖。sizes="auto" 讓瀏覽器照圖片實際的寬度挑檔案。這篇先釐清「只有一張圖時有沒有用」，再用互動範例實測它的規則和陷阱，最後把它套用到我自己的作品集：手機上作品列表的圖片流量少了六成。

    前端技術HTML前端開發效能瀏覽器支援

  • 外面的 label 終於找得到 Shadow DOM 裡的 input：shadowrootreferencetarget

    Web Component 長年的無障礙難題：外面的 <label for>、aria-labelledby、aria-describedby 都指不到 Shadow DOM 裡的元素。shadowrootreferencetarget 讓元件指定「別人指向我的時候，其實是指向裡面的誰」。這篇用互動範例實測它能做什麼、做不到什麼、測試工具會誤報的地方，也拿我自己的 UI Kit 來看看可以怎麼用。

    前端技術HTMLWeb Components前端開發無障礙瀏覽器支援

  • 讓 ARIA 當唯一的真相：用 CSS attr() 直接讀 aria-valuenow

    CSS 的 attr() 以前只能用在 content，現在可以帶型別、用在任何屬性。這篇用無障礙的角度實測它：進度條、評分、樹狀選單的長度和縮排直接讀 ARIA 屬性，讓「看到的」和「報讀軟體讀到的」只有一個來源，不會不同步。也整理了子元素讀不到父層屬性、輸入框的 value 等實測時踩到的坑。

    前端技術CSS前端開發無障礙瀏覽器支援