javascript - 如何制作易于理解的填写表格说明

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-descriptedby”，但它丢失了链接(由 Jaws 以纯文本形式读出)。我需要一种方法来使屏幕阅读器在进入选项卡时读出此部分，按需可读并且链接可用。
有谁知道这样做的一种方法吗？

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> 并且它应该与页面标题相对应)。

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

屏幕阅读器用户在现场时将被告知说明位于上方(通过 aria-describedby )，并且可以选择跳转页面(如果用户已经遇到过并记忆起其内容，则最好使用标题或列表导航)结构)或激活链接。

我没有把链接放在 <label> 中因为它是嵌套在另一个事实上的交互式控件中的交互式控件(因为 <label> 是可单击的，并且我们不希望用户单击期待一种行为并得到另一种行为)。

此方法满足视觉用户和屏幕阅读器用户(包括有视力的屏幕阅读器用户，或约 1/3 的屏幕阅读器用户)的几种不同的交互和发现模式。

一如既往，背景很重要，受众很重要，目标也很重要。您的里程可能会有所不同。