最短的版本：aria-hidden="true" 在 CSS 三角形上只有在形狀純粹是裝飾性、且不傳達使用者實際需要的任何資訊時才是正確的。一旦三角形代表狀態、方向、驗證、導航，或任何其他意義，或是取代某個控制項，從輔助技術中隱藏它，就等於移除了原本缺少的訊號。border-triangle 技巧是將整個形狀以一條帶顏色的 CSS border 畫出，並在一個零尺寸的內容盒上搭配透明的 border，而片段複製貼上產生器輸出的內容包含一個帶有 aria-hidden="true" 且沒有內部文字的 div。該輸出適用於分隔線、裝飾性雪佛龍 (chevron) 或視覺點綴，但並不適用於具有意義的符號。應用於網頁 UI 無障礙指引的一致性原則很簡單：純粹用於視覺處理的元素可以從無障礙樹中移除，而用於溝通或觸發某件事的元素，則必須透過可見文字、可存取名稱或包裹它的語意控制項保持可達。
aria-hidden 的作用與非作用
aria-hidden 是最簡單的 ARIA 狀態之一：當設定為 "true" 時，會從無障礙樹中移除該元素及其所有後代；當設定為 "false" 或省略時，則會保留它們對輔助技術的可見性。這個屬性不會在視覺上隱藏元素、不會停止滑鼠或鍵盤互動，也不會將元素從 DOM 中卸除。螢幕閱讀器使用者對 aria-hidden="true" 的感知方式，與明眼使用者若該元素剛好是透明或被覆蓋時的感知方式相同，完全沒有任何朗讀。
這種隱藏行為在單一方向上也是不留情面的：在父元素上設定 aria-hidden="true" 會同時移除所有後代，這使得該屬性成為一種簡潔的方式，可將整個裝飾性群組從輔助層中剔除。在一個已經具有可存取名稱的控制項上設定該屬性，並不會剝奪該名稱，因為可存取名稱是由可見標籤、aria-label 或 aria-labelledby 計算出來，而不是來自元素本身的文字內容。這就是為什麼一個隱藏在已標記按鈕內部的 CSS 三角形本質上是安全的：朗讀來自於按鈕，而非三角形。
aria-hidden 何時適用於 CSS 三角形
CSS 三角形產生器輸出一個沒有內部文字、且帶有 aria-hidden="true" 屬性的單一 div。對於任何僅添加視覺風味、且未傳達使用者若沒有它便會錯失的任何資訊的三角形來說，這個模式是正確的。具體例子包括：在已經自我描述的標題旁邊繪製的小型雪佛龍、兩個不相關的卡片版面之間的分隔三角形、空狀態插圖開頭的裝飾性箭頭，或英雄橫幅中色彩緞帶的純視覺延續。只要明眼使用者和螢幕閱讀器使用者僅從周圍文字就能獲得相同的資訊，三角形就可以保持沉默。
在這些情況下移除 aria-hidden 並不會改善體驗。它反而會在螢幕閱讀器輸出中注入雜亂的「triangle」朗讀，並迫使使用者略過一個毫無意義的片段。產生器的預設片段正是為這個確切的使用情境而設計，所以實際上的建議是：當三角形僅作為視覺裝飾時，保持原樣不動；只有當形狀開始承載意義時，才採用升級步驟。
三角形使用 aria-hidden 是不正確的時機
一旦三角形承載意義，規則就會立即翻轉。如果該形狀指向某個方向提示，而其他元素沒有表達出來，並搭配一個「Continue」按鈕、在精靈中的某個已標記步驟旁邊、或指向「Next」可操作元素，那麼隱藏它就等於丟棄了唯一的訊號。如果三角形屬於驗證訊息的一部分，例如在表單欄位下方的紅色驚嘆號，它就成為該錯誤訊息的一部分，必須能夠傳達到輔助技術。如果三角形完全取代了某個控制項，例如一個未被包裝在按鈕內的小型展開或收合插入號，那麼這個 div 本身就需要成為觸發器，而非裝飾。
在上述每種情況下，修正方式都是保留視覺三角形，但停止將其從無障礙功能中隱藏。標準的做法是：在包裹它的按鈕或連結上新增可存取名稱、附加指向三角形在視覺上強調之相同文字的 aria-describedby，或將三角形提升為具有 type="button"、aria-label 和鍵盤處理功能的獨立互動元素。產生器輸出的無 JS HTML 本身無法作為控制項；該升級是開發者的責任，並且應在同一次編輯中移除片段裡的 aria-hidden 屬性，以便新的可存取名稱能夠實際傳達到輔助技術。
如何使用正確的無障礙處理方式產生 CSS 三角形
以下步驟會產生一個 border 三角形，並驗證哪種無障礙處理方式適合工具所給出的片段。在現代的 Chromium、Firefox 或 Safari 分頁中操作即可；所有動作都不會離開瀏覽器分頁。
- 在瀏覽器分頁中開啟 CSS 三角形產生器，並從方向控制項中選擇三角形方向 — 上、下、左或右。
- 輸入介於 10 到 300 像素之間的整數寬度和高度值；表單會拒絕小數和超出範圍的數字，而不會靜默地將其限制在範圍內。
- 在表單中以 "#rrggbb" 格式輸入一個六位數的 HEX 顏色。預覽會立即將該顏色繪製到帶顏色的 border 上，而兩條垂直的透明 border 則保持透明。
- 在三角形將實際放置的大小和背景上檢查即時預覽。如需確認感知到的大小，請調整周圍的內距或頁面縮放。
- 點擊 Copy CSS 將展開的 border 宣告複製到剪貼簿，然後點擊 Copy HTML 複製具有所產生的類別名稱和 aria-hidden="true" 屬性的對應 div。
- 判斷該片段的 aria-hidden 對於目標位置是否正確。對於純裝飾性的三角形，請逐字貼上 HTML。對於具有意義的三角形，請刪除 aria-hidden 屬性，將該 div 包裝在語意控制項 (按鈕、連結或已標記的容器) 中，並提供可存取名稱，同時更新兩個貼上區塊中的 CSS 類別名稱，以確保樣式表和標記保持同步。
- 如果您現有的樣式表已使用預設類別 (lizely-triangle)，請在發布前搜尋衝突，並在兩個貼上區塊中一致地重新命名。
Border-Triangle 片段背後的幾何原理
複製的 HTML 看起來不尋常的原因是，三角形的內容寬度和內容高度都為零，所以元素內部不會直接繪製任何東西。形狀本身是由在一個點相交的 CSS border 繪製而成：兩條透明 border 形成兩條斜邊，而剩餘的 border 則填上您選擇的 HEX 顏色，並指向所選的方向。展開的宣告是有意設計的，並與工具輸出的內容相符。
| 方向 | 帶顏色的 border | 透明 border |
|---|---|---|
| 上 | 下 | 左、右 |
| 下 | 上 | 左、右 |
| 左 | 右 | 上、下 |
| 右 | 左 | 上、下 |
對於垂直三角形 (上或下)，兩條透明側邊 border 加總等於所要求的寬度，而帶顏色的 border 等於所要求的高度。對於水平三角形 (左或右)，透明的上、下 border 加總等於所要求的高度，而帶顏色的 border 等於所要求的寬度。偶數尺寸會將垂直的底邊一分為二；奇數總和則會以 floor 和 ceiling 值分割，例如 41px 底邊會分割為 20px 和 21px，這是因為 Chromium 否則可能會將兩條各為 20.5px 的相等 border 量化為各 20px，從而無聲地遺失一像素的繪製幾何。若需要更廣泛的背景資訊，以了解透明 border 在 CSS 中的行為，MDN CSS 背景與 border 指南記錄了相關屬性，而關於元素為何從零尺寸開始的更廣泛說明，則位於 使用 border 建立 CSS 三角形：零尺寸技巧 指南中。
發布三角形之前的無障礙檢查
產生器預覽僅確認視覺幾何；它不會執行無障礙或版面配置行為的測試，因此，無論您選擇哪種無障礙處理方式，都應在您的工作流程中進行簡短的驗證步驟。
| 檢查項目 | 重要性原因 | 您正在測試的內容 |
|---|---|---|
| 200% 瀏覽器縮放 | 在實際版面中測試文字和 CSS 的縮放 | 三角形保持定位且比例正確 |
| 強制色彩模式 | 確認 Windows 高對比的解讀方式 | 三角形在系統色彩下仍保持可見 |
| 淺色與深色主題 | 突顯繼承而來的對比假設 | 裝飾性三角形不會消失或產生衝突 |
| 鍵盤焦點加上螢幕閱讀器 | 確認非裝飾性形狀的標記使用 | 包裹的控制項會朗讀其意義，而裝飾性三角形則保持 aria-hidden |
如果三角形是純裝飾性的，請保持 aria-hidden 屬性不變並執行相同的檢查；您主要是在確認它不會因縮放或主題變更而損壞。如果三角形承載意義，相關的檢查在於：周圍控制項的可存取名稱是否完全涵蓋了三角形在視覺上暗示的角色，使得移除視覺三角形不會改變螢幕閱讀器使用者聽到的內容。Border 三角形既精簡又低成本，但數百個裝飾性元素仍會增加 DOM 和繪製負擔，因此，在設計允許的情況下，應優先選擇一個帶有裝飾性形狀的語意控制項，而非重複的隱藏控制項。
如需更深入的探討，請參閱 CMYK 色碼對照表：查詢 CSS HEX。