Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB accordion is not accessible by keyboard and screen readers

angularspa free asked 5 years ago


Current MDB accordion is not accessible by keyboard and screen readers.

To make it accessible we have to do the recommended following changes

Angualr code

<mdb-accordion [multiple]="false">
      <mdb-accordion-item [collapsed]="false">
        <mdb-accordion-item-head>
           Accordion heading 1             
        </mdb-accordion-item-head> 
        <mdb-accordion-item-body>
                 Accordion body 1
        </mdb-accordion-item-body>         
      </mdb-accordion-item>

Generated HTML Code

    <mdb-accordion ng-reflect-multiple="false">
   <div class="accordion md-accordion">
      <mdb-accordion-item ng-reflect-collapsed="false">
         <div class="card active" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
            <mdb-accordion-item-head>
               <div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
                  <a role="button">
                     <h5 class="mb-0">
                          Accordion heading 1 
                          <i class="fas fa-angle-down rotate-icon ng-star-inserted"></i>
                     </h5>
                  </a>
               </div>
            </mdb-accordion-item-head>
            <mdb-accordion-item-body class="ng-tns-c12-0 ng-star-inserted">
               <div class="sb-item-body ng-trigger ng-trigger-expandBody" style="visibility: visible;">
                  <div class="card-body ">
                     Accordion body 1
                  </div>
               </div>
            </mdb-accordion-item-body>
         </div>
      </mdb-accordion-item>
   </div>
</mdb-accordion>

Code should be like below to make it accessible by keyboard and screen reader

    <mdb-accordion ng-reflect-multiple="false">
   <div class="accordion md-accordion">
      <mdb-accordion-item ng-reflect-collapsed="false">
         <div class="card active" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
            <mdb-accordion-item-head>
               <h5 class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
                 <button aria-expand="true/false" 
                 aria-controls="accordion-body1"
                 id="accordion-heading1"
                 class="btn btn-link text-justify"> 
                          Accordion heading 1
                          <i class="fas fa-angle-down rotate-icon ng-star-inserted" aria-hidden=”true”></i>                   
                  </button>
               </h5>
            </mdb-accordion-item-head>
            <mdb-accordion-item-body class="ng-tns-c12-0 ng-star-inserted">
               <div role="region" id="accordion-body1"
                aria-labelledby="accordion-heading1"
                class="sb-item-body ng-trigger ng-trigger-expandBody" style="visibility: visible;">
                  <div class="card-body">
                     Accordion body 1
                  </div>
               </div>
            </mdb-accordion-item-body>
         </div>
      </mdb-accordion-item>
   </div>
</mdb-accordion>

Recommended Updates

<a role=”button”>  without  href attribute it is not accessible by keyboard. It’s better to use the button tag itself to support accessibility .
MDB angular team also need to add aria-expand and dynamically change the value on aria-expand  true or false.
Also provide the unique ID and aria-control attribute to each header  item in accordion to establish the relationship between accordion header and body
aria-expand="true/false" 
                 aria-controls="accordion-body1"
                 id="accordion-heading1"

add aria-hidden=”true” to <i> tag for  fas fa-angle-down 

and then   <div>  after   <mdb-accordion-item-body> tag should  add the  following
role="region" 
id="accordion-body1"                                    /* unique id should be added to the div to provide relation to aria-control in header */
               aria-labelledby="accordion-heading1"   /* above defined id for accordion header should  assigned to aria-labelledby  attribute */

Damian Gemza staff answered 5 years ago


Dear @angularspa

Thanks for your report.

We'll take look at this, and we'll try to provide the aria- tags in the future releases.

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No