设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 无障碍折叠面板
返回列表 发新帖
查看: 3|回复: 0

无障碍折叠面板

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 昨天 22:14 | 显示全部楼层 |阅读模式
可访问性是UI设计中的重要因素。这个折叠面板不仅注重视觉上的无障碍设计，还支持键盘操作，用户可以使用TAB键和ENTER键导航各个部分，提升用户体验。

效果演示
640.gif

HTML
  1. <html lang="en">
  2.   <head>
  3.     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  4.     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  5.     <link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
  6.   </head>

  8.   <body>
  9.     <h1>Accessible Accordion</h1>
  10.         
  11.     <!-- Accordion 1 -->
  12.     <section class="accordion" role="tablist" aria-live="polite" data-behavior="accordion">

  14.       <article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
  15.         <span id="tab1" tabindex="0" class="accordion__title" aria-controls="panel1" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
  16.           <h5>Use the tab key to navigate...</h5>
  17.         </span>

  19.         <div id="panel1" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab1" data-binding="expand-accordion-container">
  20.           <div class="accordion__content-inner">
  21.             <p>You can cycle through all the different accordion items through tabbing.</p>
  22.           </div>
  23.         </div>

  25.       </article>

  27.       <article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
  28.         <span id="tab2" tabindex="0" class="accordion__title" aria-controls="panel2" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
  29.           <h5>Or, you can use your mouse.</h5>
  30.         </span>

  32.         <div id="panel2" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab2" data-binding="expand-accordion-container">
  33.           <div class="accordion__content-inner">
  34.             <p>This accordion can be used by both mouse and keyboard-only users.</p>
  35.           </div>
  36.         </div>
  37.       </article>
  38.       
  39.       <article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
  40.         <span id="tab3" tabindex="0" class="accordion__title" aria-controls="panel3" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
  41.           <h5>Click here to view more</h5>
  42.         </span>

  44.         <div id="panel3" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab3" data-binding="expand-accordion-container">
  45.           <div class="accordion__content-inner">
  46.             <p>You can also use either the space bar or enter key to expand/collapse these panels.</p>
  47.           </div>
  48.         </div>
  49.       </article>
  50.       
  51.       <article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
  52.         <span id="tab4" tabindex="0" class="accordion__title" aria-controls="panel4" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
  53.           <h5>ARIA</h5>
  54.         </span>

  56.         <div id="panel4" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab4" data-binding="expand-accordion-container">
  57.           <div class="accordion__content-inner">
  58.             <p>This accordion makes use of ARIA tags which help aid accessibility.</p>
  59.           </div>
  60.         </div>
  61.       </article>

  63.     </section>

  65.     <!-- Accordion 2 -->
  66.     <section class="accordion" role="tablist" aria-live="polite" data-behavior="accordion">
  67.       <article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
  68.         <span id="tab5" tabindex="0" class="accordion__title" aria-controls="panel5" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
  69.           <h5>Heading 1</h5>
  70.         </span>

  72.         <div id="panel5" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab5" data-binding="expand-accordion-container">
  73.           <div class="accordion__content-inner">
  74.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  75.           </div>
  76.         </div>

  78.       </article>

  80.       <article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
  81.         <span id="tab6" tabindex="0" class="accordion__title" aria-controls="panel6" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
  82.           <h5>Heading 2</h5>
  83.         </span>

  85.         <div id="panel6" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab6" data-binding="expand-accordion-container">
  86.           <div class="accordion__content-inner">
  87.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  88.           </div>
  89.         </div>
  90.       </article>

  92.     </section>
  93.   </body>
  94. </html>
复制代码
  1. body {
  2.   background-color: #F6F7EB;
  3.   font-family: 'Open Sans', sans-serif;
  4. }

  6. h1 {
  7.   font-family: 'Lobster Two', cursive;
  8.   text-align: center;
  9.   margin-top: 30px;
  10.   font-size: 50px;
  11.   color: #2b3a40;
  12. }

  14. .accordion {
  15.   background-color: #fefffa;
  16.   max-width: 600px;
  17.   margin: 50px auto;
  18.   border-top: 6px solid #44BBA4;
  19.   line-height: 1.6;
  20.   box-shadow: 5px 5px 10px 0px #a4bac1;
  21.   
  22.   &__item {
  23.     border-bottom: 1px solid #dce7eb;
  24.   }

  26.   &__title {
  27.     padding: 15px 15px 15px 40px;
  28.     display: block;
  29.     position: relative;
  30.     font-weight: 400;

  32.     &:before {
  33.       font-family: FontAwesome;
  34.       content: "\f055";
  35.       font-size: 20px;
  36.       position: absolute;
  37.       left: 15px;
  38.       top: 12px;
  39.       color: #44BBA4;
  40.     }
  41.    
  42.     h5 {
  43.       border-bottom: 1px solid #fefffa;
  44.       display:inline-block;
  45.     }

  47.     &:hover,
  48.     &:focus {
  49.       cursor: pointer;
  50.       outline: none;
  51.       h5 {
  52.         border-bottom-color: #a8bdc4;
  53.         display:inline-block;
  54.       }
  55.     }

  57.     .is-expanded & {
  58.       &:before {
  59.         content: "\f056";
  60.       }

  62.     }
  63.   }

  65.     &__content-inner {
  66.         padding: 0 40px 10px 40px;
  67.     }

  69.   &__content {
  70.     transition: height 0.3s ease-out;
  71.     height: 0;
  72.     overflow: hidden;
  73.   }
  74. }
复制代码
  1. var accordion = $('body').find('[data-behavior="accordion"]');
  2. var expandedClass = 'is-expanded';

  4. $.each(accordion, function () { // loop through all accordions on the page

  6.   var accordionItems = $(this).find('[data-binding="expand-accordion-item"]');

  8.   $.each(accordionItems, function () { // loop through all accordion items of each accordion
  9.     var $this = $(this);
  10.     var triggerBtn = $this.find('[data-binding="expand-accordion-trigger"]');
  11.    
  12.     var setHeight = function (nV) {
  13.       // set height of inner content for smooth animation
  14.       var innerContent = nV.find('.accordion__content-inner')[0],
  15.           maxHeight = $(innerContent).outerHeight(),
  16.           content = nV.find('.accordion__content')[0];

  18.       if (!content.style.height || content.style.height === '0px') {
  19.         $(content).css('height', maxHeight);
  20.       } else {
  21.         $(content).css('height', '0px');
  22.       }
  23.     };
  24.    
  25.     var toggleClasses = function (event) {
  26.       var clickedItem = event.currentTarget;
  27.       var currentItem = $(clickedItem).parent();
  28.       var clickedContent = $(currentItem).find('.accordion__content')
  29.       $(currentItem).toggleClass(expandedClass);
  30.       setHeight(currentItem);
  31.       
  32.       if ($(currentItem).hasClass('is-expanded')) {
  33.         $(clickedItem).attr('aria-selected', 'true');
  34.         $(clickedItem).attr('aria-expanded', 'true');
  35.         $(clickedContent).attr('aria-hidden', 'false');

  37.       } else {
  38.         $(clickedItem).attr('aria-selected', 'false');
  39.         $(clickedItem).attr('aria-expanded', 'false');
  40.         $(clickedContent).attr('aria-hidden', 'true');
  41.       }
  42.     }
  43.    
  44.     triggerBtn.on('click', event, function (e) {
  45.       e.preventDefault();
  46.       toggleClasses(event);
  47.     });

  49.     // open tabs if the spacebar or enter button is clicked whilst they are in focus
  50.     $(triggerBtn).on('keydown', event, function (e) {
  51.       if (e.keyCode === 13 || e.keyCode === 32) {
  52.         e.preventDefault();
  53.         toggleClasses(event);
  54.       }
  55.     });
  56.   });

  58. });

复制代码

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表