我的 JS 手风琴可以使用吗?
这是我组装的 jQuery 手风琴: http://jsfiddle.net/cutcopypaste/xAPSz/
我想知道它是否适用于屏幕-阅读器和其他辅助技术。
我知道如果没有 JavaScript,一切都会被扩展,这完全没问题。
我添加了一个链接悬停效果来指示标题是可点击的,但我不知道屏幕阅读器会发生什么...所有内容一开始都是可见的吗? (这是可以的)或者它会被折叠而没有指示应该单击列表项吗?解决这个问题的好方法是什么?
我正在考虑使用 js 在标题周围添加实际的锚标记,以表明它是可点击的(而不仅仅是我现在使用的 :hover 样式),但不确定它是否值得
This is a jQuery accordion that I put together:
http://jsfiddle.net/cutcopypaste/xAPSz/
I want to know whether it will work with screen-readers and other assistive technologies.
I know that with no javascript, everything will be expanded, which is totally fine.
I added a link hover effect to indicate that the headers are clickable, but I don't know what will happen with a screenreader... will all the content be visible at the outset? (which is ok) or will it be collapsed with no indication that the list items should be clicked on? What might be a good way of getting around this?
I was thinking of using js to add actual anchor tags around the header, to indicate it would be clickable (Rather than just the :hover style I'm using now) but wasn't sure if it would be worthwhile
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
屏幕阅读器各不相同,但往往只阅读屏幕上可见的内容。由于您的手风琴开始关闭,因此最好用链接替换标题,或将链接包裹在标题文本周围。这样它们就成为屏幕阅读器的可点击项目,允许用户跳过标题/链接或打开它们以获取内容。
添加链接将使您的手风琴键盘也可以访问。一般来说,如果您希望人们点击某些内容来获得结果,您最好将它们链接起来,然后使用 CSS 对其进行样式设置,使其看起来像您想要的那样。与使用其他元素然后添加后焦点并通过脚本激活功能相比,它的工作量更少。您可以通过 Tab 键切换到链接并按 Enter 键激活它,这意味着有视力或行动障碍的用户可以轻松访问它们。
Screenreaders vary, but tend to only read what's visible on the screen. Since your accordion starts closed, it'd be good to replace the headings with links, or wrap the links around the heading text. That way they become clickable items for the screenreader, allowing users to either skip through the headings/links or open them up to get to the content.
Adding the links will make your accordion keyboard accessible too. Generally, if you want people to click on things to get a results, you're best off making them links and then styling them with CSS to look the way you want. It's less work than using other elements then adding back focus and activate functionality with scripting. You can tab to a link and activate it by pressing the enter key, which means that users with vision or mobility impairments can get at them easily.