当前位置:  开发笔记 > 编程语言 > 正文

如何格式化HTML5中的<section>元素,以便为辅助设备用户提供有意义的洞察力?

如何解决《如何格式化HTML5中的<section>元素,以便为辅助设备用户提供有意义的洞察力?》经验,为你挑选了1个好方法。

什么是最好的方法是让屏幕阅读器类型的辅助设备以富有洞察力的方式宣布部分?

理想情况下,

有没有一种方法可以标记
可以实现此目的的实际标记,而不是将此作业传递给子标记?

如果a

被分解为
s,则认为
s不适合联合,但它们仍应在文档结构中具有自己的固有身份.我们作为HTML作者如何记录这一点?

示例:给出此树:

Article: A review of the iPad
section: brief preamble, statement of goals
section: aesthetics
section: performance
section: target market
section: wrap up

我们如何标记

s以使辅助设备能够从
标签中获取部分焦点?

这是HTML中的一个例子:



  

    

An article about markup!

Example 1

Example 2

Example 3

那么:示例1到3中的任何一个都是不错的选择,还是有更好的选择?



1> David Storey..:

如果我理解你的内容,你应该在section元素中添加role ="region",如下所示:

这将告诉屏幕阅读器该部分确实是一个部分,并将向用户提供正确的可访问性信息.此角色是WAI-ARIA角色.理想情况下,它不需要,因为section元素隐含了语义,但屏幕阅读器中的ARIA比HTML5元素有更好的支持,因此这将填补空白,直到支持广泛存在.

您可以将该aria-labelledby属性添加到section元素并将其与h*的ID相关联,如果您希望屏幕阅读器在宣布该部分时宣布标题,例如Jaws中的"示例1区域".

对于这些章节中的每个标题,将它们包含在header元素中也是一个好主意,就像这样,虽然不是严格需要的(我经常只针对主要文章标题)

An article about markup!

Example 1

Example 2

Example 3

欲了解更多信息,请参阅http://blog.paciellogroup.com/2011/03/html5-accessibility-chops-section-elements/,http://blog.paciellogroup.com/2010/10/using-wai-aria-landmark -roles /和http://blog.paciellogroup.com/2013/10/using-html5-section-element/

推荐阅读
mobiledu2402851323
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有