Question

在在线表单（html，javascript）中，我有一个包含多个附件的选项卡（输入类型=文件）。
在附件列表之前，我有一段关于将文件附加到表单的说明（大小，后缀等），
在说明书中有一个指向在线文件缩小指南的链接我的HTML看起来像：

<div class="container">
    <p id="attachmentInstructions">
        <b>Instructions for Attaching Documents</b>
        <ul>
        <li>To attach a file, click on the document field.</li>
        <li>You can attach the following types of documents: gif, jprg, jpg, tiff, tif, bmp, pdf, doc, docx</li>
        <li>The scan must be in black and with a resolution of no more than 300 DPI. Ascertain that the document is readable.</li>
        <li>The total size of attached documents may not be more than 10 MB </li>
        <li><a href="https://forms.gov.il/forms/resources/FileSizeReductionGuide.pdf" target="_blank">click to the online reduction file size guide</a></li>
    </ul>

</p>

<ul>
    <li>
        <label for="doc1">document 1</label>
        <input id="doc1" type="file" />
    </li>
    <li>
        <label for="doc2">document 2</label>
        <input id="doc2" type="file" />
    </li>
    <li>
        <label for="doc3">document 3</label>
        <input id="doc3" type="file" />
    </li>
</ul>
</div>

我需要为屏幕阅读器用户提供这些说明我尝试在每个输入上使用“aria-describedby”，但它失去了链接（由Jaws读出为纯文本）。我需要一种方法可以在进入选项卡时通过屏幕阅读器读取此部分，按需读取并且链接为usabale。
有没有人知道这样做的方法？

Answer 1

在上下文中查看页面会有所帮助。

现在它可以访问到屏幕阅读器（虽然我不会将<ul>嵌套在<p>中，因为这是一个解析错误并会触发WCAG失败，我会从链接中删除target，因为产生新窗口可能是屏幕阅读器用户的问题，我建议避免使用PDF并将文件大小信息放入HTML页面。）

话虽如此，我认为您希望为屏幕阅读器用户提供更多可用。

考虑这种方法：

<h2 id="attachmentInstructions">Instructions</h2>
<p>…</p>
<ul>…</ul>

<label for="doc1">document 1</label>
<input id="doc1" type="file" aria-describedby="instLink">
<span id="instLink"><a href="#attachmentInstructions">Detailed instructions above.</a></span>

注意我插入了一个标题（如果没有其他内容，则此页面允许的最高级别，因为我们都知道应该只有一个<h1>并且它应该对应于页面标题。）< / p>

现在，用户可以直观地看到上面说明所在字段旁边的消息。用户还可以单击该链接直接跳至说明或向上滚动。

屏幕阅读器用户会在现场（通过aria-describedby）被告知上面有说明，并且可以选择跳过页面（理想情况下，如果用户已经遇到它，则使用标题或列表导航）召回其结构）或激活链接。

我没有将链接放在<label>中，因为它是嵌套在另一个事实上的交互式控件中的交互式控件（因为<label>是可点击的，我们不希望用户点击期待一种行为，另一种行为。）

这种方法为视觉和屏幕阅读器用户（包括视力正常的屏幕阅读器用户，或大约1/3的屏幕阅读器用户）满足了一些不同的交互和发现模式。

与往常一样，背景问题，受众问题和目标都很重要。您的里程可能会有所不同。

如何制作可访问的填写表格说明

1 个答案: