aria-label可以用在title元素上吗

Question

我有一个页面，其中 <title> 标签包含一些文本（特别是：部门名称），屏幕阅读器发音不太好（部门名称是“AskHR”——它是人力资源部门的帮助台).

我想为屏幕阅读器提供更易于发音的版本（“Ask H R”），同时保留更具风格的版本以供视觉显示。我想用aria-label来实现，但不确定是否可以应用到<head>中的<title>元素上。

谁能确认这是否有效？

Answer 1

我不认为这是有效的。

首先，并不是所有的屏幕阅读器都是平等的！

您尝试做的事情可能对某些人有效，但对其他人无效。例如，VoiceOver 会如您所料读出 "AskHR"。（并忽略 aria-label 属性。）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title aria-label="xxx">AskHR</title>
  </head>
  <body>
    <button aria-label="close">X</button>
  </body>
</html>

我认为这可能更接近您正在尝试做的事情，但支持有限：

.label {
  speak-as: spell-out
}

见https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as

如果我们检查上面 Chrome 中的示例，您会看到 <button> 元素：

aria-label 属性接管按钮内容。 VoiceOver 读出 "close" 而不是 "x"。

然而这是我们看到的 <title>:

aria-label可以用在title元素上吗

Can aria-label be used on the title element

wai-aria