标签: wai-aria

有没有一种方法可以指示(出于辅助目的)页面上的哪个导航菜单是主要导航？

<nav role="navigation" id="primaryNavMenu">
    <ul> ... </ul>
</nav>

<nav role="navigation" id="secondaryNavMenu">
    <ul> ... </ul>
</nav>

能做这样的事情会很好:

<nav role="navigation primary" id="primaryNavMenu">
    <ul> ... </ul>
</nav>

但我在ARIA文件中看不到任何此类规定.

对于辅助功能,我尝试在打开后将焦点发送到Fancybox窗口.

我在Fancybox的容器上将tabindex添加到0,然后将焦点发送到它.这不起作用.

afterLoad: function() {
    this.group[this.index].content.attr('tabindex','0');
    this.group[this.index].content.focus();
}

我使用NVDA(NonVisual Desktop Access)http://www.nvaccess.org/进行测试,但Chrome也可以显示焦点.

谢谢你的帮助.

在我的一个项目中,如果我可以在页面页脚之前放置主导航菜单(包括ARIA角色)的HTML标记,那么我的生活会更容易.

这会对屏幕阅读器等的可访问性产生负面影响吗？或者,只要使用正确的元素,源订单实际上是否重要？

W3C将WAI-ARIA角色分为四组:

• 抽象角色
• 小部件角色
• 文档结构角色
• 地标角色

有人可以解释抽象角色类别吗？

使用jQuery构建树状菜单,我希望它可以访问,所以我使用的是aria属性.我想要做的是在点击/输入时将"aria-expanded"属性从true切换为false.我试过这个,但显然不正确:

$(this).closest('ul').find('> li.tree-parent').toggleAttr( 'aria-expanded', 'true false' );

如果 JAWS 在我的页面中遇到这样的时间：

<div>
  <span>20:15</span> <!-- either of these times -->
  <span>04:15</span> <!-- either of these times -->
</div>

然后它将它们读作“二十冒号十五”，这听起来不像是时间。有什么方法可以指定这是一个时间吗？

也许将普通用户阅读但看不到的文本作为“二十冒号十五点钟”或其他可能是可行的答案。

我有这条用JS动态更新的HTML.屏幕阅读器仅在更新时读取新值.它没有说更新的输入标签.

<ul class="points-transfer-detail-points-calculation clearfix">
    <li>
        <label for="points-to-transfer">{{{ pointsToTransferLabel }}}</label>
        <input id="points-to-transfer" type="text" aria-controls="brand-points points-left-after-transfer" placeholder="XXX,XXX" {{#if disabled }}disabled{{/if}}>
        <p id="points-to-transfer-error" class="points-transfer-detail-form-error" aria-hidden="true" role="alert">{{{ pointsToTransferErrorMessage }}}</p>
    </li>
    <li>
        <label for="brand-points">{{{ brandPointsLabel }}}</label>
        <input id="brand-points" type="text" aria-live="polite" aria-atomic="true" disabled>
    </li>
    <li>
        <label for="points-left-after-transfer">{{{ pointsLeftLabel }}}</label>
        <input id="points-left-after-transfer" type="text" aria-live="polite" aria-atomic="true" disabled>
    </li>
</ul>

我曾尝试使用aria-labelledby,aria-describedby,role="alert"和aria-label,但没有结果,只有输入的值,永不他的标签.

从我对Google和StackOverflow的所有研究中,我找不到合适的答案.

我在Firefox中使用NVDA作为屏幕阅读器.

谢谢您的帮助.

就个人而言,我认为删除元素可能更适合网站维护,但为了可访问性,它是否可以保存？

样本会是

      <input type="radio" value="single" name="userGroup" id="single" required />
      <label for="single">Single</label>

      <input type="radio" value="families" class="form-checkbox" name="userGroup" id="families" required />
      <label for="families" >Families</label>

其余的表单字段将根据userGroup的不同而不同

当用户在单个和家庭之间切换时,家庭组将在单个表单字段之上添加额外字段,如"帐单支付"部分(合并与否)和"您希望如何共享数据计划"(限制使用与否)

作为一种形式,像"账单支付"这样的元素应该是咏叹调隐藏真实还是从DOM中移除？

如果aria标签的内容发生更改，是否可以使屏幕阅读器重新读取select元素？

我做了一个简单的代码段，我知道我没有遵循大多数咏叹调惯例，以表明我的意思。

如果打开屏幕阅读器并单击div，它将读取标签“ unchecked”（如果未按下），标签将更新，但屏幕阅读器将保持沉默。尽管单击并再次打开它会读取新标签。

这是使屏幕阅读器读取更新的正确方法，还是我不知道的另一种方法？

let toggleSwitch = document.querySelector('.toggle-switch');

toggleSwitch.addEventListener("keyup", function(e) {
  let code = (e.keyCode ? e.keyCode : e.which);
  
  if (code == 32) {
    let nextState = toggleSwitch.getAttribute('aria-label') == 'unchecked' ? 'checked' : 'unchecked';
    
    toggleSwitch.setAttribute('aria-label', nextState);
    
  }
})

.toggle-switch {
  width: 50px;
  height: 50px;
}

.toggle-switch[aria-label="unchecked"] {
  background: red;
}

.toggle-switch[aria-label="checked"] {
  background: green;
}

Press space to change state
<div class="toggle-switch" tabindex="0" aria-label="unchecked"></div>

谢谢你的帮助。

我正在此页面上使用 Lighthouse 运行测试。

当谈到辅助功能时，它不断给我这个错误：

[aria-*] 属性没有有效值。
辅助技术（如屏幕阅读器）无法解释具有无效值的 ARIA 属性。

导致该错误的代码是：

<button role="tab" aria-selected="true" aria-controls="v-pills-home" id="v-pills-home-tab" class="nav-link active" data-toggle="pill" href="#v-pills-login"><img src="./images/come-funziona/iconLogin.png" width="60" alt="login"> Login</button>

<button role="tab" aria-selected="false" aria-controls="v-pills-profile" id="v-pills-profile-tab" class="nav-link" data-toggle="pill" href="#v-pills-localizzazione"><img src="./images/come-funziona/iconLocalizzazione.png" width="60" alt="localizzazione mezzi"> Localizzazione</button>

<button role="tab" aria-selected="false" aria-controls="v-pills-messages" id="v-pills-messages-tab" class="nav-link" data-toggle="pill" href="#v-pills-badge"><img src="./images/come-funziona/iconBadgeRFID.png" width="60" alt="badge rfid"> Badge</button>

<button role="tab" aria-selected="false" aria-controls="v-pills-settings" id="v-pills-settings-tab" class="nav-link" data-toggle="pill" href="#v-pills-manutenzione"><img src="./images/come-funziona/iconManutenzione.png" width="60" alt="manutenzione mezzi"> Manutenzione</button>

<button role="tab" aria-selected="false" aria-controls="v-pills-reports" id="v-pills-report-tab" class="nav-link" data-toggle="pill" href="#v-pills-report"><img src="./images/come-funziona/iconReport.png" width="60" alt="report attività mezzi"> Report</button>

我该如何解决？