颜色框（波形工具）的可访问性错误

Question

我们有一个使用 'WCFM - Frontend Manager for WooCommerce' 插件的市场。为了检查可访问性，我在 wave 页面上运行它给了我 3 个错误。(3 x Empty button) 这些错误是以下 3 个按钮此插件使用的颜色框：

<button type="button" id="cboxPrevious"></button>
<button type="button" id="cboxNext"></button>
<button type="button" id="cboxSlideshow"></button>

有什么办法可以解决这个问题吗？找了很久，是几天后必须交付的项目

Answer 1

对于“空”，WAVE 工具意味着您的按钮没有 accessible name。可访问的名称是屏幕 readers 宣布的名称。如果没有可访问的名称，屏幕 reader 只会显示“按钮”，用户将不知道该按钮的用途。

对于 <button> 元素，可访问的名称通常来自按钮中的可见文本。

<button>this is my accessible name</button>

但是，如果按钮没有文本，而是有图像或图标，则该图像或图标将需要替代文本，或者按钮将需要替代标签。所以你可能有这样的东西：

<button>
  <img src='foo.jpg' alt="this is my accessible name">
</button>

<button class='icon' aria-label="this is my accessible name"></button>

Accessibility error with colorbox (wave tool)