Question

我正在进行辅助功能测试。我创建了一个电子邮件文本框，并添加了一些验证。我想在输入错误的电子邮件后移至下一个元素，屏幕阅读器应读取内联错误。我遇到了使用aria-describeby和aria-live属性，但是不知道如何在此代码中使用它。

from flask_restful import Api
from flask_cors import CORS
application_root = config.get_application_root()
static_folder = os.path.join(application_root, 'static')
template_folder = os.path.join(application_root, 'templates')
app = Flask(__name__, static_url_path='/static',         static_folder=static_folder, template_folder=template_folder)

cors = CORS(app)

app.config['SQLALCHEMY_DATABASE_URI'] ='mysql://*********'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['PROPAGATE_EXCEPTIONS'] = True # To allow flask propagating  exception even if debug is set to false on app^M
api = Api(app)

@app.after_request

def after_request(response):
   response.headers.add('Access-Control-Allow-Origin', '*')
   response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
   response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
   return response

api.add_resource(TestResults, '/results')

if __name__ == '__main__':
   db.init_app(app)
   app.run(host='0.0.0.0', debug=True)  # important to mention debug=True^M

Answer 1

aria-describedby向元素添加其他信息。元素通常具有名称或标签，此外还可以具有描述。如果错误消息位于单独的元素中，例如<div>或<span>，则可以将该<div>与输入字段相关联。

您的代码可能类似于：

<label for="emailID">email address:</label>
<input id="emailID" aria-describedby="errorMsg">
<div id="errorMsg">invalid email address</div>

某些屏幕阅读器会在该字段的标签后读取aria-describedby，而其他屏幕阅读器会告诉您按快捷键来收听描述。由屏幕阅读器决定如何将其呈现给用户。

如果上面的字段有误，那么它也应该有aria-invalid="true"。

<input id="emailID" aria-describedby="errorMsg" aria-invalid="true">

为了让屏幕阅读器宣布该错误消息，它应该带有aria-live="polite"。

<div id="errorMsg" aria-live="polite"></div>

发现错误时，您可以通过JavaScript将文本插入<div>中，由于它是实时区域，因此屏幕阅读器会宣布该错误。

document.getElementById("errorMsg").innerHTML = "invalid email address";

如何使屏幕阅读器工具大声读取内联错误？

1 个答案: