我制作了一个利用AI的网站:它的访问程度如何?
#javascript #网络开发人员 #a11y #ai

似乎您现在在任何地方看到AI已将对话接管为技术的顶级流行语。 “ AI如何帮助您编码?”或“如何利用AI来改善您的工作!”是通常的标语。最近,“您知道您可以为您生成一个网站吗?”。

一旦我听到了这件事,我就进行了搜索,并且可以肯定的是,我充斥着利用AI来构建您的网站的不同站点。自然,我想使用其中之一并探索默认模板的访问程度。这是我发现的!

值得注意的事情

使用AI的方式因站点而异,但在大多数情况下,大多数网站都使用AI和个人自定义的组合来构建站点。请注意,我测试的只是实现盒子的实现,没有自定义。

我在我测试过的这个特定示例中使用了该站点耐用。使用它的原因是在社交媒体上看到多个推文和帖子,说“使用此信息来利用AI的整个网站!”。但是,我已经建立在您使用AI的其他网站上,结果非常相似。

最后,这并不是要抨击AI或任何帮助用户生成站点的特定网站。对于想要使用它来构建内容的用户来说,这只是一般的好奇心和意识。

生成的网站

当我去网站建造自己的网站时,我只是说我是个人生意和所在的位置。在那之后,一分钟后,POOF!该网站已经完成!

该网站有5个主要部分:

  • 带有“入门”按钮的横幅横幅
  • 我们的服务部分带有3个“了解更多”链接
  • 带有证明的旋转木马
  • 照片库
  • 与我们的部分联系,其中有3个文本输入字段

很简单吗?那么结果是什么?

自动化问题

使用Axe-Core该站点有17个问题。 11个关键问题和6个严重问题。 17听起来并不多,但是11个关键问题是很大的问题。它们包括:

  • “与我们联系”部分中的所有形式元素都缺少标签
  • 旋转木马按钮缺少可访问的标签
  • “画廊”中的所有图像都缺少alt文本

尽管该站点使用了本机HTML(这是一个巨大的加号)作为表单输入和旋转木马按钮,但基本的可访问性功能却缺少。所有输入中都缺少简单的属性。

其他严重的问题是颜色对比,这些站点中的大多数确实允许您更改配色方案进行修复。

键盘问题

我发现的最大键盘问题是,整个页面上的焦点指标非常不一致。有些元素会得到它,而另一些元素则不会,因此在页面上的位置很容易丢失。

“画廊”部分中还有一组图像,这些图像根本无法通过键盘访问。使用鼠标时,您可以单击任何图像以打开另一个旋转木马。整个部分不适合键盘用户。

该站点的其余部分用键盘运行并正常工作。这主要是由于本机HTML用于页面上的所有可操作项目。

屏幕阅读器问题

浏览页面有点困难,特别是在浏览模式下。由于该站点本身似乎正在使用JavaScript在“焦点”中的各个部分移动到部分,因此可以使页面导航有些奇怪,因为该页面从部分到部分都可以使页面有些奇怪。

它还具有多个链接和按钮,这些链接和按钮具有相同的文本,因此很难知道与内容的哪个部分相关联。

最后一件事是所有确实具有替代文本的图像具有非常基本的文本,例如“横幅图像”或随机生成的字符串。

总体想法

ai在这里保持更好或更糟。使用什至AI的生成站点将是小型企业甚至个人网站都可以轻松制作的方式。从可访问性的角度来看,阳性为:

  • 使用本机HTML
  • ARIA的一些实际用途
  • 简单的布局不会导致认知超载
  • 调整支持很棒

我认为AI有一天能够建立完全可访问的网站吗?我个人的看法是,可访问性将永远是人类问题,它将继续需要人类的解决方案。似乎AI几乎可以肯定可以找到有一天创建完全可访问的网站的方法,但是我的直觉是那天不久的时候。

我们作为可访问性的拥护者需要确保我们推动利用AI的生成站点并在这个不断变化的空间中引起人们的意识的问题。