我应该为屏幕阅读器使用 <code> 还是只读的 <textarea> 标记代码示例？答案

【问题标题】：Should I mark-up code examples with <code> or a read-only <textarea> for screen readers?我应该为屏幕阅读器使用 <code> 还是只读的 <textarea> 标记代码示例？
【发布时间】：2019-07-31 08:41:50
【问题描述】：

我有一个包含多个 HTML 代码示例的页面。屏幕阅读器用户会从这样看到他们中受益吗：

<textarea readonly="true">CODE EXAMPLE HERE</textarea>

或者我应该这样做：

<code>CODE EXAMPLE HERE</code>

我认为<textarea> 可能比<code> 更容易复制粘贴，但我想听听您的经验。

【问题讨论】：

标签： html accessibility semantic-markup screen-readers

【解决方案1】：

<textarea> 元素用于用户输入。 readonly 被设计为用于用户输入但可能由于某种原因被冻结的东西的临时状态。

使用<code>（可能与<pre>结合使用）。

【讨论】：

你的论据很好。我认为开发人员经常尝试创造性地操纵组件来做一些他们不打算做的事情，特别是对于辅助技术，我们应该只依赖语义正确的元素。

【解决方案2】：

使用<code> 是正确的解决方案。如果有合适的 HTML 标签用于某个目的，请使用它。浏览器和屏幕阅读器会将其转换为对用户有用的信息。 W3C 规定的 ARIA 仅应在没有可用的 HTML 解决方案时使用。 ARIA 将强制一种行为。这通常用于div 标签，它们本身没有语义，用 ARIA 角色和属性武装它们可以使它们表现得像视觉暗示一样。

【讨论】：