javascrpit 不使用 aria-label 显示为空

Question

Before Click Button

<button type="button" class="plyr__control" data-plyr="play" aria-label="Play">

After Click Button

<button type="button" class="plyr__control plyr__control--pressed" data-plyr="play" aria-label="Pause">

My Script

 <script> const $featured = $('.plyr__control'); // bind a change event handler to the input $featured.on('change', function() { if (button.getAttribute('aria-label') === 'Pause') { console.log('ok'); } }); </script>

Here JavaScript is not working. How to solve this?

Answer 1

Written by ( Carlos Moore ) and the rich skills Staff.

aria-label

An interactive element's label is defined by the string value of the aria-label property.

There may be no visible content in the DOM that can be associated with the object to give it meaning when the element's default accessible name is absent or inaccurately describes its contents. A typical illustration is a button with no text and an SVG or icon font (which you shouldn't be using).

The aria-label attribute can be used to define a string that labels the interactive element on which it is set when an interactive element lacks an accessible name or has an inaccurate accessible name and no visible content in the DOM that can be linked via the aria-labelledby attribute. This provides the element with its accessible name.

<button aria-label="Close" onclick="myDialog.close()">
      <svg aria-hidden="true" focusable="false" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/></svg</button>