輪播 (Carousel) 控制按鈕色彩對比度不足、範例圖片來源失效

[IK-Ngoo]

問題：
1. 輪播 (Carousel) 圖片上層疊加按鈕，按鈕與背景色彩對比度因圖片色彩而浮動，色彩對比度容易落到門檻值下（非文字內容對比度至少 3:1）。
2. 範例圖片採用非開發團維護之來源，造成圖片來源有效性無法自行維護。

可能做法：

1. 參考他國輪播 (Carousel) 元件作法，將控制按鈕元件與輪播內容分離，較容易排除相關使用障礙風險。
2. 圖片可改用裝飾性圖示意，自行維護圖片來源或內嵌 SVG。

參考：

1. 日本設計制度
   
2. 義大利設計制度

[IK-Ngoo]

@nonumpa 想問問你想法
感覺如果動到 markup 結構，才能避免按鈕對比度浮動議題，會需要比較仔細整體設計。
範例圖片只是示意用，複用性不高，想說要不要先換示意圖，暫時緩解對比度、圖片來源維護議題。

傾向用 2. inline svg 不需要額外 assets，3. 外部服務一樣會有失效風險。
如果方向 ok，我再確認一下整體呈現出的語意結構再發 PR 出來。

1. img 引入 svg 來源：要加 role="img"，確保舊版 iOS、Safari 相容。

<img src="item-1.svg" alt="系列圖示，共 6 張。" role="img">

2. inline svg：加 accName、aria-labelledby，確保舊版瀏覽器相容。數字讓視覺上感知到輪播切換，數字本身無意義。

<svg  aria-labelledby="item-title-1" role="img">
<title id="item-title-1">一系列範例圖示</title>
<rect />
<text>1</text>
</svg>

3. 外部占位圖服務：如義大利使用 placehold.co

視覺呈現效果：

參考：
https://css-tricks.com/accessible-svgs/
https://www.deque.com/blog/creating-accessible-svgs/

[nonumpa]

好啊，先用 2 解決部分問題
感謝