我有一個帶有許多標有“購買”按鈕的頁面。我怎樣才能使它們獨一無二？它們不是一種形式。謝謝
uj5u.com熱心網友回復：
有很多方法。希望每個按鈕都有一個唯一的 ID，頁面上包含描述用戶將購買什么的文本的內容也是如此。然后你可以使用 aria-labelledby 屬性：
<button id="unique-thing-to-buy-button" aria-labelledby="unique-thing-to-buy-button unique-thing-to-buy">Buy</button>
請注意，ID 是空格分隔的。這將在螢屏閱讀器中宣布“購買”一詞，然后購買我們正在購買的東西。
如果沒有，您可以創建一個完成相同任務的翻譯字串并使用 aria-label。
<button aria-label="buy unique thing">Buy</button>
理想情況下，您也可以改善視力正常的用戶的體驗。在標題屬性中放置一個類似的字串以在懸停時顯示是一個好的開始。理想情況下，您將使用在焦點上顯示相同字串的小部件來覆寫您的非滑鼠用戶。
uj5u.com熱心網友回復：
此訊息基本上意味著您必須在按鈕的文本中提供更精確的背景關系，因為您至少有兩個具有相同的可訪問文本，并且它們與另一個難以區分。
使用螢屏閱讀器時，根據您的導航方式，您會直接跳轉到給定元素，但會跳過可以為您提供更多背景關系的元素。
例如，在您的情況下，如果我從一個按鈕導航到另一個按鈕，我會從一個“購買”按鈕跳到下一個，而不會被告知我要購買什么，因為資訊不在按鈕本身上但在它旁邊。因此，通過擴展按鈕的文本，絕對需要給我更多的背景關系。有問題的文本不需要在螢屏上可見，因為它是特定的螢屏閱讀器問題。但是，如果文本也可用作工具提示，其他人也可以從中受益。
有幾種方法可以將所需的背景關系添加到您的按鈕。
最簡單的可能是使用螢屏閱讀器特定文本，也稱為視覺隱藏文本，如下所示：
<button>Buy<span class="sr_only"> basic package for 10$</span></button>
<button>Buy<span class="sr_only"> premium package for 20$</span></button>
<button>Buy<span class="sr_only"> full package for 40$</span></button>
其中 .sr_only 是引導程式中的特定類。其他框架也有類似的 CSS 類做同樣的事情。注意間距，以免單詞無用地粘在一起。
您也可以使用 aria-label，如下所示：
<button aria-label="Buy basic package for 10$">Buy</button>
<button aria-label="Buy premium package for 20$">Buy</button>
<button aria-label="Buy full package for 40$">Buy</button>
使用 aria-labelledby 也可以在另一個元素中包含擴展文本。對于 aria-label 和 aria-labelledby，在標簽中，請注意重復按鈕上實際顯示的文本，因為可訪問標簽完全替換了按鈕的自然文本（此處重復“購買”一詞）。
最后一點，就像我在這里所做的那樣，簡短地提醒價格也是一個好習慣。根據您銷售的產品，在購買程序后期（例如結帳前）告訴價格可能被視為一種黑暗模式，對于螢屏閱讀器用戶來說更是如此，因為他們可能會錯過明顯的跡象人們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/454014.html
上一篇：如何使標題僅顯示在一行中？