提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[HTML 5] Styling with ARIA

HTML with ARIA
2023-09-14 09:00:50 时间

See if you can do a better job styling this button using ARIA states. One huge benefit to styling with ARIA is that it provides visual feedback that you've applied the state correctly, which can act as a safeguard when you're testing and debugging your code.

 

In the following code, we use js to add 'expended' class to the element. But better solution is using aria-expanded to style the element.

<button class="disclosure-button mdl-button raised" aria-expanded="false" aria-controls="content">
        <span class="icon" aria-hidden="true"></span> Read More
      </button>
      <div id="content" class="disclosure-content hidden" aria-hidden="true">
        <p>It turns out contestants who switch have a 2/3 chance of winning the car, while contestants who stick to their choice have only a 1/3 chance! <a href="https://en.wikipedia.org/wiki/Monty_Hall_problem">Curious to know more?</a></p>
      </div>
  if (content.getAttribute('aria-hidden') === 'true') {

    content.setAttribute('aria-hidden', 'false');
    content.classList.remove('hidden');

    button.setAttribute('aria-expanded', 'true');
    button.classList.add('expanded');

  } else {

    content.setAttribute('aria-hidden', 'true');
    content.classList.add('hidden');

    button.setAttribute('aria-expanded', 'false');
    button.classList.remove('expanded');

  }
.disclosure-button .icon::after {
  content: '▶';
}

.disclosure-button.expanded .icon::after {
  content: '▼';
}

.disclosure-content.hidden {
  visibility: hidden;
  opacity: 0;
}

.disclosure-content {
  visibility: visible;
  opacity: 1;
}

 

Better:

.disclosure-button[aria-expanded="false"] .icon::after {
  content: '▶';
}

.disclosure-button[aria-expanded="true"] .icon::after {
  content: '▼';
}

.disclosure-content[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
}

.disclosure-content[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

 

相关文章