NDVA 和网页标题标签

问题描述

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

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

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

<title>WWI ...</title>

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

是否有类似的技术可以让 NVDA 在标题标签中显示不同的内容？

解决方法

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

简短的回答是，如果您必须使用“我”，那么您对标题无能为力，而且您不需要做任何事情，屏幕阅读器用户已经习惯了这种行为，并且会从中受益从文档中快速获取上下文，从他们跟随的链接到页面等。

只要使用第一次世界大战，它对每个人都比第一次世界大战更有意义，而不仅仅是屏幕阅读器用户（或更好的第一次世界大战）。

在搜索词方面，我怀疑有人会使用第一次世界大战来寻找第一次世界大战，所以选择显而易见的选择。

另外，在对屏幕阅读器隐藏信息方面，更好的方法是使用 this visually hidden text class 以实现兼容性（如果必须，您可以内联 CSS，但使用类显然更可取，因为标记更清晰，你可以在别处使用这个类。）

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); /*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 */
}

accessibility nvda page-title