标签: wai-aria

本着渐进式增强的精神,我想做一些ARIA功能测试,以便在浏览器支持的情况下实现其他增强功能.我不打算检测屏幕阅读器 - 我希望确保屏幕阅读器用户在他们使用的工具的情况下获得最佳体验.

例如,如果aria-live不支持该属性,则实现无限滚动可能不是一个好主意.

我知道还有一个问题,浏览器可能支持这些属性,但屏幕阅读器可能不支持.由于屏幕阅读器在浏览器上透明地运行,我可以忽略该边缘情况.

我从来没有听说有人这样做过.它是否像测试浏览器赋予的其他DOM属性一样简单？Mark Pilgrim的其他功能测试技术之一在这里工作吗？

谢谢!

在我正在进行的网站中,我有一个section元素,其类型设置为" main".根据WAI-ARIA,section元素可以main用作roleattribute(role="main").

但是,当我通过W3C验证器运行我的网站时,我得到一个"元素部分属性角色的主要值不正确".错误.我main以前在另一个网站上使用过该值,它确实通过了验证,但现在它已经不再有效,报告了同样的错误.

最近是否更改了HTML5规范并取出了该main值？我应该相信WAI-ARIA还是W3C验证器？WAI-ARIA页面是否已过期？我应该保持section元素没有任何角色属性(将恢复为"区域"默认值)？

任何有关这方面的想法和提示将不胜感激:)

我正在寻找一种让Ext JS Combobox组件与IE/JAWS兼容的方法.目前我们正在使用以下标记:

<div role="presentation" id="combobox-1011">
    <label id="combobox-1011-labelEl" for="combobox-1011-inputEl">
        <span>Choose:</span>
    </label>
    <div id="combobox-1011-bodyEl" role="presentation">
        <!-- This wraps both input and triggers -->
        <div id="combobox-1011-triggerWrap" role="presentation">
            <div id="combobox-1011-inputWrap" role="presentation">
                <input id="combobox-1011-inputEl" type="text" name="choose"
                    role="combobox" aria-readonly="false"
                    aria-haspopup="true" aria-expanded="true"
                    aria-autocomplete="none" aria-owns="boundlist-1014-listEl"/>
            </div>
            <!-- Trigger element styled to look like a button -->
            <div id="combobox-1011-trigger-picker"></div>
        </div>
        <!-- This is used to announce input validation errors -->
        <div id="combobox-1011-ariaErrorEl" role="alert" aria-live="polite"></div>
    </div>
</div>
<div id="boundlist-1014">
    <div id="boundlist-1014-listWrap">
        <ul id="boundlist-1014-listEl" role="listbox" aria-hidden="false">
            <li role="option" tabindex="-1" aria-selected="true" …

介绍

我知道,角色属性是由W3C在WAI-ARIA 1.0中引入的,然后在HTML5中进行了调整.

当HTML5是新的并且许多浏览器没有实现本机元素时,人们建议使用角色属性来支持它们<nav role="nav">…</nav>,但他们也提到这将很快变得不必要.

但目前,有不同的意见:

引导

一个引导成员在GitHub上声明WAI-ARIA规则比当前的HTML5规范"更重要".此外,其他第三方网站(如TutorialsPoint或W3Schools)也建议添加该属性以授予完全可访问性.

W3C

另一方面,当您输入带有role属性的可疑表单标记时,W3C-Validator会发出以下警告.

<form role="form"></form>

元素表单不需要角色属性.

这显然不包括角色属性.

最后

是否已经花时间忽略备份本机HTML5标签(和表单),或者是否仍然需要保证完全可访问的网站(例如残障人士/有屏幕阅读器的人)？是否有某种"官方声明"或指南(最新的)？

是否可以使用iPhone上的VoiceOver在标签上发布更新文本？

这类似于ARIA中的活动区域.

谢谢.

是否可以用aria-hidden="true"和嵌套元素aria-hidden="false"？

例如:

<div aria-hidden="true">  
    some hidden content  
    <div aria-hidden="false">  
        some visible content
    </div>  
</div>

这对我来说似乎不起作用.我使用NVDA及其功能对其进行了测试,以显示页面上的完整链接列表.如果我将咏叹调隐藏在身体上,即使我开始在某些子元素上将咏叹调隐藏为假,我也无法获得任何链接.目前看起来我无法覆盖子元素中的aria隐藏状态.

我知道这可能是一种非常不寻常的方法,但问题本身也很不寻常.一个巨大的灯箱,其中包含一个完整的站点(没有简单的模态对话框).

我想使用当前的Web组件规范实现一个列表框小部件.此外,生成的列表框应符合ARIA标准.实例化列表框小部件应该如下所示:

<x-listbox>
    <x-option>Option 1</x-option>
    <x-option>Option 2</x-option>
</x-listbox>

出于清洁和封装的目的,其他所有内容都应该以阴影dom呈现.为了实现这个小部件,两个自定义元素,<x-listbox>并<x-option>进行登记.影子dom的顶级元素<x-listbox>是一个<div>带有可访问性role=listbox和aria-activedescendent属性的<x-listbox>元素(我不希望元素上有这些属性,因为它们是实现细节.)

为了aria-activedescendent工作,需要选项元素的ID.将id直接放在<x-option>元素上将不会有两个原因:首先,它会污染使用列表框小部件的文档的id命名空间.其次,更重要的是,id不能跨越阴影边界(这是阴影dom的一个目的),因此选项的id必须<div>与aria-activedescendent属性一样生成在相同的阴影dom中.

对此的解决方案是将每个<x-option>被渲染为阴影dom内部的内容<x-listbox>与另一个<div>(属于该阴影dom),其上可以放置id.

我的问题是:这是正确的方法,如何使用自定义元素和阴影dom web apis实现这一点？

我想让我的HTML页面适合屏幕阅读器.

目前,该页面有3个主要部分:标题,侧边栏和内容:

屏幕阅读器首先读取标题,然后是侧边栏,最后是搜索结果.

不幸的是,具有视力问题的用户会等待很长时间,而程序会读取所有侧栏内容(导致侧栏包含许多过滤器).如何为搜索结果设置更高的优先级？原因应在侧边栏内容之前阅读搜索结果.

如果有人向我提供HTML教程,告诉我如何提高HTML页面的可访问性级别,那将会很棒:

• 如何更改屏幕阅读器跳过的某些DIV元素？
• 如何更改阅读页面内容的顺序？
• 如何才能使可读的搜索表单和搜索结果(以及一些链接)？

我一直在阅读可访问性和概念,我无法找到关于偶然发现的准确信息:HTML可标记元素.

我理解,labelable元素背后的概念是一个可以正确包装或引用的元素<label>,例如:

<label>
    Enter some data
    <input type="text"/>
</label>

或者例如:

<label for="anInputField">
    Enter some data
</label>

<input type="text" id="anInputField"/>

有没有人确切知道什么是可绑定的HTML元素,哪些不是？

奖金回合! 你能详细说明为什么ARIA使用的第五条规则是一项正在进行的工作吗？在我自己的网站,我希望能够考虑对将来的变化,但我不知道为什么它不是一成不变的(好像它应该是).

我正试图通过Google Chrome扩展程序控制Netflix的播放器.这是控制栏的图像,适用于那些不熟悉它的人.

我设法模拟点击播放/暂停,下一集并使用以下代码切换全屏按钮(橙色正方形):

$(".[control class]").click();

但是同样的逻辑似乎并不适用于控制当前视频部分(蓝色矩形内部)的滑块.

我想要做的是改变视频的当前位置(例如,返回10秒).这是我到目前为止所尝试的:

更改aria-valuenow section role="slider":

$(".player-slider")["aria-valuenow"] = 0;

检索红色圆圈,更改它的位置并单击它:

$(".player-scrubber-target")["style"] = "width: 30%";
$(".player-scrubber-target").click();

(绝望)更改宽度和/或点击该部分内的每个栏:

.player-scrubber-progress-buffered (change width and click)
.player-scrubber-progress-completed (change width and click)
.player-scrubber-progress (click)
#scrubber-component (click)

@编辑

非常感谢Kodos Johnson指出了这个问题,并向kb0提供了原始代码,通过一些研究,我可以从Chrome开发者工具控制台更改音量和播放器位置.这是代码(更改所需音量0~99的[VOLUME]和所需位置的[POSITION]):

// Change volume
netflix.cadmium.UiEvents.events.resize[0].scope.events.dragend[0].handler(null, {pointerEventData: {drag: {current: {value: [VOLUME]}}}});
// Change player position
netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[1].handler(null, {value: [POSITION], pointerEventData: {playing: false}});

不幸的是,这似乎不适用于Chrome开发者工具.当我从我的扩展程序运行代码片段时,我得到了这个:

Uncaught ReferenceError: netflix is not defined at <anonymous>:1:1

这是我从我的扩展程序运行脚本的方式:

chrome.tabs.getSelected(null, function(tab){
    chrome.tabs.executeScript(tab.id, {code: [SNIPPET]}, …