如何在 <button> 元素中放置文本内容或为 <input> 元素赋予 value 属性

Question

在 wordpress 网站上的 wcag 可访问性问题上，我需要您的帮助，使用 wave 检查网站会返回两个基本错误“按钮为空或没有值文本”。对于两个切换菜单，wave 修复错误的建议是“在元素中放置文本内容或给元素一个值属性。”

但我不知道如何解决这个问题，我的切换按钮的代码是：

<button class="btn-close-form" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false"> <span></span> </button>

因此，如果有人知道如何将文本或替代文本分配给切换按钮以解决此问题，那就太好了。

感谢大家的宝贵时间！！！

Answer 1

1 - 您可以在其中添加文本并将其隐藏在 CSS 中。 WordPress为此提供了特殊的class - screen-reader-text

// CSS

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

// button
<button class="btn-close-form" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false"> 
<span></span>
<span class="screen-reader-text">Show search modal</span> 
</button>

这个类在视觉上对用户隐藏元素，但可以用屏幕阅读器阅读。该元素在聚焦时可见

2 - 添加aria-label 或aria-labelledby 属性

<button class="btn-close-form" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false" aria-label="Show search modal"> 
<span></span>
</button>

// or
<span id="show-modal-label">Show search modal</span>

<button class="btn-close-form" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false" aria-labelledby="show-modal-label"> 
<span></span>
</button>