转换只读字段以实现辅助功能

Answer 1

就屏幕阅读器的使用而言，您已有的代码不应该存在重大问题。

他们可以很好地访问键值对，并且它将按顺序读取它们，这将首先读取标题，然后读取值（向下读取时）。

当涉及到WCAG 标准信息和关系时，使用

<p>

可能不足以解释第二个文本是用户输入，而第一个文本是用户无法更改的静态标签。

可能有几种有效的方法可以解决这个问题。

推荐解决方案

如果这是表单数据，用户可能期望（取决于您的用例）以表单而不是阅读模式进行导航。因此，他们可能会使用 Tab 键从一个表单字段跳转到另一个表单字段。

目前“表单”中没有表单字段。我推荐的解决方案是真正的readonly形式：

<form aria-labelledby="form-title">
  <h2 id="form-title">Your form data</h2>
  <p>
    <label>Some text
          <input readonly type="text" value="Some value">
        </label>
  </p>
  <p><button>Edit</button></p>
</form>

这也将清楚地传达给任何辅助技术，我们正在处理表单数据，但在当前状态下无法更改。表单必须有一个可访问的名称，这就是为什么我用

aria-labelledby

来指代可见标题。

<label>

元素必须与表单输入关联，可以通过

for

属性或通过包装输入来关联。

替代解决方案

将两篇文章放在一起

<p>

加强了它们的关系，并且在使用屏幕阅读器阅读时，标题和值之间的停顿更少

<p class="form-group" id="a2ba84-serviceName">
  <div id="a2ba84-title" class="col-sm-4 form-control-title">Some text</div>
  <div id="a2ba84-value" class="col-sm-8 form-control-static">Some value</div>
</p>

<dl>

描述列表旨在形成一组键和值，并且经常在这种情况下使用

<dl>
  <div class="form-group" id="a2ba84-serviceName">
    <dt id="a2ba84-title" class="col-sm-4 form-control-title">Some text</dt>
    <dd id="a2ba84-value" class="col-sm-8 form-control-static">Some value</dd>
  </div>
</dl>

补充说明

aria-labelledby

和

aria-describedby

不能仅用于任何元素。它们用于具有可访问名称的ARIA 角色，主要是交互式控件、地标和表格元素。