jjzjj

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

coder 2024-02-29 原文

我一直在阅读有关屏幕阅读器和可访问性的文章，我想在我工作的某些网站上实现标签式导航，但我担心无法将数据编入索引、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”的条件代码 但也许这类问题可以帮助其他人实现一个简单的选项卡可访问性友好的代码段。

谢谢。

最佳答案

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

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

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

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

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

关于html - 使用 "hidden"类而不是显示 : none for Tabs Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30926032/

ampJquery34sectioncodehtmlcsstabsseoaccessibility

有关html - 使用 "hidden"类而不是显示 : none for Tabs Jquery的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  8. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  9. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  10. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

随机推荐