我经常在一些人的工作中看到角色属性。我也用它,但我不确定它的效果。

例如:

<header id="header" role="banner">
    Header stuff in here
</header>

Or:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Or:

<section id="main" role="main">
     Main content stuff in here
</section>

这个角色属性是必要的吗?

这个属性在语义上更好吗?

它能改善搜索引擎优化吗?

在这里可以找到一个角色列表,但我看到一些人自己制定了自己的角色。这样使用role属性是允许的还是正确的?

对此有什么想法吗?


当前回答

“角色属性”是为了帮助有视力问题的人而开发的。屏幕阅读器通知用户有关元素的信息。虽然这看起来很简单,但事实并非如此。如果你不是专家,也不确定,就不要分配角色。你可以在这里读

理解有时候糟糕的ARIA实现是很重要的 造成的问题比它能解决的要多,让内容变少 可访问。这可能发生,因为缺乏知识如何和 何时使用ARIA。

一些HTML元素具有隐式的角色。例如:

h1,h2...h6            -> heading
ul,li                 -> list
button                -> button
a                     -> link
<input type="text"/>  -> text

为了更具描述性,您可以重写这些内容

在SEO的情况下,你可以阅读的可访问性和SEO神话/

谷歌搜索“搜索引擎排名因素”会显示一个数字 搜索引擎优化/ SEM行业领导者的结果概述 改善SEO的许多因素。绝大多数已被确认 排名因素与易用性没有任何关系。 事实上,很多谷歌排名的因素并没有多少意义 与可达性的关系。

你也可以阅读:SEO重叠

虽然重要的是要了解SEO和可访问性(a11y) 为了对两者进行正确优化,重叠也是很重要的 要注意,为一个人优化并不一定类似于优化 另一个。换句话说,如果你为搜索优化了一个页面 引擎,这并不意味着你必须让它易于访问-和 亦然。

其他回答

这个角色属性是必要的吗?

答:是的。

当语言没有定义自己的角色属性时,role属性对于支持可访问富Internet应用程序(WAI-ARIA)以基于xml的语言定义角色是必要的。 尽管这是协议和格式工作组发布角色属性的原因,但该属性还有更通用的用例。

它为您提供:

可访问性 设备适应 服务器端处理 复杂的数据描述,等等。

我知道这是一个老问题,但根据您的确切需求,另一个可能的考虑因素是,在https://validator.w3.org/上验证会产生如下警告:

警告:表单角色对于元素表单来说是不必要的。

“角色属性”是为了帮助有视力问题的人而开发的。屏幕阅读器通知用户有关元素的信息。虽然这看起来很简单,但事实并非如此。如果你不是专家,也不确定,就不要分配角色。你可以在这里读

理解有时候糟糕的ARIA实现是很重要的 造成的问题比它能解决的要多,让内容变少 可访问。这可能发生,因为缺乏知识如何和 何时使用ARIA。

一些HTML元素具有隐式的角色。例如:

h1,h2...h6            -> heading
ul,li                 -> list
button                -> button
a                     -> link
<input type="text"/>  -> text

为了更具描述性,您可以重写这些内容

在SEO的情况下,你可以阅读的可访问性和SEO神话/

谷歌搜索“搜索引擎排名因素”会显示一个数字 搜索引擎优化/ SEM行业领导者的结果概述 改善SEO的许多因素。绝大多数已被确认 排名因素与易用性没有任何关系。 事实上,很多谷歌排名的因素并没有多少意义 与可达性的关系。

你也可以阅读:SEO重叠

虽然重要的是要了解SEO和可访问性(a11y) 为了对两者进行正确优化,重叠也是很重要的 要注意,为一个人优化并不一定类似于优化 另一个。换句话说,如果你为搜索优化了一个页面 引擎,这并不意味着你必须让它易于访问-和 亦然。

据我所知,角色最初是由XHTML定义的,但后来被弃用了。然而,它们现在是由HTML 5定义的,参见这里:https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

role属性的目的是向解析软件标识作为web应用程序一部分的元素(及其子元素)的确切功能。这主要是作为屏幕阅读器的可访问性,但我也可以看到它对嵌入式浏览器和屏幕抓取器很有用。为了对不常见的HTML客户端有用,需要将属性设置为我链接的规范中的一个角色。如果你自己编,这个“未来”的功能就行不通了——一个评论会更好。

实用方法:http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

角色和其他属性提高了屏幕阅读器的可访问性。它可以间接地帮助搜索蜘蛛更好地识别和理解各个部分。如果我比较这个和微数据模式,它在一个小的方式提高SEO。