css元素的继承性_使用CSS呈现可访问性元素

css元素的继承性

Mozilla is full of brilliant developers who the mass developer community doesn't know well enough.  Toward the top of that list is Craig Cook, a front-end web developer who works on Mozilla.org and other popular Mozilla sites.  One technique he recently brought to my attention is his creative handling of elements usually only thought of as helpers to screen readers.  Let me show you how we can make those hidden elements useful for all users.

Mozilla充满了优秀的开发人员，而大众开发人员社区对此并不十分了解。 位居榜首的是前端Web开发人员Craig Cook，他在Mozilla.org和其他流行的Mozilla网站上工作。 他最近引起我注意的一种技术是他对元素的创造性处理，这些元素通常只被认为是屏幕阅读器的助手。 让我向您展示如何使这些隐藏的元素对所有用户有用。

HTML (The HTML)

The HTML is simple, just a list of elements which link to different parts of the page:

HTML很简单，只是链接到页面不同部分的元素列表：

<ul class="a11y-menu">
	<li><a href="#content">Skip to content</a></li>
	<li><a href="#search">Skip to search</a></li>
	<li><a href="#languages">Skip to languages</a></li>
</ul>

Create links to relevant popular and useful parts of the page, both for sighted and unsighted users.

为有意和无意用户创建指向页面相关流行和有用部分的链接。

CSS (The CSS)

The first part of the CSS is simple and exactly what you'd expect:  simply hide the elements offscreen:

CSS的第一部分很简单，也正是您所期望的：只需将元素隐藏在屏幕外即可：

ul.a11y-menu {
	position: absolute;
	top: -500px;
}

The code above leaves the elements offscreen, so that the sighted user doesn't see them, but they're still tab-focusable so that screen readers can see them.  But looking at these links, wouldn't they also be useful to sighted users who prefer to use the keyboard?  Let's make that happen!

上面的代码将元素保留在屏幕之外，以便可见的用户看不到它们，但它们仍可聚焦于标签，以便屏幕阅读器可以看到它们。 但是，看看这些链接，它们是否对喜欢使用键盘的有视力的用户有用吗？ 让我们做到这一点！

ul.a11y-menu a:focus {
	display: block;
	position: absolute;
	top: 520px; /* overcome the URL's 500px, then with some padding */
	left: 0;

	/* visual styles here, like padding, border, background, etc. */
}

While the entire list element stays out of site, any focused link is featured at the top of the screen so that it may be seen.

当整个列表元素都不在站点中时，任何聚焦的链接都会显示在屏幕顶部，以便可以看到它。

This post is more about the technique than the cleverness in code.  If you want to see this technique used in production, visit the Mozilla Blog; press the tab key a few times and you'll see the accessibility links display one by one in the top left side of the site.  This technique is excellent -- useful to the both the sighted and unsighted!

这篇文章更多地是关于技术，而不是代码的聪明。 如果您想了解这种技术用于生产中， 请访问Mozilla博客 ； 按几次Tab键，您将看到该辅助功能链接在网站的左上角逐一显示。 此技术非常出色-对有视力和无视力的人都非常有用！

翻译自: https://davidwalsh.name/accessibility-elements

css元素的继承性