文本字段中“达到的最大字符数”的可访问性答案

【问题标题】：Accessibility of "maximum characters reached" in a text field文本字段中“达到的最大字符数”的可访问性
【发布时间】：2018-10-02 19:09:39
【问题描述】：

我有一个最多只能包含 15 个字符的文本字段。我包括 aria-label 来表示“名字（最多 15 个字符）”。我还想在达到最大字符并且他们无法进一步输入时提醒用户。

最好的方法是什么？

屏幕阅读器似乎不支持maxlength。

【问题讨论】：

【解决方案1】：

很遗憾，您必须解决这个问题。屏幕阅读器应该尊重maxlength 属性并为您宣布限制并定期告诉用户还剩多少字符。但是在标签中设置最大值对所有用户来说都是一个好习惯。

即使您已达到最大值，屏幕阅读器也会很乐意在您输入时继续提供反馈。这很糟糕，我认为是屏幕阅读软件中的一个错误。

由于您的字段只有 15 个字符，因此您可能不需要在它们到达结尾之前提供反馈。如果您有 100 个字符，那么在字段下方添加一个“剩余 X 个字符”标签会有所帮助，例如每 20 次击键更新一次。

现在，您可以拥有一个aria-live 区域，当您达到最大值时，您可以向其中注入文本，说明已达到限制，或者您可以取消隐藏该活动区域的子 DOM 元素。无论哪种方式都会公布文本。

<span aria-live="polite" id="myid"> 
  <!-- insert text here from javascript when max reached --> 
</span>

或

<span aria-live="polite" id="myid"> 
  <!-- unhide me when max reached -->
  <span style="display:none">You've reached the max</span>
</span>

【讨论】：