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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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