Question

我正在帮助一位朋友开发涉及以下表单设置的应用程序。有一个元素（用户组）与其他元素不同，因为它必须先由管理员批准才能更改。

她的目标是向用户明确区分，而她要这样做的方法是首先将用户的当前组显示为文本，然后在用户单击编辑组按钮。

我们已经准备就绪，没有问题，唯一的问题是关于代表用户当前组的文本元素的正确语义选择。

我们想保留与上面表格中的标签输入对相同的语义模式，但是我们不确定当输入被纯文本替换时如何最好地表示（我们特别注意它与之相关的问题）访问性）。当前的草稿将使用描述列表。这是这个场合的最佳选择吗？

谢谢！

<form action="/user-settings" method="POST">
  <label for="username">Username</label> 
  <input id="username" type="text"/>
  <label for="email">Email</label>
  <input id="email" type="text"/>
  <input type="submit" value="Submit"/>
</form>
<hr>
<dl> 
  <dt>Group</dt>
  <dd>{{ current_group }}</dd>
</dl>
<button>Edit Group</button>
<form action="/group-change-request" method="POST" class="hidden">
  <select><!--group options--></select> 
  <input type="submit" value="Request Group Change"/>
</form>

Answer 1

我可能会将群组显示为<input readonly>而不是纯文本，以便用户仍可以在界面上切换并听到字段的标签（假设您为<label for="id">只读字段，就像您对其他字段所做的一样。

我还将包括一些明显隐藏的文本（但对于屏幕阅读器是“可见的”），这些文本解释了为什么该字段为只读以及如何使其变为可编辑状态。像这样：

<label for="myid">group</label>
<input readonly id="myid" aria-describedby="desc">
<span id="desc" class="sr-only">The group is protected until you select the "Request Group Change" button</span>

您可以在此处看到“仅sr”类：What is sr-only in Bootstrap 3?

保留非输入元素的标签-输入关系的最佳元素？

1 个答案: