编写易于理解的问题¶
确保所有学生（包括残障学生）都能理解 ZJUI-Learn 问题对于包容性学习环境至关重要。本指南为作者提供了创建易于理解的问题内容的建议。
语义HTML¶
正确使用语义 HTML 元素是 Web 可访问性的基础。语义 HTML 意味着将 HTML 标签用于其预期目的，这有助于辅助技术（如屏幕阅读器）理解内容的结构和含义。
- 标题：使用
<h1>、<h2>等，逻辑地构建问题内容。避免跳过标题级别。 - 列表：对于有序列表使用
<ol>，对于无序列表使用<ul>。使用<li>作为列表项。 - 段落：将文本内容包裹在
<p>标签中。 - 强调：使用
<em>来强调，使用<strong>来强调重要性，而不是仅仅依靠视觉样式。 - 表：适当地使用
<table>与<thead>、<tbody>、<tr>、<th>和<td>。确保表格具有清晰的标题和有意义的行/列关系。 MDN 的表可访问性指南 很好地概述了如何创建可访问的表。
非文本内容的文本替代品¶
所有非文本内容都必须有一个具有同等目的的替代文本。
图像和数字 (pl-figure)¶
使用 pl-figure 元素嵌入图像时，请始终通过 alt 属性提供描述性替代文本（替代文本）。好的替代文本应该简洁并传达图像的基本信息或功能。
<pl-figure
file-name="diagram.png"
alt="A free-body diagram showing forces acting on a block on an inclined plane."
></pl-figure>
如果图形包含对于理解内容或回答问题至关重要的复杂信息，您应该在问题文本的其他位置提供该信息。
输入元素¶
许多涉及学生输入的 ZJUI-Learn 元素都具有增强可访问性的属性。例如，大多数输入元素支持 label 属性，该属性直观地显示在输入旁边：
<pl-integer-input answers-name="num_apples" label="Number of apples:"></pl-integer-input>
许多元素支持 aria-label 属性，以提供在页面上不可见但可以通过辅助技术读取的标签。这可以根据情况与 label 属性一起使用或代替 label 属性。这对于 <pl-multiple-choice> 等默认可访问标签可能不够的元素特别有用。
<pl-multiple-choice answers-name="x" aria-label="Value of x in the equation">
<pl-answer correct="false">1</pl-answer>
<pl-answer correct="true">2</pl-answer>
<pl-answer correct="false">3</pl-answer>
<pl-answer correct="false">4</pl-answer>
</pl-multiple-choice>
请参阅每个特定 ZJUI-Learn 元素的文档 以了解其辅助功能和最佳实践。
可感知的内容¶
- 颜色对比度：确保文本和背景颜色之间有足够的对比度。不要仅依靠颜色来传达信息。
- 文本调整大小：调整文本大小时，内容应保持可读性和功能性。
- 外部资源：如果链接到或嵌入 PDF 或视频等资源，请确保它们也遵循可访问性最佳实践。例如，PDF 应具有可选择的文本和逻辑阅读顺序，视频应具有准确的说明文字或副标题。
可操作内容¶
- 键盘导航：问题中的所有交互元素都应该可以通过键盘操作。
- 焦点指示器：确保键盘焦点可见且清晰。
默认情况下，大多数 ZJUI-Learn 元素都旨在满足这些要求。但是，任何自定义 HTML 或 JavaScript 都应该经过测试，以确保它也可以通过键盘导航进行操作。
!!! note “替代问题格式”
一些本质上用于视觉输入的元素，例如`<pl-drawing>`、`<pl-sketch>` 和 `<pl-excalidraw>` 目前无法通过键盘导航和屏幕阅读器使用。如果您使用这些元素，请考虑为无法使用它们的学生提供替代问题格式，例如自由格式的文本输入，他们可以在其中描述绘图或图表。
内容易懂¶
- 清晰的语言：使用清晰简洁的语言。尽可能避免使用行话，或提供解释。
- 一致的导航：保持问题的布局和结构一致。
- 文化相关性：使用易于理解且与不同受众相关的示例和价值观。
测试可访问性¶
虽然 ZJUI-Learn 旨在提供可访问的构建块，但测试您的问题的可访问性也很重要。