浅析网络生活的利与弊作文500字,浅析创新驱动发展战略的必要性与时代意义

　　最近翻译无障碍相关文档时遇到了地标这个概念。上网搜了一下，发现没有相关的中文资料，就写了个博客简单介绍一下。

　　什么是 Landmark

　　Landmark是一种用来表示网页组织结构的方法。通常，一个网页可以被切割成几个块。

　　以某视频网站为例。网页顶部有一个横幅，左边是导航栏，右边是视频。通过这种方式可以将网页划分成不同的功能区域。当然，分段也可以在一个功能区内递归完成，这里就不展开了。

　　对于一个视障人士来说，他无法像普通人一样从视觉的角度理解网页的结构信息，所以网页开发者需要提前规划好网页的结构，用HTML代码写出结构信息，最后通过读屏软件将网页的结构信息表达出来。

　　Landmark是网页结构信息和读屏软件之间的桥梁。开发者通过地标标记网页区域，读屏软件读取地标信息，传输给视障人士。

　　如何使用 Landmark

　　其实地标这个概念在HTML5 landmark出现之前就有了。

　　Landmark有以下几个主要的，导航，补充，横幅，contentinfo，表单，区域和搜索。通过使用div role=main 来定义主地标。

　　在HTML5中，定义了一些全新的标签，并赋予了隐含的地标语义。

　　5 HTML5地标主要包括以下几种

　　HTML元素地标角色主要主要导航导航旁边补充页眉横幅页脚内容信息表单表单部分区域

　　这些标签本身就隐含了landmark的意思，也就是说main和div role=main 是完全等价的。

　　没有为搜索地标定义专门的HTML标签，通常使用form role=search 来实现。

　　也就是说，在上一节引用的网页中

　　对于1号区域，所有内容应放在页眉/页眉中，该页眉/页眉将该部分标识为横幅。对于2号区域，所有内容都应该放在一个nav/nav中，对于3号区域，所有内容都应该放在一个main/main中，这表明这部分是网页的主要内容。读屏软件会生成一系列跳转链接，帮助视障人士确定网页的结构，快速跳转到需要的部分。

　　在HTML5之前，landmark只能通过角色属性来定义。HTML5引入的新标签可以简化标签，同时保持可访问性。但是，并不是每个用户的辅助工具都支持最新的标准，所以很多教程都推荐编写main role=main 来兼容这两种标准。W3C的标准不鼓励在隐式语义的情况下使用角色属性，因为它们之间的语义冲突可能会导致不可预知的性能。

　　区分同类型的 Landmark

　　有时一个页面中可能会有多个导航栏，它们有不同的功能。比如某电商网站有一个主导航跳转到购物车、收藏夹等不同页面；还有一个产品导航可以跳转到电子产品和婴儿产品。如何区分这两者？在这里，您需要使用aria-label或aria-labelledby属性。

　　Nav aria-label=主导航 ul Li home/Li Li shopping Cart/Li Li vorites/li /ul/div nav aria-label=产品导航 ul liBaby产品/Li Li电子产品/Li Li体育产品/Li/ul/div该屏幕阅读软件将分别生成以下两个链接

　　导航，主导航，产品导航，从而区分不同的地标。

　　使用读屏软件读取 Landmark

　　为了更好的理解landmark，我尝试用读屏软件在网页上测试landmark。我这里用的是Windows系统自带的旁白。

　　按下Caps Lock F5显示网页中的所有地标。

　　按Caps Lock N，可以看到旁白的光标已经移到了网页的主要内容部分。

　　使用D或Shift D在地标之间切换，会读出每个地标的信息。

　　您可以看到这里有一个搜索标志，它位于横幅标志内。这就是地标嵌套的情况。地标嵌套有一系列规则，有兴趣的读者可以自己了解。

　　总结

　　和这个词的本义一样，landmark就像一个网页的很多“入口”或者“地标”。用地标标注网页结构的信息，可以帮助视障人士通过读屏软件理解网页的结构，快速到达所需部分。

　　然而，正如不是所有的读屏软件都支持HTML5 landmark一样，也不是所有的视障人士都知道landmark的概念以及如何使用landmark。所以还是要提供传统的跳转链接，跳过导航，直接跳转到内容。

　　以上是HTML5 Landmark的详细内容。更多关于HTML5 Landmark的信息，请关注其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。