Topic: Accessibility Complaint Issue with mdb-table-paginatio
<mdb-table-pagination [searchDataSource]="element" (nextPageClick)="onNextPageClick($event)" (previousPageClick)="onPreviousPageClick($event)"><br> </mdb-table-pagination>
Generated HTML code should comply to Accessibility Standard
<p></p> is generated under </uL>, which does not comply with Accessibility Code
<mdb-table-pagination _ngcontent-c4=""><nav><ul class="pagination pagination-circle pg-blue d-flex flex-center"><!---->**<p>1 - 5 of 15</p>**<li class="page-item disabled"><a aria-label="Previous" class="page-link" mdbwaveseffect=""><span aria-hidden="true">«</span></a></li><li class="page-item"><a aria-label="Next" class="page-link" mdbwaveseffect=""><span aria-hidden="true">»</span></a></li></ul></nav></mdb-table-pagination>
Dear angularspa,
Could you please provide me with some information about this problem in the context of Accesibility? Where can I read about the accessibility standards for this case?
I would like to check this code and fix it if there's a problem.
Best Regards,
Damian
In above MDB generated code for table pagination includes the <p> tag inside the <ul> tag.
Due to <p> tag its failing WCAG 1.3.1 success criteria.
Possible right way fix this is to exclude <p> tag from <ul> and place it before <ul>
Explanation:
<ul> and <ol> must only directly contain <li>, <script> or <template> elements
Why this is Important Screen readers have a specific way of announcing lists. This feature makes lists clearer to understand, but will only work if lists are properly structured. When content elements other than list items are contained within a set of list elements, screen readers cannot inform the listener that they are listening to items within the list. For a list to be valid, it must have both parent elements (a set of ul elements or a set of ol elements) and child elements (declared inside of these tags using the li element), and any other content elements are invalid. Although some non-content elements such as script, template, style, meta, link, map, area, and datalist are permitted within lists, content elements other than li are not permitted.
Okay, now I get it. Thanks for your report!
We'll handle this.
Best Regards,
Damian
angularspa commented 6 years ago
Thanks, would you please advise when the fix will be released?
Damian Gemza staff commented 6 years ago
Please watch for our changelog change - that's the best way to know when something changes.
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.2
- Device: Desktop
- Browser: chrome
- OS: windows 7
- Provided sample code: No
- Provided link: No