using a "hidden" class instead of display: none for Tabs Jquery

Question

i have been reading abou screen readers and accessibility, i want to implement a tabbing navigation in some website i am working, but i am affraid about not getting the data indexed, SEO issues and accessibility problems. Im using this class as a "hidden" class for the content, based of HTML5 boilerplate and a CSS tricks article:

$(".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>

You can see in the Snippet what i am using, i just want to know if there is a more effective way to do it, i am very new to Jquery and i'm trying to improve, i know there must be variables that i can use and conditional code with "if" but maybe this kind of question can help others to implement a simple tab accessibility-friendly snippet.

thank you.

Answer 1

There was a time when all content behind a display:none would be ignored (to avoid spammers using hidden text).

However, with advances in CSS design, hiding layers is becoming increasingly common. Google tries its best to render sites and determine which hidden elements will be easily viewable by users and which wont. So, it tends to index layers that aren't displaying, if it determines that JavaScript events will make those layers visible.

To ensure that Google does realise that your layers are not spam, you need to ensure your CSS and JS files are crawlable.

Note that this isn't perfect, though. Use the "Fetch as Googlebot" tool in WMT to test on your site to be sure it's picking up all the content.

Answer 2

If content is not to be displayed to sighted users and the state of the tab indicates that the content is not currently activated, then how does a screen reader user know which content is related to the current tab unless you hide it using display:none?

I your case, because you have the content duplicated, they can determine this. In the case of generic tabs, they may not be able to.

Also, if your tabs have a large amount of content in them and/or there are a large number of tabs, a screen reader user will have to traverse all the content to find the tab they are interested in. You have chosen to hide this from the sighted user for a reason, possibly because you want to make it easy to find relevant information. You need to provide that same ease of use for the screen reader user.

Finally, if your tab content contains tabbable elements (links, buttons or inputs), then a keyboard-only user's focus will get lost in the off screen content and this may make it difficult or impossible for a keyboard only user to use the page.

Therefore, the best practice is to use display:none to hide the content of the unselected tabs. You can apply display:none using a class, similar to the way you have done that with your hidden class and the search engines will still be able to index it.