当使用HTML5属性来标记具有必填字段的表单时,Firefox中的JAWS 14(以及可能的其他人)在用户第一次关注它们时(即用户第一次遇到该字段时)将空字段宣布为"无效条目".

<input type="text" required value="">

使用aria-required="true"避免讨厌的消息(并且JAWS仍然通知用户该字段是必需的),但是您丢失了HTML5表单验证功能(阻止表单提交,浏览器生成的工具提示以指导用户等).

1. 你怎么能绕过"无效录入"公告？
2. 为什么JAWS会这样做？
   如果用户跳过它(将其留空,因此无效),我会理解将字段描述为"无效",然后再次关注它.当前的实现令人困惑,因为用户被告知他们在他们甚至不知道存在的字段中输入了错误.

我已经读过aria-invalid用JavaScript设置愚弄JAWS的黑客攻击,但我真的想避免focus在有很多输入的页面上的每个字段上观察用户交互(事件等).目前我使用<label>Label text <span style="display:none;">required field</span></label>但这是一个非常hacky,非语义的解决方案(更不用说我失去了HTML5的好处required).

请考虑以下标记.

<label for="i1" class="inforLabel">This is a label</label>
<input id="i1" type="text" class="inforTextbox" aria-label="Title, not label" />

对我来说,这个标记是在我的自定义工具提示控件之后生成的.我在IE上看到JAWS的问题是它只读取"标题,而不是标签",但是对于其他屏幕阅读器,例如,标签和文本框上的语音都aria-label被读取.我认为它应该同时阅读.

这是一个设置还是一个错误？或者还有别人可以推荐的东西吗？

我正在为盲人和视障人士创建一个阅读服务网站,我正在使用JavaScript(使用jQuery)在页面加载后将一些内容打印到某些页面.

屏幕阅读器是否会在页面加载后读取使用jquery打印到页面的内容？

从这个页面 - "通常,[屏幕阅读器]访问DOM(文档对象模型),他们使用浏览器API(应用程序编程接口)来获取他们需要的信息."

我们知道jQuery是一个DOM操作库.

所以问题变成..屏幕阅读器是否会获取整个DOM的副本,然后解析并阅读它？或者他们是否读取了与jQuery相同的DOM？

这是我使用JavaScript的其中一个页面的示例.它使用一种功能来确定我们在空中播放的节目,然后打印节目的名称和听取它的链接.

<div id="now-playing-div"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector);
});

</script>

正如您所看到的,如果屏幕阅读器没有读取javascript/jquery打印到#now-playing-div的内容,那么它将不会读取任何内容.然后,我们开始收到一些混乱的听众的电子邮件,想知道正在播放链接发生了什么.

所以今天早上我添加了这个:

<div id='no-js'>Please enable JavaScript to receive this content.</div>

<script>
$( document ).ready( function() {
  $('#no-js').toggle();
});

</script>

但如果问题不在于需要启用JavaScript(最近的一项调查显示 99%的屏幕阅读器用户启用了JavaScript),那么问题就无法解决,甚至更糟,因为现在屏幕阅读器用户会认为JavaScript未启用.

该怎么办？？

我在同一个表单示例中看到了2种不同的方法

在http://www.alistapart.com/articles/prettyaccessibleforms/为什么他们正在使用2方法首先fieldset他们保持input后label,并在第二fieldset他们保持input后label.为什么？

<fieldset>
  <legend>Delivery Details</legend>
  <ol>
    <li>
      <label for="name">Name<em>*</em></label>
      <input id="name" />
    </li>
    <li>
      <label for="address1">Address<em>*</em></label>
      <input id="address1" />
    </li>
    <li>
      <label for="address2">Address 2</label>
      <input id="address2" />
    </li>
    <li>
      <label for="town-city">Town/City</label>
      <input id="town-city" />
    </li>
    <li>
      <label for="county">County<em>*</em></label>
      <input id="county" />
    </li>
    <li>
      <label for="postcode">Postcode<em>*</em></label>
      <input id="postcode" />
    </li>
    <li>
      <fieldset>
        <legend>Is this address also your invoice »
address?<em>*</em></legend>
        <label><input type="radio" »
name="invoice-address" /> Yes</label>
        <label><input …

我正在创建一个具有多个输入的表单,我需要在输入本身内提供一些表单元素,我就是这样使用的

一个例子

<form class="TTWForm">
<input type="email" name="email" required="required" placeholder="Email Address">     
</form>

以上代码在HTML5的W3C验证器中有效.

是否Label在HTML 5没有要求？

如果我使用HTML5 Placeholder来显示内部标签input是好的吗？

是否label仍然需要placeholder使屏幕阅读器兼容？

我正在使用Typeahead/Bloodhound从数据库的内容生成列表.我希望屏幕阅读器在突出显示时能够阅读血腥建议.我在元素中添加了一些咏叹调角色,试图从屏幕阅读器中读取内容.但是,突出显示时,屏幕阅读器是静音的.如果我将焦点添加到元素,那么blodhound模态窗口将关闭,这将无法正常工作.

到目前为止我所拥有的:

 var myTypeahead = $('.supersearch').typeahead({
      highlight: true,
      autoselect: true
 },
 {
      name: 'search-content',
      displayKey: 'title',
      source: content.ttAdapter(),
      templates:{
           header: '<h3 class="typeaheadTitle">Filtering Content...</h3>',
           empty: [
                '<div class="noResults">',
                'No Results',
                '</div>'
           ].join('\n'),
           suggestion: Handlebars.compile('<div class="searchListItem"><a href="{{link}}" class="searchLink" aria-label="{{title}}">{{title}}</a></div>')
      }
 });


 myTypeahead.on('typeahead:cursorchanged', function($e, datum){
      $(this).html(datum["value"]);
      var focused = $( document.activeElement )
      var submenuHighlight = focused.parent().find('.tt-cursor .searchListItem a');
      console.log(submenuHighlight.text());
 });

 // Add aria dialog role
 $('.tt-dataset-search-content').attr({
      'role': 'dialog',
      'aria-live': 'assertive',
      'aria-relevant':'additions'
 });

这会将aria标签角色添加到输出列表和容器,但尝试通知读者此列表动态更改.我也在听cursorchanged,所以我可以隔离我需要的元素(console.log验证这个),但我不知道如何告诉读者用tt-cursor类读取当前项.

这是HTML输出:

 <div class="tt-dataset-search-content" role="dialog" aria-live="rude" aria-relevant="additions">
      <h3 class="typeaheadTitle">Filtering Content...</h3>
      <span …

我需要帮助一个在用户空闲时触发的模态.它运行良好,直到我在运行NVDA的Firefox上进行测试.使用箭头键时以及在移动设备上滑动时会出现焦点问题.当模态出现并且用户使用箭头或滑动时,如果我等待点击它,焦点将在几秒后从"是"按钮反弹到标题.我已经装了工作示例:https://jsfiddle.net/ncanqaam/

我将空闲时间段更改为一分钟,并删除了调用服务器以扩展用户会话的部分.

var state ="L";
var timeoutPeriod = 540000;
var oneMinute = 60000;
var sevenMinutes = 60000;

var lastActivity = new Date();

function getIdleTime() {
    return new Date().getTime() - lastActivity.getTime();
}

//Add Movement Detection
function addMovementListener() {
    $(document).on('mousemove',  onMovementHandler);
    $(document).on('keypress',  onMovementHandler);
    $(document).on('touchstart touchend',  onMovementHandler);
}
//Remove Movement Detection
function removeMovementListener() {
    $(document).off('mousemove', onMovementHandler);
    $(document).off('keypress',  onMovementHandler);
    $(document).off('touchstart touchend',  onMovementHandler);
}

//Create Movement Handler
function onMovementHandler(ev) {
    lastActivity = new Date();
    console.log("Something moved, idle time = " + lastActivity.getTime());
}

function …

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

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

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

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

谢谢!

我正在寻找一种让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" …

我正在努力改善我的Delphi应用程序对视障用户的可访问性.我的应用程序使用许多自定义GUI组件 他们大多来自TWinControl或TGraphicControl.

使用NVDA进行测试时,我的自定义组件似乎不可见.例如,当鼠标悬停在常规Delphi VCL控件(如按钮或表单)上时,NVDA将通过读取控件的名称(或其他详细信息)来做出响应.相比之下,当我将鼠标悬停在任何自定义控件上时,NVDA根本没有响应.

如何使我的自定义组件对NVDA和其他屏幕阅读软件可见？