TYPO3菜單無障礙

Question

我正在開發一個新的 TYPO3 網站，並盡量做到無障礙。 使用測試工具 (wave) 檢查站點時，我被告知菜單項中有冗余文本。 它說：“標題屬性文本與文本或替代文本相同”。 生成的代碼 (boostrap_package) 如下所示： <a href="/fach" id="nav-item-18" class="nav-link dropdown-toggle" title="Fach" aria-haspopup="true" aria-expanded="false"><span class="nav-link-text">Fach</span></a>

我不知道如何改變這個。 有人能幫我嗎？

Answer 1

WAVE 工具報告“錯誤”（帶有白色 X 的紅色方塊， ) 和“警報”（帶有白色感嘆號的黃色三角形， ）， 除其他事項外。

應檢查 WAVE 的所有結果的准確性，但一般來說，“錯誤”通常需要修復（大多數情況下它們是WCAG失敗），但“警報”可能是“最佳實踐”，不一定是 WCAG 失敗。

在這種情況下，具有與title屬性匹配的文本的鏈接很可能會導致屏幕閱讀器讀出該文本兩次，因此它被標記為“警報”（ ). 兩次聽到文本並不好，但也不是失敗。

<a href="#" title="foo">foo</a>

屏幕閱讀器等輔助技術將宣布“可訪問名稱”和可選的“ 可訪問描述”。 描述通常使用默認屏幕閱讀器設置公布，但用戶可以將其關閉。

“可訪問名稱”將來自鏈接內的文本，在我的示例中為“foo”，在您的示例中為“Fach”。 “可訪問的描述”將來自title屬性。

您可以在可訪問名稱和描述計算 1.1中看到用於計算可訪問名稱和描述的各種屬性的列表。

在這種情況下，“可訪問名稱”來自步驟 2F，“名稱來自內容”，“可訪問描述”來自步驟 2I（眼睛），“工具提示屬性”。

屏幕閱讀器通常會宣布元素的“可訪問名稱”、元素的類型或角色，在本例中為“鏈接”，然后是“可訪問描述”。 所以你會聽到"foo, link, foo"或"Fach, link, Fach" 。

WAVE 只是讓您知道，將文本聽兩次可能聽起來有點冗長和多余。 您不必修復它，但值得考慮。 有視力的用戶將看到鏈接的文本，如果他們將鼠標 hover 懸停在鏈接上，他們將在工具提示中看到相同的文本。 它並沒有真正為用戶提供比他們已經擁有的更多信息，因此工具提示有點無用。