本文介绍一下PageSpeed Insights 新功能智能体浏览中出现的一些无障碍问题如何处理。

如果你使用 Elementor 编辑,在PageSpeed Insights 检测结果中会看到一下问题。可能还会有别的问题比如 llms.txt 文件不可见的问题。

PageSpeed Insights 智能体浏览无障碍问题 - PageSpeed Insights 智能体浏览无障碍问题处理 - NUTSWP

 llms.txt文件不可见怎么办?

打开你的 Rankmath SEO 设置,勾选好内容之后,打开 llms.txt 文件,如果可以正常访问,再次测分之后,这个问题就会消失。

llms txt 文件可见性 - PageSpeed Insights 智能体浏览无障碍问题处理 - NUTSWP

Certain ARIA roles must contain particular children 问题

这个就是上面测速结果中出现的第一个问题,如果你的页面中使用 Loop Grid 自定义 Loop Item 模板,可能就会出现这个问题。

这是由于 Loop Grid 告诉浏览器他是一个列表元素,但是 Loop Item 模板里面没有明确标记出列表子项目,导致的标签混乱。

通过下面的方法可以解决此问题。

为 Loop Item 模板的 Container 设置 Role 属性

打开 Loop Item 模板,选择模板中最外层的 Container,切换到 Advance 选项卡,然后在Custom Attributes

添加role|listitem 属性,保存发布模板。

image 1 - PageSpeed Insights 智能体浏览无障碍问题处理 - NUTSWP

Links must have discernible text 问题

这个问题是告诉 AI 你这个链接是干嘛用的。这个问题有时候是LOGO 图片,有时候是带链接的 ICON 图标。

如果是 LOGO 图片,可以手动去 LOGO 图片设置 ALT 属性内容来解决。

也可以通过给链接设置aria-label 属性内容来解决,比如 LOGO 的链接设置后面的小齿轮点开,然后再属性栏里面添加aria-label|XXX LOGO Link to Homepage。

image 3 - PageSpeed Insights 智能体浏览无障碍问题处理 - NUTSWP

此方法也适用于一些 带链接的 Icon 图标,由于没有设置任何文字内容,就可以用此方法来加暗语说明。

image 4 - PageSpeed Insights 智能体浏览无障碍问题处理 - NUTSWP