带有带有aria-占位符属性的role="textbox“的span错误

Question

​

.comment-box2 {
    display: block;
    width: 100%;
    overflow: hidden;

    outline: none;

    min-height: 40px;
    line-height: 20px;

    padding-left: 8px;
    background-color:#F5FFFA;
    border-radius:15px;
    border: 1px solid #708090;
    display:inline-block;
    width:330px;

}

<span class="comment-box2" role="textbox" id="comment" contenteditable aria-placeholder="Write a Comment..."></span>

​

在这里，span以文本框的形式出现，但是aria-占位符属性在all.is中似乎不起作用，这是不允许的吗？

Answer 1

只有当文本框中没有值时，屏幕阅读器才会大声读取通过aria-placeholder属性提供的提示。如果文本框中有value或文本可用，则屏幕阅读器将宣布该值，而不是占位符文本。您不会像使用placeholder时那样看到占位符文本，因为aria-placeholder是由屏幕阅读器之类的辅助技术读取的。在您的示例中，屏幕阅读器将读取字符串“写注释.”由aria-placeholder提供。

aria-placeholder属性用于模拟placeholder属性的HTML5行为，并在其他模拟控件类型和角色中使其在HTML5占位符属性无效的情况下有效。当控件的值是空字符串时，例如控件第一次接收焦点和用户删除先前输入的值时，占位符应该是可见的。而不是使用aria-placeholder，如果可以的话，可以使用语义<input type="text">和对应的<label>或带有placeholder属性的<textarea>。

也就是说，只有当控件没有值时，作者才应该向用户提供这个提示。这包括：

• 当控件第一次收到焦点
• 时，用户擦除先前输入的值

要处理您的声明，“span显示为文本框，但aria-占位符属性似乎根本不起作用。这不允许吗？”“允许”将aria-placeholder用于role="textbox"字段。该值应该是一个字符串，其值等于为将数据填充到文本框而提供的提示。