After researching screen readers and accessibility, I am interested in incorporating tab navigation into a website I am currently working on. However, I have concerns about data indexing, SEO, and accessibility issues. I am currently using a "hidden" class for the content based on 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>In the code snippet above, you can see my current approach. I am wondering if there is a more effective way to achieve the same result. I am new to jQuery and looking to improve my skills. I believe there may be variables and conditional codes that could be used with "if" statements to optimize the process. Hopefully, this question can also benefit others looking to implement a simple tab with accessibility features.
Thank you.