zoukankan      html  css  js  c++  java
  • [HTML 5] Styling with ARIA

    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;
    }
  • 相关阅读:
    7
    6
    Robot Motion -- 机器人路径规划
    Delaunay Triangulation
    Voronoi Diagram -- 泰森多边形 (维诺图)
    Window query -- 区间线段包含问题
    5
    es6模块化
    js模块化编程之彻底弄懂CommonJS和AMD/CMD!
    混合开发菜鸟级别总结笔记 内容来自百度一下,你就知道
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8564397.html
Copyright © 2011-2022 走看看