Question

所以我有一个动态更新需求列表的表单。这些要求始终作为列表存在，但是当您键入时，它应该使用检查和颜色更改来更新列表。我需要使用可访问性标准来制作此代码投诉，我动态地添加了几个卷。我不会在这里包含整个HTML，而只是列在role=alert无序列表中的列表。这是设置这样的东西的正确方法吗？

这是无效/等待元素

<li class="rule-waiting" id="capital" role=""></li>

以下是密码符合要求的时间

<li class="rule-passed" id="special" role="presentation"></li>

此代码示例不是动态的，您必须按下按钮进行验证，但它只是我想要实现的一个简单示例： http://codepen.io/mfeola/pen/mVbYZL

Answer 1

重要的是提醒错误，而不是告知成功。您的实现将无法正常工作，因为在页面加载后将会读取role=alert。

您应该查看aria-live属性，它可以让您动态通知修改。 ARIA19: Using ARIA role=alert or Live Regions to Identify Errors

在你的情况下，我会说视觉效果很好，（使用aria-describedby是一件非常好的事情），但使用红叉来告知错误是更好的选择。

也许live-region或role=alert应该在另一个元素中，以便仅通知这些错误。

当然，您必须使用不同的屏幕阅读器测试它，因为实现方式不同。