辅助功能 获取 view_跳过导航以获取辅助功能

辅助功能 获取 view

After accesskeys and prev/next links, there is one final feature to add to a site to make it fully accessible: the ability for users to skip navigation.

在访问键和上一个/下一个链接之后 ，有一个最终功能要添加到站点中以使其完全可访问：用户可以跳过导航。

The easiest way to understand the potential need for skip nav link on a site is to hide both images and CSS for the site in question. (You can do this by going into the Web Developer toolbar and replacing images with their alt text (Images / Replace images with alt attributes) and turning off CSS (CSS / Disable all styles).

了解站点上可能需要跳过导航链接的最简单方法是隐藏相关站点的图像和CSS。 (您可以通过进入Web Developer工具栏并用其alt文本替换图像 (“ 图像” /“用alt属性替换图像” )并关闭CSS(“ CSS” /“禁用所有样式” )来实现此目的。

Now you see your web page as screen reader software does. Under those conditions, the incarnation of this site at the time of writing looks something like the image you see to the left.

Broadly speaking, neither CSS nor images can be read by a screen reader: all the software does is translate text into speech. (They will, however, read the alt values of images).

广义上讲，屏幕阅读器无法读取CSS或图像 ：软件只能将文本转换为语音。 (但是，他们将读取图像的alt值 )。

The problem is that the screen reader must start at the top of the page, translating the text it encounters into computer-generated speech line by line. That’s not so bad on the blog you’re reading now, with a relatively light horizontal navigation bar. But you can imagine the length of material that would have to be read if the vertical navigation was placed to the left, rather than the right: with CSS turned off it would appear first, meaning that the screen reader would have to read through every piece of sidebar content before getting to the actual content of the page.

问题是屏幕阅读器必须从页面顶部开始，将遇到的文本逐行转换为计算机生成的语音。 相对较轻的水平导航栏，在您现在正在阅读的博客上还算不错。 但是您可以想象，如果将垂直导航放置在左侧而不是右侧，则必须阅读的材料长度：关闭CSS会先出现，这意味着屏幕阅读器必须阅读所有内容进入页面的实际内容之前，请检查侧边栏内容。

To get around this, we introduce a “skip navigation” link as the very first piece of content on the page. That allows people who use screen readers to “skip ahead”, past irrelevant material and get to the meat of the site. The skip navigation works exactly as anchor links do: place an id on the first piece of “real” content (in my case, the containing div of the first article), and link to it, just as you would link to an anchor. So in the case of this site, the skip nav feature code is simply this:

为了解决这个问题，我们在页面的第一部分引入了“跳过导航”链接。 这样一来，使用屏幕阅读器的人们就可以“跳过”，跳过无关的材料并深入了解现场。 跳过导航的工作方式与锚链接完全相同：将id放在第一段“真实”内容(在我的情况下，是第一篇文章的包含div )上，然后链接到该链接上，就像链接到锚一样。 因此，对于本网站而言，跳过导航功能代码就是这样：

<a href="#content">Skip navigation</a>

That’s it: so long as the link remains the first piece of body content in the page, screen readers will read that as the first option and allow their users to jump forward to the actual content on the page.

就是这样：只要链接仍然是页面中正文的第一部分，屏幕阅读器就会将其作为第一选项阅读，并允许其用户跳至页面上的实际内容。

Ironically, the “skip nav” feature doesn’t have to be terribly visible, as it is only screen readers that will encounter it: sighted users don’t need to see it. For that reason, I place it up at the very top left corner of the banner with some CSS, in a non-distracting color.

具有讽刺意味的是，“跳过导航”功能不必十分清晰可见，因为只有屏幕阅读器才能看到它：有视力的用户不需要看到它。 因此，我将其放置在横幅的最左上角，并带有一些CSS，以不引起干扰的颜色显示。

Modern screen readers don’t need a “skip nav” feature in the site if the pages use ARIA Landmarks extensively.

如果网页广泛使用ARIA地标，则现代屏幕阅读器无需在网站中使用“跳过导航”功能。

翻译自: https://thenewcode.com/193/Skip-Navigation-for-Accessibility

辅助功能 获取 view