HTML 语义元素和可访问性说明速查表

HTML 语义元素和可访问性说明速查表

读屏软件依赖 HTML 标签的语义信息来解析页面，并向用户传达和呈现出有意义的内容。

例如，当读屏软件遇到 <nav> 标签时，它会识别出这是一个导航栏区域，并让用户能快速访问网站的导航条目。

因此，使用规范化的HTML语义标签来组织内容是提高网页可访问性的最佳手段。

下表列出了最常见和有用的 HTML 元素，这些元素对视障用户的可访问性有着重要影响。

元素	语义/功能	可访问性注意事项
<a>	如果存在非空的 href 属性，则定义一个链接。	确保元素作为 链接 发挥作用——它将用户带到另一个页面/文件或页面内的另一个位置。确保链接可以通过键盘导航和激活，并具有可见的焦点指示器。 必须包含描述链接功能的内容。通常应在正文内容中加下划线。
<abbr>	表示缩写或首字母缩略词。 &lt;abbr title&gt; 属性值会呈现给辅助技术。	最佳实践是在文本中首次出现时拼写出首字母缩略词和缩写词，而不是使用 <abbr>。
<area>	定义图像地图（用 <map> 定义）中的热点区域。	必须具有 alt 属性 值，用于描述热点区域的内容/功能。
<article> 和 <section>	除非给定 ARIA 标签（通常不推荐），否则这些元素没有有用的语义。	主要将这些用于视觉样式和内容解析。对于主要内容，请改用 <main>。 这些元素中的内容通常应以 标题 (<h1>-<h6>) 开头。
<aside>	包含侧边栏或标注内容，这些内容与 <main> 间接相关。 被标识为区域/地标。	仅用于切向信息或侧边栏信息，例如与主要内容相关的链接。
<button>	定义用于提交表单或执行功能的交互式元素。	确保按钮仍然 可以通过键盘导航 并具有可见的焦点指示器。 必须包含描述按钮功能的内容。如果元素将用户定向到另一个页面或同一页面内的另一个位置，请改用 <a>。
<caption>	为数据 <table> 定义标题或题目。	如果 <table> 具有描述它的文本，请使用 <caption> 将该文本与 表格 关联起来。
<details>	创建一个 disclosure 小部件，其中的信息仅在小部件切换到“打开”状态时才可见。	确保存在 <summary>，用于描述或概括 disclosure 内容。
<dialog>	包含对话框或其他交互式组件。	确保焦点在对话框出现时设置到对话框。 如果对话框可以关闭，请确保键盘用户可以关闭对话框。 ESC 键通常应关闭对话框。 确保键盘焦点保持在模态对话框内，并在对话框关闭时将焦点设置到逻辑位置。
<div>	一个不具有任何语义的通用容器。	如果内容呈现语义，请使用另一个语义元素。 对于交互式元素，请使用 <a>、<button> 或表单输入。 当 HTML 不足以表达语义时，可以使用 ARIA 角色 来赋予其语义。
<em>	将文本标记为强调，并将文本显示为斜体。	当文本需要强调时使用（否则使用 <i> 或样式）。 谨慎使用——它可能会对长段文本的可读性产生负面影响。屏幕阅读器通常不会以不同的方式读取它。
<fieldset>	在语义上和视觉上将 一组相关的输入 分组，例如一组单选按钮或复选框。	通常应具有 <legend> 来描述字段集。
<figure>	包含在文档主要流程中引用的图像、插图、代码片段等。	通常应为 figure 中的图像提供 alt 属性，并使用 <figcaption> 为 <figure> 内容提供标题或图例。
<footer>	包含页脚内容，例如版权数据或相关链接。 被标识为区域/地标。	仅用于页脚内容。 通常每页一个。
<h1>-<h6>	描述内容部分并定义该内容的结构级别。	确保标题准确地描述了后续的内容。 标题绝不能为空。一个页面通常应有一个 <h1>，并且不应跳过标题级别（例如，<h2> 之后是 <h4>）。
<header>	包含页眉内容、导航链接、徽标、搜索等。 被标识为区域/地标。	不要与标题（<h1> 等）混淆。 仅用于页眉内容。 通常每页一个实例。
<iframe>	在页面中嵌套其他页面内容（通常是外部视频或 feed）。	通常应具有 title 属性值，用于描述 内联框架 的内容/功能，除非 iframe 的存在对用户是视觉上透明的（在这种情况下使用 role="presentation"）。 确保 iframe 内的内容是可访问的，或提供等效的替代方案。
<input>、<select> 和 <textarea>	定义用于接受用户数据的交互式控件。	使用 <label> 来关联描述性文本，或者在复杂情况下，使用 aria-labelledby 或 aria-label。 确保输入仍然 可以通过键盘导航 并具有可见的焦点指示器。
<img>	嵌入图像。	必须具有 alt 属性 值，用于描述图像的内容和/或功能。 如果图像是装饰性的或内容在图像附近呈现，则允许使用 alt=""。
<label>	描述 <input>、<select> 或 <textarea> 的功能/目的。	必须包含描述表单输入的文本。 要将 <label> 与输入关联，可以将 <label> 围绕输入和标签文本包裹，或者使用匹配的 for/id 属性值。
<legend>	描述 <fieldset> 的内容。	仅在 <fieldset> 中使用，以描述表单输入的分组。
<li>	定义 <ol> 或 <ul> 中的项目。 屏幕阅读器会播报列表中的项目数。	确保列表项永远不为空。 注意列表项中复杂列表的嵌套。
<main>	包含主要内容。 被标识为区域/地标。	仅用于主要内容。 通常每页一个实例。
<menu>	定义菜单项的无序列表。 在语义上与 <ul> 相同。	除非嵌套项是菜单项，否则请改用 <ul>。 必须包含至少一个 <li>。
<nav>	包含导航链接。 被标识为区域/地标。	仅用于重要站点或页面内导航链接的组/列表。 通常每页 1 或 2 个实例。
<ol>	定义项目的有序/分层列表。	用于项目顺序影响意义的列表。 必须包含至少一个 <li>。
<p>	标识段落。 不呈现有用的语义。	用于创建文本块/段落。
<span>	内联文本的通用容器。	如果内容具有语义或功能，请使用另一个语义元素。 可以使用 ARIA 赋予语义，但仅在 HTML 不足以表达语义时才使用。
<strong>	将文本标记为强烈强调，并将文本显示为粗体类型。	当文本需要强烈强调时使用（否则使用 <b> 或样式）。 谨慎使用——它可能会对长段文本的可读性产生负面影响。屏幕阅读器通常不会以不同的方式读取它。
<svg>	定义可缩放矢量图形。 尚不支持正确的语义。	如果 SVG 传达内容或可点击，请分配 role="img" 和 aria-label 或 aria-labelledby（引用描述性内容），以便将 <svg> 标识为带有替代文本的图像。 如果 SVG 是装饰性的，请分配 role="presentation" 和 aria-hidden="true"。
<table>	定义以网格形式呈现的 表格内容。	仅用于表格内容/数据的网格，不用于布局。 确保表头单元格用 <th> 定义。 如果合适，请用 <caption> 描述表格。
<td>	在 表格 中定义数据单元格。	尽量避免跨越的表格单元格。 对于列标题或行标题，请改用 <th>。
<th>	在 表格 中定义标题单元格。	始终分配值为 "row" 或 "col" 的 scope 属性值。 尽量避免跨越的表头。 如果单元格不是行/列标题，请改用 <td>。
<title>	定义文档的标题。 显示在浏览器标签页中。	确保标题简洁地描述页面内容。
<ul>	定义项目的无序/项目符号列表。	用于项目顺序不影响意义的列表。 必须包含至少一个 <li>。