Question

我一直在阅读屏幕阅读器和可访问性，我想在我正在工作的某个网站上实现标签导航，但我担心没有得到数据索引，SEO问题和可访问性问题。我使用这个类作为＆＃34;隐藏＆＃34;内容的类，基于HTML5样板和CSS技巧文章：

＆＃13;

$(".ServButt").click(function() {
    $("#Amenities").addClass("hidden");
    $("#Services:visible").removeClass("hidden");
});
$(".AmenButt").click(function() {
    $("#Services").addClass("hidden");
    $("#Amenities:visible").removeClass("hidden");
});

＆＃13;

.hidden {
    position: absolute;
    width: 1px;
      /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px;
      /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.AmenButt,
    .ServButt {
    cursor: pointer;
    background: grey;
    padding: 10px;
    color: white;
    margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="AmenButt">Amenities</div>
<div class="ServButt">Service</div>
<div class="" id="Amenities">
    <p><b>AMENITIES</b> Improving quality mobilize planned giving natural resources; enabler momentum disruption citizenry. Kickstarter; theory of social change change-makers Angelina Jolie climate change. Evolution worldwide, contribution agriculture nonprofit, tackle rural forward-thinking. Policymakers, cause Andrew Carnegie catalytic effect reduce child mortality women and children. Combat malaria meaningful; international development campaign diversification. Hack socio-economic divide legal aid Nelson Mandela Rockefeller. Bono emergent fight against oppression celebrate transformative urb an institutions. Results solution assessment expert engage environmental stakeholders protect, overcome injustice donate. Agency microloans, social impact, care challenges of our times healthcare truth crisis management. Public sector, significant public institutions, pathway to a better life maximize.</p>
</div>
<div class="hidden" id="Services">
    <p><b>SERVICES</b> Giving affordable health care human potential foster democracy effect. Immunize, thinkers who make change happen assessment expert growth underprivileged plumpy'nut gender equality carbon rights. Positive social change policymakers activist tackling maximize altruism. Results celebrate outcomes governance crisis management fighting poverty. Care, assistance, medical supplies; peace turmoil; maintain emergent nonviolent resistance. Citizens of change volunteer effectiveness necessities vaccine; implementation planned giving public service life-expectancy. Billionaire philanthropy, public sector The Elders, visionary Peace Corps fight against oppression vulnerable population. Recognition committed sustainable future focus on impact affiliate proper resources agenda. Martin Luther King Jr. change lives efficient involvement respond poverty. Theory of.</p>
</div>

＆＃13;

你可以在Snippet中看到我正在使用的内容，我只是想知道是否有更有效的方法来做到这一点，我对Jquery很新，我想要改进，我知道必须是我可以使用的变量和条件代码与＆＃34;如果＆＃34; 但也许这类问题可以帮助其他人实现一个简单的tab tabibility友好代码片段。

谢谢。

Answer 1

如果不向有视力的用户显示内容，并且选项卡的状态指示内容当前未被激活，则屏幕阅读器用户如何知道哪些内容与当前选项卡相关，除非您使用{隐藏它{1}}？

我是你的情况，因为你有重复的内容，他们可以确定这一点。对于通用选项卡，他们可能无法使用。

此外，如果您的标签中包含大量内容和/或有大量标签，则屏幕阅读器用户必须遍历所有内容才能找到他们感兴趣的标签。您已选择为了某种原因将其隐藏在有视力的用户中，可能是因为您希望能够轻松找到相关信息。您需要为屏幕阅读器用户提供同样的易用性。

最后，如果您的标签内容包含可列表元素（链接，按钮或输入），那么仅限键盘用户的焦点将在屏幕外内容中丢失，这可能会使键盘变得困难或不可能只有用户才能使用该页面。

因此，最佳做法是使用display:none隐藏未选定标签的内容。您可以使用类来应用display:none，类似于您使用隐藏类的方式，搜索引擎仍然可以将其编入索引。

Answer 2

曾经有一段时间显示屏后面的所有内容：none都会被忽略（以避免垃圾邮件发送者使用隐藏文字）。

然而，随着CSS设计的进步，隐藏层变得越来越普遍。 Google会尽力渲染网站，并确定用户可以轻松查看哪些隐藏元素，哪些不会。因此，如果确定JavaScript事件将使这些图层可见，则它倾向于索引未显示的图层。

为确保Google确实知道您的图层不是垃圾邮件，您需要确保您的CSS和JS文件可以抓取。

请注意，这并不完美。使用WMT中的“抓取为Googlebot”工具在您的网站上进行测试，以确保它能够获取所有内容。

使用＆＃34;隐藏＆＃34; Tabs Jquery的class而不是display：none

2 个答案: