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;
    }
  • 相关阅读:
    线性回归 r python 比较
    vps
    插桩 inline hook 动态二进制插桩的原理和基本实现过程
    duration of lease 1 0.5 0.875 DHCP 租借时间 续租时间 重新绑定时间
    单页应用 cookies处理
    websocket 无需通过轮询服务器的方式以获得响应 同步在线用户数 上线下线 抓包 3-way-handshake web-linux-shell 开发
    code_action
    mysql 表级锁
    mysql 表级锁
    块级标签和行级标签
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8564397.html
Copyright © 2011-2022 走看看