标签: wai-aria

最近我一直在将ARIA实现到Web应用程序中,我发现这个问题在改进导航部分方面非常有用.

在所有模块中实现此功能后,我发现了此HTML验证错误:

此时aria-selected元素a上不允许属性.

看看ARIA规范,我看到它aria-selected仅用于角色gridcell,选项,行和制表符.就我而言,链接的作用是menuitem.

这是HTML代码的代表性示例:

<nav role=navigation>
    <ul role=menubar>
        <li role=presentation><a href='page1.php' role=menuitem>Page 1</a></li>
        <li role=presentation><a href='page2.php' role=menuitem>Page 2</a></li>
        <li role=presentation><a href='page3.php' role=menuitem aria-selected=true>Page 3</a></li>
        <li role=presentation><a href='page4.php' role=menuitem>Page 4</a></li>
    </ul>
</nav>

如您所见,这是在"第3页"上进行的.

在这里使用的ARIA角色是什么？

我是ARIA角色的新手.如果我有工具提示类型功能,即如果有人单击问号按钮,则会显示更多文本,详细说明如何填写表单字段,我应该使用aria-expanded属性,aria-hidden属性还是两者？

<div class="login-form-field tt-highlight">
    <div class="error-message error-style">
        <p>Sorry you have not entered anything in the field above.</p>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10"> 
        <label for="inputTxtCustomerPostcode" class="login" />Postcode:</label>
        <input id="inputTxtCustomerPostcode" type="text" />
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
        <a title="Please enter a valid case reference tooltip" class="login-tooltip" data-toggle="collapse" data-parent="#accordion" href="#collapseTxtCustomerPostcode" role="button" aria-pressed="false"></a>
    </div>

    <div id="collapseTxtCustomerPostcode" class="panel-collapse collapse" role="tree tooltip">
        <div class="panel-body" role="treeitem" aria-expanded="false" aria-hidden="true">
            <p>some text goes here for the tooltip</p>
        </div>
    </div>
</div>

我有一个简单的webapp和一堆食谱,我试图让那些使用屏幕阅读器的人可以访问它.

烹饪温度通常简单地表示为C(摄氏度)和F(华氏温度).

屏幕阅读器将这些视为字母,我认为这有点令人困惑,因为我们正在谈论温度.

我的目标是维持这样一句话:

<p> Turn the oven on to 350 F </p> .

不幸的是,屏幕阅读器将其读作:

"Turn the oven on to three hundred and fifty f" .

我希望屏幕阅读器像这样发音:

"Turn the oven on to 350 degrees Fahrenheit"

是否有可能以某种方式明确指示屏幕阅读器如何阅读特定的字母或单词？是否可以使用ARIA表示法实现,或者我是否只有一个黑客,我有一个看不见的句子:

<p> Turn the oven on to 350 degrees Fahrenheit </p>

我正在网站上进行一些代码清理/验证，但遇到了问题。该站点有一个主菜单（菜单），应在其中显示当前页面。

菜单结构如下：

<nav role="navigation">
    <ul role="menubar">
        <li role="menuitem" aria-selected="true">
            <a href="currentpage">Current page</a>
        </li>
        <li role="menuitem">
            <a href="anotherpage">Another page</a>
        </li>
    </ul>
</nav>

根据WAI-ARIA规范，角色选单项上不允许使用aria-selected状态：http : //www.w3.org/TR/wai-aria/states_and_properties#aria-selected。我也找不到菜单项的任何状态，这些状态似乎将菜单项标记为已选中：http : //www.w3.org/TR/wai-aria/roles#menuitem。

菜单栏中所选菜单项/页面的正确实现是什么？

更新：

我找到了一个答案，建议将锚点留在菜单的当前页面上，但不确定是否能满足我的需求。

<li role="menuitem">Current page</li>

我有一个选项列表,可以从中选择一个.出于所有意图和目的,HTML的<select>元素涵盖了这一点.由于我们需要不同的视觉呈现,我正在考虑使用WAI ARIA role ="listbox".我不清楚如何使用aria-activedescendant,aria-selected和aria-checked.

关于焦点/活动状态的问题:

• 如果我aria-activedescendant在列表框上使用指向[role="option"]当前处于活动状态(具有"虚拟焦点"),我会使用[aria-selected].我怎么能告诉选项元素本身它是活动的(具有"虚拟焦点")来直观地表示它？(:focus毕竟是在列表框上)
• 一个[role="option"]可以拥有[aria-checked]和[aria-selected].我想我需要[aria-selected]但却看不到我用[aria-checked]的东西.
• 是否有一个技巧,以避免必须在每个选项上放置ID,以便它可以被引用aria-activedescendant？

有关键盘交互的问题:

• "复选框 - 空格切换复选框,如果列表项是可检查的" - 我如何确定它们是否可检查或可选择？

有关验证的问题:

如果列表框具有[aria-required="true"]某种必须执行的验证.特别是如果选择(或选中)了一个选项.

• 我何时触发验证？是blur足够了吗？
• 如果无效,除了[aria-invalid="true"]在列表框上设置外,我还需要做什么？

我在表单上有一个蜜罐输入字段，以防止机器人提交它，并且以绝对位置隐藏。我希望诸如屏幕阅读器之类的辅助技术可以忽略蜜罐领域，因此我向其添加了aria-hidden =“ true”。

将aria-hidden =“ true”属性添加到我的蜜罐字段中是否会阻止机器人填充它，就像添加“ display：none”属性一样？还是他们仍然会掉入陷阱并填满田野？

我正在使用斧头Chrome扩展程序检查辅助功能,我收到了违规的单选按钮和复选框.查看W3C文档中的"aria-required",你可以在这里找到它:W3C on aria-required,既没有为使用的角色列出输入.

根据这个问题:HTML5:如何将"required"属性与"radio"输入字段一起使用,您只需要在需要时标记一个单选按钮.但是,我试图使用旧版浏览器的咏叹调并且我得到违规元素必须只使用允许的ARIA属性,说我的任何输入类型无线电或带有咏叹调要求的复选框都不允许使用 "咏叹调".

这与工具是否存在差异,HTML5所需的工作是否略有不同,或者无线电或复选框上实际上不允许使用咏叹调？

我遇到了一系列疯狂的错误.我正在使用Bootstrap代码并且没有编辑它.那为什么会出现错误呢？

link具有sizes属性的元素必须具有rel包含值icon或值的属性apple-touch-icon.

...

元素banner属性的值不正确.rolenav

要查看同样的内容,请访问 https://validator.w3.org/nu并输入:www.iqtests4kids.com/

遇到angular-aria模块时，我一直在组件模板中手动包括ARIA属性：https : //docs.angularjs.org/api/ngAria

但是，这是针对AngularJS的。Angular 2和4是否有任何等效的模块在运行时以静默方式将aria属性注入组件？

我看了这个问题：如何在Angular 2应用程序中包含ngAria？但它似乎没有答案。

I have a star rating component that currently has the following semantic. The SVG are just stars.

<div role='img' aria-label="6 out of 6 ratings">
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
</div>

I have used the role='img' aria role as I want to ideal treat this image as one image. I have then used the role='presentation' aria role on the SVG as I think the SVG's alone provide no extra information so want to remove …