NDVA 和网页标题标签

Question

我正在处理有关世界 War 1（第一次世界大战）的页面。当 NVDA 读取页面时，它会显示“WW eye”。我可以使用以下方法更正此问题：

  <span aria-hidden="true">WWI</span> <span style="display:inline-block; text-indent: -10000px;">World War One</span>

但是，我的页面标题中有 WWI：

<title>WWI ...</title>

当用户加载页面时，NVDA 会读取页面标题，在这种情况下，会说 WW“眼睛”。

是否有类似的技术可以让 NVDA 说出与标题标签中出现的内容不同的内容？

Answer 1

你在你的例子中写了一个 1 <title> 我认为那是一个“i”。

简短的回答是，如果您必须使用“I”并且您不需要做任何事情，那么您无法对标题做任何事情，屏幕 reader 用户是习惯了这种行为，并且会很快从文档中获得上下文，从他们进入页面所遵循的链接等。

只使用 WW1 它比 WWI 对每个人都更有意义，而不仅仅是屏幕 reader 用户（或者更好的是 World War 1）。

此外，就搜索词而言，我怀疑有人会使用 WWI 来查找 WW1，因此请选择显而易见的选项。

另外，就从屏幕 reader 隐藏信息而言，更好的方法是使用 this visually hidden text class 实现兼容性（如果必须，您可以内联 CSS，但使用 classes 显然更可取，因为 mark-up 更干净，您可以在其他地方使用 class。）

HTML

<span aria-hidden="true">WWI</span> 
<span class="visually-hidden">World War One</span>

CSS

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

NDVA 和网页标题标签

NDVA and Webpage title tag

accessibility

page-title

nvda