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来宣布错误。使用tab浏览可聚焦元素时，它工作正常。但是当使用向下箭头的浏览模式时，宣布错误和下一个标签的顺序混淆了，我也尝试了你的建议，但仍然是相同的结果;它宣布下一个标签然后是前一个字段的错误消息。使用下面的Firefox（59.0.2 x64）添加NVDA（v2017.4＆amp; 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>

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

Answer 1

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

如果用户随后在页面中导航，无论是选择交互式元素，还是在屏幕阅读器中使用虚拟光标，除非您已关联，否则您的错误消息将不它们通常通过aria-describedby属性包含包含错误的字段。您还应该对无效的字段使用aria-invalid="true"。

NVDA屏幕阅读器aria-live问题

1 个答案: