html - 视障人士的输入助手和可访问性

Question

我正在编写一种特定类型的北美电话号码输入助手，它在输入旁边显示一个框，动态显示部分输入结果的格式化结果。例如，如果用户到目前为止在输入中键入了“2345678”，则该框将显示“(234) 567-8___”。

如果用户随后键入“@”，则该框将显示红色“(234) 567-8@__”以指示无效字符，或者如果用户随后键入“012”，则该框将显示“(234) 567-8012" 为绿色，表示有效、完整的条目。

有没有人知道尝试使这也为屏幕阅读器用户提供反馈是否会有所帮助？也许，通过给输入助手框一个 aria-live=polite 属性值？……或者那会很烦人吗？

Answer 1

如果您想向使用屏幕阅读器的人显示错误，则需要将错误文本添加到页面上具有aria-live属性的不同节点，并在您选择时将其隐藏起来。

请注意，这aria-live='polite'将等待当前读取顺序完成。如果您希望用户立即停止并调整他或她的动作，则一个assertive值更合适。

作为替代方案，使用客户端验证并在提交时引发错误。考虑使用<input type='tel' />来执行此操作。这将是更标准且破坏性更小的解决方案。

在任何一种情况下，以与输入相关联的方式宣布预期的格式，无论是事先还是作为错误消息的一部分。