我试图找到语义上正确的方式来描述代表获取帮助(例如帮助图标)及其帮助内容的方式的 HTML 元素。 我试图搜索此主题，但在帮助中搜索帮助并非易事。这是我的想法的一个简单示例(使用一个简单的脚本来显示/隐藏帮助内容以及利用“title”属性):
<div>
Please enter your password
<a class="help" title="Your password must have 5 characters">
<img src="/images/help.svg" alt="">
</a>
<span class="helpText displayNone">
Your password must have 5 characters.
</span>
<input type="password>
</div>
有没有更好的方式来表示这个(以这种格式)。这个想法是用一种可访问且 SEO 友好的方式来描述“可切换的帮助内容”。
问题是关于 HTML/HTML5 和 WAI-ARIA 属性(不是 JavaScript)——我正在寻找我的示例的最佳元素表示(如果这样的概念存在)。
最佳答案
根据您的标记，我认为这个问题比您预期的要大。首先让我们清理您的示例，以便有适当的语义和结构元素，也使用户可以访问它:
<div>
<label for="pwd">Please enter your password</label>
<input type="password" id="pwd">
</div>
这构成了一个可访问的字段。没有脚本，没有 ARIA。只是一个<label>与该字段正确关联。
现在您想为用户提供一些帮助，但仍将其与该字段相关联。
首先，不要使用 anchor 。这告诉辅助技术的用户，它将把他们带离页面，他们可能不想单击或激活控件。使用 <button> .
然后您可以使用 ARIA 将该提示与字段相关联。在这种情况下 aria-describedby将与现场一起公布。
您还需要填写 alt属性，否则您的图像根本不会向屏幕阅读器用户公布。
在此上下文中使用的最佳 ARIA 角色是 role=tooltip (read more in the ARIA spec)。
这是您可以采用的一种方法:
<div>
<label for="pwd">Please enter your password</label>
<button><img src="/images/help.svg" alt="Help"></button>
<span id="pwd-tip" role="tooltip">Your password must have 5 characters.</span>
<input type="password" id="pwd" aria-describedby="pwd-tip">
</div>
如果必须避免使用脚本，您可以使用 CSS 来确定按钮是否具有焦点并显示以下同级范围 (button:focus + span)，但那样很草率。您可以使用脚本在 button 上切换一个类它使用类似的 CSS 来显示 span .
您可以将文本放入<label>并使用 CSS 屏幕外技术隐藏它，这意味着它将始终向屏幕阅读器宣布，然后您可以转储 aria-describedby .
坦率地说，您可以通过几种不同的方式为它设置外观。在 ARIA Practices description for a tooltip 查看您必须考虑的键盘交互.
但是，在大多数情况下，最好让帮助文本始终可见(尤其是如果您想满足 SEO 的模糊概念)。在真空中，我会把这段文字放在 <label> 中并完成它。
关于html - HTML5 和 WAI-ARIA 中是否有语义方式来描述 "Toggleable Help Content"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41783569/
我正在尝试测试是否存在表单。我是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
我在从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""-
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test
我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que
我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file
当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub