實用創作流程
SVG 標誌無障礙：給正確的元素命名
咖啡館的杯子標誌有三種用途：單獨標識店名、裝飾可見品牌文字，或出現在首頁連結裡。每個副本都加同樣的標題，可能只讓介面重複，並不能幫助訪客理解控制元件。
虛構的 Cedar Cup 示例在三種真實 HTML 情境中使用同一路徑。Ciyo 建立標記並渲染頁面，我們再獨立開啟保留檔案，核對瀏覽器暴露的圖片與連結名稱。這是針對命名的示例，不是螢幕閱讀器認證。
先判斷標誌在當前情境中的作用
從所在頁面開始判斷，而不是隻看 SVG。標誌是不是唯一的品牌標識？可見文字是否已經說出店名？整個區域是否是連結？這些答案決定哪個元素應承載資訊。
我們準備一個 viewBox 為 0 0 120 100、填色為 #7A4A2A 的杯子路徑。三個示例都保留該幾何，只調整名稱、隱藏裝飾內容和連結文字，沒有改變品牌繪圖。
保持現有 SVG 路徑不變。製作真實 HTML，展示名為 Cedar Cup 的獨立資訊標誌、可見 Cedar Cup 文字旁的裝飾副本，以及名為 Cedar Cup home、含裝飾圖示的首頁連結。使用合適的 title、role 與 ARIA 標記。渲染並檢查頁面，核對暴露名稱和鍵盤焦點，回傳準確的 HTML。給獨立的資訊標誌命名
獨立示例使用 role="img"，透過 aria-labelledby 引用第一個子元素 title。標題為 Cedar Cup，瀏覽器暴露一張同名圖片，表達品牌身份而不必描述杯子的裝飾幾何。
為每個相關內聯例項使用唯一的 title ID。元件在頁面重複時若複製相同 ID，名稱可能引用錯誤元素。保留的示例只含一個資訊副本，並指定明確 ID。
隱藏重複的裝飾副本
可見文字已經寫著 Cedar Cup 時，旁邊的杯子在本例中屬於重複資訊，使用 aria-hidden="true" 和 focusable="false"。品牌身份由文字提供，圖形仍可見。
不要把這種處理應用於提供額外必要資訊的標誌。不能因為它看起來像裝飾例子，就隱藏讀者仍然需要的資訊。
| 情境 | 名稱來源 | SVG 處理 |
|---|---|---|
| 獨立標誌 | 引用的標題：Cedar Cup | role="img" |
| 品牌文字旁的標誌 | 可見 Cedar Cup 文字 | aria-hidden="true" |
| 首頁連結 | 可見 Cedar Cup home 文字 | 連結內裝飾 SVG |
為首頁連結提供有意義的名稱
連結的可見文字是 Cedar Cup home。其中 SVG 為裝飾，因此控制元件名稱來自文字。示例連結到本地 #home，真實網站應使用實際首頁地址。
我們在獨立開啟的示例裡按 Tab，焦點落在首頁連結上，瀏覽器暴露的名稱為 Cedar Cup home。裝飾 SVG 沒有再增加圖片條目，這是這份頁面中可觀察的有限結果。
檢查實際發布頁面的名稱
開啟儲存的 HTML，檢查無障礙樹、鍵盤順序與可見標籤。插入實際頁頭後還要檢查：外層按鈕、重複品牌文字或其他連結，都可能改變使用者遇到的內容。
SVG title 不能代替有意義的控制元件文字。功能元素應明確表達用途。情境不同，就選擇同樣清楚的可見標籤，或經過仔細核對的可訪問名稱，不要脫離上下文照抄。
在交付中說明使用情境
把原始 SVG、三情境示例和說明交給開發者，指出哪個例項應傳達資訊，哪個應當裝飾。要求在最終頁面及適合受眾的輔助技術中檢查。
顏色和名稱應分別核對。名稱正確的標誌仍可能消失在深色背景裡；清晰可見的標誌也可能有無用的連結名稱。
實用問答
每個 SVG 標誌都應有 title 嗎？
按情境選擇。本例為獨立品牌標識加標題，並隱藏冗餘的裝飾副本。
SVG title 足以為連結命名嗎？
應明確命名功能元素。本例以可見 Cedar Cup home 文字作為連結名稱。
測試了所有螢幕閱讀器嗎？
沒有。我們核對了瀏覽器暴露的名稱和鍵盤焦點；最終介面還應使用合適的輔助技術檢查。
在真實使用情境中檢查一個標誌
讓 Ciyo 製作資訊、裝飾與連結示例，再把適合的標記用於經過檢查的網站實現。