使用 javascript 将 aria 标签添加到图像

Question

我正在使用 WordPress 的主题生成器，并且我创建了一些面板，每个面板中都有一个图像和一些文本。但是，使用主题的构建器工具不允许我向图像添加咏叹调标签。所以我尝试使用 javascript 将 aria 标签添加到图像中，但我似乎无法弄清楚这一点。有人可以帮忙吗？

这是我的 HTML：

<div  class="module module-link-block tb_c1o1565 icon-center solid licences-permits" data-lazy="1"><a href="#" title="Licences &amp; Permits" class="tb_link_block_container ui tb_default_color"><img loading="lazy" width="66" height="66" decoding="async" class="tf_vmiddle tf_box tb_link_block_img" src="https://xxxxx.xxxxx.xxxxxx.net/wp-content/uploads/2024/04/licence-1.svg"><div class="tf-lb-content"><div class="tb_link_block_heading">Licences & Permits</div><div class="tb_link_block_blurb">Browse Licenses & Permits</div></div></a></div>

这是我到目前为止得到的 javascript...但它没有将 aria 标签添加到图像 img scr 中。

jQuery(function($) { 
jQuery('.licences-permits').attr('aria-label','Licences & Permits'); 
 }); 
</script>```

Answer 1

问题是你实际上并没有针对

<img>

。

jQuery( function($) { 
    jQuery( '.licences-permits img.tb_link_block_img' ).attr( 'aria-label', 'Licences & Permits' ); 
 } );

也不确定您的脚本是否正确排队，或者您是否始终希望

aria-label

相同。我会采取稍微不同的方法。

(function( $ ) {
    'use strict';
    $( document ).ready( function() {
        if( $( '.licences-permits' ).length > 0 ) {
            $( '.licences-permits' ).each( function() {
                var newLabel = $( this ).children( 'a' ).attr( 'title' );
                $( '.licences-permits img.tb_link_block_img' ).attr( 'aria-label', newLabel ); 
            } );
        }
    } );
} )( jQuery );

这样，您就不必将 ARIA 标签硬编码为一个字符串，而是可以根据您在

<a>

标题属性中输入的内容灵活地对其进行修改。