有没有办法解决我网站上与第三方标签有关的无障碍问题？

问题描述

在网页上运行google的lighthouse扩展名后，我收到一个标记为错误的按钮，该按钮没有可识别的文本，显示为以下html标签：

<div class="invitation-chat__close" role="button" data-dl-element="button" data-dl-name="No,don't start">

我的报告建议这样做：

要解决此违规问题，您需要：

解决至少一（1）个问题：

元素没有屏幕阅读器可以看到的内部文本
aria-label属性不存在或为空
由属性标记的aria标签不存在，引用的元素不存在或引用的元素为空
由属性标记的aria标签不存在，引用的元素不存在或引用的元素为空
元素的默认语义未被role =“ presentation”覆盖
元素的默认语义没有被role =“ none”覆盖
元素没有标题属性或标题属性为空

在不中断我的第三方程序（只是一个聊天机器人）的功能的情况下，有什么方法可以实现这些建议。

解决方法

是的，您可以通过多种方式进行此操作。

显示此错误的原因是屏幕阅读器，他们需要一些可程序确定的文本才能告诉用户按钮的作用。

您只显示了按钮HTML的一部分，但我猜您只是在其中使用了一个图标，因此屏幕阅读器无法为最终用户确定有用的信息。

您可以通过以下两种方法解决此问题：-

1。添加一个`aria-label`

WAI-ARIA用于向屏幕阅读器提供额外的信息。如果您按照以下方式将标记更改为包括aria-label，这将使屏幕阅读器用户知道该按钮的作用：-

<div class="invitation-chat__close" role="button" data-dl-element="button" data-dl-name="No,don't start" aria-label="open chat or whatever is the action of the button">

aria-label告诉屏幕阅读器“在确定如何宣布此项目时忽略此元素的内容，而是使用我定义的此文本”。

2。添加一些视觉上隐藏的文本。

Unfortunately aria-label does not have universal support.

因此，更好的方法是使用“ {visually hidden text”（不可见但屏幕阅读器可以访问的文本）。

Please see this answer I gave about sr-only text to understand that further and for the reason to use the below class.

对于您的示例，您要做的就是添加一个visually-hidden类的跨度，其中包含描述按钮用途的文本。

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6,IE7 - a 0 height clip,off to the bottom right of the visible 1px box */
    clip: rect(1px,1px,1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers,clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class="invitation-chat__close" role="button" data-dl-element="button" data-dl-name="No,don't start">
    <span class="visually-hidden">Open chat or whatever is appropriate text for the button</span>
<!-- other HTML such as icon -->
    ICON
</div>

其他建议。

正如我想象的那样，您正在使用HTML5，我鼓励您更改标记。

使用<div>元素代替role="button"和<button>。

不仅功能更强大，而且更易于维护，并且具有所有功能，例如焦点指示器，点击事件等。

尽管role的支持比其他WAI-ARIA属性要好得多，但这仍然没有得到支持。

<button class="invitation-chat__close" data-dl-element="button" data-dl-name="No,don't start">
    <span class="visually-hidden">Open chat or whatever is appropriate text for the button</span>
<!-- other HTML such as icon -->
    ICON
</button>

如果您不能更改源代码怎么办？

此时，您需要执行相同的操作，但要使用JavaScript。

一旦您的组件已使用查询选择器初始化目标不合格的div并插入相关的HTML。

const myNewHTML = '<span class="visually-hidden">Open chat or whatever is appropriate text for the button</span>';
let el = document.querySelector('[data-dl-name="No,don\'t start"]');
el.innerHTML = el.innerHTML + myNewHTML

console.log("NEW INNER HTML",el.innerHTML);

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6,don't start">
<!-- other HTML such as icon -->
    ICON
</div>

accessibility chatbot html