网站ARIA可访问性问题求助：4类违规问题需修复

1. 元素只能使用允许的ARIA属性 #

• 问题：带有role="presentation"的<li>元素使用了不被允许的aria-selected="false"属性，presentation角色的作用是移除元素默认语义，不支持aria-selected属性。
• 修复方法：直接删除<li>上的aria-selected="false"属性。
• 修复后代码：

<li aria-hidden="false" role="presentation" aria-controls="navigation01" id="slick-slide01" class="slick-active">
  <button type="button" data-role="none" role="button" tabindex="0">2</button>
</li>

2. 设置aria-hidden="true"的元素不能包含可聚焦元素 #

• 问题：标记了aria-hidden="true"的<li>内部包含可聚焦的<button>元素，会导致屏幕阅读器用户无法正确识别内容，甚至可能聚焦到不可见元素上。
• 修复方法：给内部的<button>添加tabindex="-1"使其无法通过键盘聚焦；或者给按钮也设置aria-hidden="true"；若该元素完全无需用户访问，也可直接移除按钮。
• 修复后代码示例：

<li class="" aria-hidden="true" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00">
  <button type="button" data-role="none" role="button" tabindex="-1">1</button>
</li>

3. ARIA列表框元素必须有可访问名称 #

• 问题：带有role="listbox"的<div>元素缺少无障碍名称，屏幕阅读器用户无法得知该元素的用途。
• 修复方法：添加aria-label属性直接描述元素用途；若页面有对应标题元素，也可使用aria-labelledby关联标题ID。
• 修复后代码示例：

<div class="slick-track" style="opacity: 1; width: 1715px; transform: translate3d(-686px, 0px, 0px);" role="listbox" aria-label="轮播图内容列表">

4. 特定ARIA角色必须包含指定子角色 #

• 问题：带有role="tablist"的<ul>元素缺少必填的子角色tab，tablist作为标签栏容器，要求子元素具备tab角色标记可切换的标签项。
• 修复方法：将内部<button>元素的role属性改为tab（标签项通常用按钮实现）。
• 修复后代码示例：

<ul class="slick-dots" style="" role="tablist">
  <li ...>
    <button type="button" role="tab" tabindex="0">1</button>
  </li>
  <!-- 其他标签项同理修改 -->
</ul>

内容的提问来源于stack exchange，提问作者Josh Meyer