NVDA 屏幕阅读器 aria-live 问题

Question

使用aria-live 动态显示表单字段验证错误。一切正常，除了使用向下箭头键/选项卡从一个字段移动到另一个字段时，只有在选择下一个文件标签后才会宣布验证错误，并读取下一个标签名称然后宣布前一个字段验证错误。

代码：

{!label ? null : <label htmlFor={`input-${model}`} className={classnames('inputLabel', `${model.toLowerCase()}-label`)}>{label}&nbsp;<i className={ classnames('fa','fa-asterisk', { 'isRequired' : requiredField }, { 'invisible' : !requiredField || !showAsterisk } )} aria-hidden='true'></i></label>}              
            {!label ? null : <br />}
            <OverlayTrigger ref={(input) => { this.refPopOver = input; }} trigger={trigger} placement={popoverPlacement} overlay={popover} shouldUpdatePosition={true}>
                <InputComponent model={`.${model}`}

                    {...extraProps} />
            </OverlayTrigger>
            <div id='errorRegion' aria-atomic="true" aria-live="assertive">
                <Errors
                    className={classnames('errorText', 'error', model.toLowerCase())}
                    model={`.${model}`}
                    wrapper={ErrorWrapper}
                    show="touched"
                    messages={validators.messages}
                />
            </div>

编辑： slugolicious-感谢您的更新。是的，我正在使用 aria-live 来宣布错误。使用选项卡浏览可聚焦元素时效果很好。但是当使用向下箭头的浏览模式时，宣布错误和下一个标签的顺序混淆了，我也试过你的建议，但结果还是一样；它宣布下一个标签，然后是前一个字段的错误消息。在下面使用 Firefox (59.0.2 x64) 添加 NVDA(v2017.4 & v2018.1) 日志-

NVDA speech viewer log 第二次编辑：在活动区域​​被填充之前

<form style="position: relative;" autocomplete="off">
    <div class="row">
        <div class="col-sm-12">
            <div class="id-form-errors" aria-live="assertive" aria-atomic="true">
                <!-- react-empty: 170 -->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12" style="margin-bottom: 20px;">
            <div style="position: relative;">
                <label class="inputLabel firstname-label" for="input-firstName">
                    <!-- react-text: 175 -->First name
                    <!-- /react-text -->
                    <!-- react-text: 176 -->&nbsp;
                    <!-- /react-text -->
                    <i class="fa fa-asterisk isRequired" aria-hidden="true"></i>
                </label>
                <br>
                <input name="appForms.identify.firstName" class="field fullWidth firstname-field" id="input-firstName" aria-required="true"
                    aria-describedby="firstname-popover" type="text" placeholder="First name" value="">
                <div id="errorRegion" aria-live="assertive" aria-atomic="true">
                    <!-- react-empty: 181 -->
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12" style="margin-bottom: 20px;">
            <div style="position: relative;">
                <label class="inputLabel lastname-label" for="input-lastName">
                    <!-- react-text: 185 -->Last name
                    <!-- /react-text -->
                    <!-- react-text: 186 -->&nbsp;
                    <!-- /react-text -->
                    <i class="fa fa-asterisk isRequired" aria-hidden="true"></i>
                </label>
                <br>
                <input name="appForms.identify.lastName" class="field fullWidth lastname-field" id="input-lastName" aria-required="true"
                    aria-describedby="lastname-popover" type="text" placeholder="Last name" value="">
                <div id="errorRegion" aria-live="assertive" aria-atomic="true">
                    <!-- react-empty: 191 -->
                </div>
            </div>
        </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12">
            <button class="submitButton fullWidth disabledButton next-btn" aria-disabled="true" type="submit">Next</button>
        </div>
    </div>
</form>

生成错误区域后的HTML：

<div class="row">
    <div class="col-xs-12 col-sm-12" style="margin-bottom: 20px;">
        <div style="position: relative;">
            <label for="input-firstName" class="inputLabel firstname-label">
                <!-- react-text: 226 -->First name
                <!-- /react-text -->
                <!-- react-text: 227 -->&nbsp;
                <!-- /react-text -->
                <i class="fa fa-asterisk isRequired" aria-hidden="true"></i>
            </label>
            <br>
            <input type="text" class="field fullWidth firstname-field" placeholder="First name" id="input-firstName" aria-describedby="firstname-popover"
                aria-required="true" name="appForms.identify.firstName" value="">
            <div id="errorRegion" aria-atomic="true" aria-live="assertive">
                <!-- react-empty: 232 -->
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12" style="margin-bottom: 20px;">
        <div style="position: relative;">
            <label for="input-lastName" class="inputLabel lastname-label">
                <!-- react-text: 236 -->Last name
                <!-- /react-text -->
                <!-- react-text: 237 -->&nbsp;
                <!-- /react-text -->
                <i class="fa fa-asterisk isRequired" aria-hidden="true"></i>
            </label>
            <br>
            <input type="text" class="field fullWidth lastname-field" placeholder="Last name" id="input-lastName" aria-describedby="lastname-popover"
                aria-required="true" name="appForms.identify.lastName" value="">
            <div id="errorRegion" aria-atomic="true" aria-live="assertive">
                <!-- react-empty: 242 -->
            </div>
        </div>
    </div>
</div>

第三次编辑-仍在等待可行的解决方案。需要帮助！

Answer 1

为了确保我们谈论的是同一件事，使用aria-live 是为了当您页面上的内容更新并且您希望屏幕阅读器立即宣布更新时。更新发布一次，然后就完成了。通过aria-live 宣布错误消息是一种很好的做法。

如果用户随后在页面中导航，或者使用 Tab 键切换到交互式元素，或者使用屏幕阅读器中的虚拟光标，则您的错误消息将不会被宣布，除非您已将它们与包含错误的字段，通常通过aria-describedby 属性。您还应该在无效的字段上使用aria-invalid="true"。