将文本附加到 aria-label 名称答案

【问题标题】：append text to aria-label name将文本附加到 aria-label 名称
【发布时间】：2018-03-22 21:36:36
【问题描述】：

我的网站上有两个光滑的滑块；一个显示 News 的另一个 Events 。由于 div.slick track 行上有重复的 aria 标签，我遇到了可访问性错误；我需要将文本附加到第一个光滑的滑块 div.slick-track aria-label。我试图更新 slick.min.js 文件，但我一直在破坏该文件。所以我只是想写一些 jQuery 代码（没有运气）来将文本附加到第一个滑块中的 aria 标签。我浏览了 Stack Overflow 推荐的已回答问题，但没有运气。这是我的 HTML 的一部分

    <div aria-label="news" class="slick slick-initialized slick-slider" 
role="toolbar">
    <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" style="display: block;">Previous</button>                 
        <div aria-live="polite" class="slick-list draggable">
            <div class="slick-track" style="opacity: 1; width: 3487px; transform: translate3d(-2219px, 0px, 0px);" role="listbox" aria-label="slick-list">

这是我尝试使用的方法

jQuery

$(".slick-track[aria-label='slick-list']").append("news");

//与

   $(".slick-track[aria-label='slick-list']").find(function(){
        $(this).append("news");
    });

有什么建议吗？提前致谢。

【问题讨论】：

这个$(".slick-track[aria-label='slick-list']").append("news"); 有效。但是您的 div 应用了 transform3d 样式属性，这导致文本不可见。
“这是我的 HTML 的一部分” - 你的意思是 aria-label="slick-list" 是静态 HTML ...？那么为什么不改变它那里，而不是依赖JavaScript（这可能不是给定的，尤其是关于残疾用户的？）即使这是在循环或通过服务器端模板中输出的多个函数调用，您应该能够相应地修改它，添加一点 if 条件或一个额外的参数可能......？

标签： jquery html wai-aria

【解决方案1】：

随便用

document.getElementById('DIV_ID').setAttribute('aria-label', 'YOURTITLE');

【讨论】：

【解决方案2】：

试试

   var last  =$(".slick-track").attr("aria-label");
   $(".slick-track").attr("aria-label",last+"new");

【讨论】：

【解决方案3】：

将文本附加到第一个光滑滑块 div.slick-track aria-label：

$(".slick-track[aria-label='slick-list']:first").append("news");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div aria-label="news" class="slick slick-initialized slick-slider" 
role="toolbar">
    <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" style="display: block;">Previous</button>                 
    <div aria-live="polite" class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 3487px; transform: translate3d(-2219px, 0px, 0px);" role="listbox" aria-label="slick-list">
        </div>
    </div>
</div>

【讨论】：

【解决方案4】：

所以我的原始代码确实有效。问题是 slick.min.js 文件在 DOM 中的 jQuery 代码（文件）之后加载。一旦我改变了它的工作顺序。

【讨论】：