ASCII艺术文本的可访问性与语义化实现技术问询

1. 容器元素选择 #

优先选用 <figure> 元素，它的原生语义就是包裹独立的辅助性视觉内容（比如插图、代码块、ASCII艺术这类呈现型内容），完全匹配ASCII艺术的场景定位，语义化程度最高。如果不需要为ASCII艺术附加说明文本，也可以用 <div> 作为容器，但 <figure> 更利于屏幕阅读器识别内容类型。

若需要给ASCII艺术添加文字说明，可直接在 <figure> 内部搭配 <figcaption> 标签，强化内容与说明的语义关联。

2. 容器的ARIA角色与属性 #

• 若使用 <figure>：它自带默认语义角色，无需额外添加ARIA角色。需补充描述性属性提升可访问性：
  • 搭配 <figcaption> 时，给 <figcaption> 设置唯一id，再给 <figure> 添加 aria-labelledby="figcaption-id" 关联说明文本；
  • 无 <figcaption> 时，给 <figure> 添加 aria-label 属性，直接描述ASCII艺术内容，例如 aria-label="ASCII艺术：签名John Doe" 或 aria-label="ASCII艺术：单词bio"。
• 若使用 <div>：需要添加 role="figure" 赋予其与 <figure> 一致的语义角色，再配合上述 aria-labelledby 或 aria-label 属性，确保屏幕阅读器能正确识别内容类型。

3. <pre> 元素的ARIA角色与属性 #

<pre> 是原生预格式化文本标签，自带明确语义，无需额外添加ARIA角色。针对ASCII艺术的特殊性，需补充以下属性优化可访问性：

• 给每个 <pre> 添加 aria-label 属性，明确标注该元素对应的单词内容，例如 <pre aria-label="John">...</pre>、<pre aria-label="Doe">...</pre>。这样屏幕阅读器不会逐字符读取ASCII符号，而是直接播报对应单词，避免用户困惑；
• 不要修改 <pre> 的默认语义（比如添加 role="text" 等无关角色），保持原生标签的语义完整性。

示例代码 #

<!-- 多词场景 -->
<figure aria-label="ASCII艺术：签名John Doe">
  <pre aria-label="John">
█████╗ ██╗  ██╗███████╗
██╔══██╗██║ ██╔╝██╔════╝
███████║█████╔╝ █████╗  
██╔══██║██╔═██╗ ██╔══╝  
██║  ██║██║  ██╗███████╗
╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝
  </pre>
  <pre aria-label="Doe">
██████╗ ███████╗██████╗ 
██╔══██╗██╔════╝██╔══██╗
██████╔╝█████╗  ██║  ██║
██╔══██╗██╔══╝  ██║  ██║
██║  ██║███████╗██████╔╝
╚═╝  ╚═╝╚══════╝╚═════╝ 
  </pre>
</figure>

<!-- 单词语场景 -->
<figure aria-label="ASCII艺术：单词bio">
  <pre aria-label="bio">
██████╗ ██╗██████╗ 
██╔══██╗██║██╔══██╗
██████╔╝██║██████╔╝
██╔══██╗██║██╔══██╗
██║  ██║██║██████╔╝
╚═╝  ╚═╝╚═╝╚═════╝ 
  </pre>
</figure>

内容的提问来源于stack exchange，提问作者hugogogo