html - 使用 "hidden"类而不是显示 : none for Tabs Jquery

Question

我一直在阅读有关屏幕阅读器和可访问性的文章，我想在我工作的某些网站上实现标签式导航，但我担心无法将数据编入索引、SEO 问题和可访问性问题。我使用此类作为内容的“隐藏”类，基于 HTML5 样板和 CSS 技巧文章:

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

.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;
}

<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>

你可以在代码片段中看到我正在使用什么，我只是想知道是否有更有效的方法，我是 Jquery 的新手，我正在努力改进，我知道必须有变量我可以使用带有“if”的条件代码但也许这类问题可以帮助其他人实现一个简单的选项卡可访问性友好的代码段。

谢谢。

Answer 1

如果不向有视力的用户显示内容，并且选项卡的状态表明该内容当前未激活，那么屏幕阅读器用户如何知道哪些内容与当前选项卡相关，除非您使用 display:none 隐藏它？

我是你的情况，因为你有重复的内容，他们可以确定这一点。对于通用标签，他们可能无法做到这一点。

此外，如果您的选项卡中包含大量内容和/或有大量选项卡，屏幕阅读器用户将不得不遍历所有内容以找到他们感兴趣的选项卡。您已选择出于某种原因向视力正常的用户隐藏此内容，可能是因为您想轻松找到相关信息。您需要为屏幕阅读器用户提供同样的易用性。

最后，如果您的选项卡内容包含可选项卡元素(链接、按钮或输入)，那么纯键盘用户的焦点将迷失在屏幕外的内容中，这可能会使纯键盘用户难以或无法使用页面。

因此，最好的做法是使用display:none来隐藏未选中标签的内容。您可以使用一个类来应用 display:none，类似于您对隐藏类所做的那样，搜索引擎仍然能够对其进行索引。