Question

我正在尝试创建一个带有人字形的按钮，如下所示：

<button
  id='nextButton' 
  disabled={someCondition}
  onClick={() => {handlePageNumberChange(pageNumber + 1);}}
  className='fs-next btn btn-default'
>
  <span className='glyphicon glyphicon-chevron-right'/>
</button>

用户界面上的一切都很好。

但是在运行辅助功能测试时出现错误。

错误：

错误：下列元素（1-2/2）上的AX_TEXT_01（控件和媒体元素应带有标签）失败： #nextButton #nextButton 有关更多信息，请参见https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_text_01。

Answer 1

您必须确保按钮具有标签和属性aria-labelledby，该属性指示标签是哪个元素。

您可以将span用作button的标签：

<button
  id='nextButton' 
  disabled={someCondition}
  onClick={() => {handlePageNumberChange(pageNumber + 1);}}
  className='fs-next btn btn-default'
  aria-labelledby="next_label"
>
  <span
    id="next_label"
    className='glyphicon glyphicon-chevron-right'
  />
</button>

可访问性错误：控件和媒体元素应具有标签

1 个答案: